Solved

fluid grid 2 divs

Posted on 2013-01-20
6
525 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

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

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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

803 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