Solved

fluid grid 2 divs

Posted on 2013-01-20
6
527 Views
Last Modified: 2013-02-13
I Dreamweaver cs6I have a fluid Grid with an image in a grid area.
Now I have an image and I also want text to always appear on right side of the image in same grid .

How can I get this to happen in a grid in Dreamweaver?Currently I need to place txt and img in separate grid cells if I want txt to always appear on right side of text.

   <div class="imgTxtGrid">
     
        <div class="img"><img src="images/apollo_bay.jpg" alt="haunted" /></div>
        <div class="txt">asdasdasd</div>
     </div>
0
Comment
Question by:jagguy
  • 4
  • 2
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38798519
For your specific question add this to your css style sheet

div.imgTxtGrid div {
      float: left;
      width: 50%;
}

Or in the head section of your page add inside of the style tags

<style type="text/css">
div.imgTxtGrid div {
      float: left;
      width: 50%;
}
</style>

Just some advice... I would avoid using dreamweaver's templates.  They get confusing and can end up tripping you up.    There are other grid systems that make much more sense once you get into it.  There are many, but one of the more simple grid systems is http://www.blueprintcss.org/.  http://www.blueprintcss.org/tests/parts/sample.html
0
 

Author Comment

by:jagguy
ID: 38799332
Hang on, the templates dont work?

Or do you mean templates for fluid grid's dont work? how bad is it?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38799360
I mean when you try and use dreamweaver's templates as your base, you will find trouble.  They "work".  But from personal experience and answering questions here, they cause trouble.  Of course, you just paid some good money for DW and it may be  hard to comprehend, believe me later, use a frame work like blueprint.org or 960.gs or a lot of other grid systems out there.  For starting out, I like to suggest blueprint because it is bare bones and just works.

Let's say you want a layout with a header taking up the full width, 3 columns under the header and a footer taking up the full width.

Your base  layout would be something like below if you are using blueprint's css
<div id="container" class="span-24">
     <div id="header" class="span-24 last">
           <div class="span-12"><img src="mylogo.jpg"></div><div class="span-12">MyName<br>Myadddress<br>MyCity St zip</div>
     </div>
    <div class="span-5">col 1 narrow</div>
    <div class="span-10">Middle main</div>
     <div class="span-8">left col wider then right col</div>

    <div id="footer" class="span-24 last">This is my footer</div>

</div>

Open in new window


Works in every browser.  You can use a fixed or fluid.  That took me 1 minute to layout from there, it is just your own  images and content and additional css to snazz it up.

There are a lot of good things in using dreamweaver, the ready made templets are not one of them.  Of course, I only have cs 5.5 and in past used dw mx and dw 4. I dont' think I would upgrade again and like using sublime text editor and if I did buy something else, would probably be coda.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jagguy
ID: 38799411
I will start a new thread for blueprint but the templates I have used have worked.
Now if they dont work in DW then in what case is this so? I have used fluid grid template ok so far for a mobile size.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38799496
Just go through the demo on the site.  Please look at 960.gs too.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 38799558
Here is a test with some modified code above.  http://jsbin.com/ekoqif/1/  Where you see HTML click that to view the html I coded.  You can paste the code directly to your dreamweaver.  

The only change you will want to make is where you see the style sheet

<link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" />

change that to the blueprint css file that is inside of a folder on your local site.   If you get an error in dreamweaver similar to, "the file is outside of dreamweaver"  then make sure the css file is in your site.   You should be able to see it when in dreamweaver you select Window then Files.  Look on the "Local" side.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question