Solved

fluid grid 2 divs

Posted on 2013-01-20
6
526 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

 

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

Title # Comments Views Activity
Button and js nou working 3 19
styling bootstrap grid system with CSS 2 37
Css regex 6 38
How to get bootstrap element to collapse at wider screen width 3 41
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

808 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