How Do I Put Pictures anywhere in fluid grid layout??

Hi,
I was wondering how you put pictures anywhere you want in fluid grid layout without having to use the fluid grid layout div tag. I find it easier to use the ap div and simply insert pictures and move them freely however when i do that they dont stay in the correct place and the other grids? Is there an easier way?

Sorry but APDiv tags don't work in Fluid Grid layouts. That's why Adobe removed them from CC.
You must use the Fluid Grid divs in your layout to hold your text and images.
<div class="gridContainer clearfix">
     <div class="div1">
          insert image here...
     </div>
     <div class="div2">
          insert image here...
     </div>
</div>
Nancy O.

Similar Messages

How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.

While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O.

How to convert live website to fluid grid layout

I have an existing live website. How do I convert it to a fluid grid layout?

Who is Peter?
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
If you want to support multiple languages, you'll need to build a mirror site with translations.
Nancy O.

How do i put pictures from my laptop onto my ipad mini ?

I have a windows 8 laptop with itunes and i was wondering how do i put pictures from my laptop onto my ipad mini ? I have done this before but i have only been able to do 1 album and then when i try to do another it gets rid of the 1st album i put on there. How do i put more than 1 album onto my ipad mini?

Another way. You can use a USB flash drive & the camera connection kit.
Plug the USB flash drive (works the same with an SD card) into your computer & create a new folder titled DCIM. Then put your movie/photo files into the folder. The files must have a filename with exactly 8 characters long (no spaces) plus the file extension (i.e., my-movie.mov; DSCN0164.jpg).
Now plug the flash drive into the iPad using the camera connection kit. Open the Photos app, the movie/photo files should appear & you can import. (You can not export using the camera connection kit.)
Using The iPad Camera Connection Kit
http://support.apple.com/kb/HT4101
 Cheers, Tom

How can I put pictures in a table in Numbers / Pages 10. ?

Hello
I have the new version of Numbers and Pages 10.
Does anyone know how I can put pictures in a table, it always changes my picture into a background...That is annoying!
It worked perfectly with Numbers / Pages 09...
I really hope anyone knows how to do it, I have to prepare a list till tomorrow and it drives me mad!
Thanks a lot!
Miss V.

There is no such thing as Numbers or Pages 10. The newest versions are Numbers 3.0.1 & Pages 5.0.1. The suite is sometimes referred to iWork '13, even by Apple, as that when it was released.
Pictures in tables is just one of the 90+ features that didn't make it into the "new & improved, rewritten from the ground up” Pages 5 & Numbers 3. Leave feedback for the Pages team using the link in the Pages menu and review & rate the new versions in the Mac App Store. Do the same for Numbers.
If you previously had iWork '09, those apps are still in your Applications folder in a folder named iWork '09. You can continue to use them to get things done.

*Toshiba Bulletin Board* How do I put pictures..??

How do I put pictures on my Toshiba Bulletin Board? Please Help

You'll have to use iTunes. Connect the phone, go to the photo pane on the right side, select the folder containing the photos on your computer and sync.
iOS and iPod: Syncing photos via iTunes

How to i put pictures on my iPod?

how to i put pictures on my iPod Nano and add multiple music files?

When you are connected to iTunes, go to ipod then make sure the "sync photo" is ticked in photo upper selection. Then perform the syncing. (same with the music) Cheers!

How do i put pictures off my pc on my iphone

how do i put pictures off my pc on my iphone

You'll have to use iTunes. Connect the phone, go to the photo pane on the right side, select the folder containing the photos on your computer and sync.
iOS and iPod: Syncing photos via iTunes

How do you put pictures on imovie 11?

how do you put pictures in projects on imovie 11?

You question will get answered faster here.
https://discussions.apple.com/community/ilife/imovie?view=overview
17" 2.2GHz i7 Quad-Core MacBook Pro  8G RAM  750G HD + OCZ Vertex 3 SSD Boot HD 

How do i put pictures from my mac to a thumb drive?

How do I put pictures onto a thumb drive?

In iPhoto, Select All the Photos you want to move... Then Goto... > File > Export >
Choose the settings as seen here
Click Export and select your External Drive
Best to create a Folder to put them in... and away you go...
Or... Export the Photos to a desktop folder, mount the memory stick and drag the folder to it
More Help available from iPhoto Toolbar Help Menu

