Solved

fluid grid 2 divs

Posted on 2013-01-20
6
522 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

867 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now