How would i put pictures on the songs??

How would i put pictures on the songs??

Album artwork?
In iTunes, on the bottom left is a box with an arrow up (if it's an arrow down, don't click), click on that and the icon will change with a box and an arrow down.
Find the file on Safari/FireFox/IE/whatever internet browser you use, and click and hold the picture. Now drag it to the iTunes window, and release on the empty box in the low left pane. (You can also copy/paste the image from the internet, and onto the song.
For multiple songs, select the songs you want to modify, right click (apple click for Mac), and select "Get Info". Copy and paste the image into the Album artwork box, and make the sure the tick box is checked. Apply (and select ok to the message that appears, warning you of changing multiple songs). Let it process and in less than a minute, you'll have album art.

How do you put pictures on your ipod nano?? i go to edit i click preferences and after that im so confused, how do you put pictures on your ipod nano?? i go to edit i click preferences and after that im so confused

How do you put pictures on your ipod nano?? i was told to go to edit then click prefereces but after that i am completly lost.

Put all the pictures you want to put on your ipod in one folder on your computer. Then, once you're in itunes, click on your ipod (under the devices section). Once you've done this, click on photos at the top and click on the box beside Sync Photos (so there's a tick in the box). It'll say 'sync photos from .......' and then a drop down bar. In the drop down bar it will probably say my pictures or something, click on that. Then click selected folders (unless you want to put all of your pics on) and then tick the folder you want to put on your ipod. Finally, click sync (bottom right hand corner) - it'll load and then your done.

How do you put pictures on your iPod?

How do you put pictures on your iPod? Sorry if this has been posted somewhere else, but I really need to know and I cant find it.
Windows XP Pro

Ok...when I am saying your fourth tab I am referring to the tabs that show when you click on your iPod name is the left panel in iTunes...you will see the summary page in the larger screen to the right. IT is the 4th tab within that summary screen. The list for the kind of iPod you have can be found by going to Ipod Family.
You can also look here: Identifying iPod Models

How can I convert my web page from a fixed width layout to a fluid grid layout?

I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KC

Herbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
     //regular grid span classes
    @for $i from 1 through $large-columns {
        .span-large-#{$i} {
            width: percentage($i/$large-columns);
     // push classes
    @for $i from 1 through (($large-columns)-1) {
        .push-large-#{$i} {
            margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

How to Scale Images in a Table in Fluid Grid Layout?

I copied over a table full of mouseover images into my new fluid grid layout. It all works fine, but in Mobile mode, all the images are compressed horizontally. How do I fix this?
http://savcp.com/howwemet-fluid.html

Strip out your table code with F&R. You could greatly reduce your code & page load by using CSS instead of image swap behaviors. Same size images would produce a nicer appearance, too.
Below, I used floated <p> tags as containers for pictures. Copy & paste this into a new, blank document and SaveAs test.html. Preview in browsers with various viewport widths to see the effect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
body { background: #222 }
/**BEGIN PICS**/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
#pics {
width: 100%;
overflow:hidden;
margin: 55px auto;
border: 1px solid silver;
#pics p {
float: left;
width: 24%;
text-align: center;
/**space between**/
margin: 0 0.25%;
border: 1px solid #222;
#pics img {
max-width: 100%;
border: 5px solid #333;
/**opacity on linked pics**/
#pics a img {
/**for pre-IE8**/
filter: alpha(opacity=90);
/**for other browsers**/
opacity: .90;
/**on mouseover**/
#pics a img:hover, #pics a img:active, #pics a img:focus {
filter: alpha(opacity=100);
opacity: 1.0;
border-color: #09C;
/**ADJUST BREAKPOINTS AS REQUIRED**/
/* Special Rules for Mobiles */
@media only screen and (max-width: 480px) {
#pics p{    height:110px;}
/* Special Rules for Tablets */
@media only screen and (min-width: 481px) {
#pics p{    height:175px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 600px) {
#pics p{    height:255px;}
/**end PICS**/
</style>
</head>
<body>
<div id="pics">
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="wk3.html">
<img src="http://savcp.com/images/story/wk2.gif">
</a></p>
<p><a href="ss3.html">
<img src="http://savcp.com/images/story/ss2.gif">
</a></p>

</div>
</body>
</html>
Nancy O.

How Do I Put Pictures anywhere in fluid grid layout??

Similar Messages

Maybe you are looking for