layout problem

Ninjakreborn · June 19, 2006

I need some help with this, advice or direction, I am not new at css I am very good with it but this has me stuck.
Below is the picture I am trying to get the format to look like.

[img src=\"http://www.freelancebusinessman.com/images/test.gif\" border=\"0\" alt=\"IPB Image\" /]
Now this is what I currently have, I took what he had, I left the absolute positioning alone, because I didn't know how to get the same look with the top part, and I added in the second lower part, and formatted his css better, and easier to read, and worked on some of his html, here is the pic I got from what I ended up doing.
[img src=\"http://www.freelancebusinessman.com/images/test2.gif\" border=\"0\" alt=\"IPB Image\" /]
Ok that is what I currently have, and I am confused as to why I can't get atleast somewhat near the layout, I thought it would work, here is the final xhtml, and css I have so far, again the absolute positioning is what he did with golive I don't use that anymore, but I don't know how to really change that either and nothing I am trying is getting even close, when I try to dismantle the top part and redo it, it falls apart, I have a hard time with graphics heavy sites, so far anyway, any advice would be appreciated, nothign I can do, can seem to get the bottom part situated, liek I want it, the reason I am doing htis, is because I am going to use javascript after that, to get the pics to make the text appear, and from a past experience I can easily figure that out, I am just looking for some guidance, or tips on the layout.

XHTML
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta name="generator" content="Adobe GoLive" />
        <meta name="Keywords" content="custom, furniture, design, kensington, san francisco, bay
        area, repair, woodworking, antique, antiques, library, card, catalog, catalogs, catalogue" />
        <title>Entryway to Furniture Section</title>
        <link rel="stylesheet" href="FurnPhotoSculpCSS.css" />
    </head>
    <body>
    
    <div id="topmasterdiv">
    <div id="HuttBrooksLogo"><img src="CommonImages/logoFurniture2aSm.gif" alt="" height="80"
    width="293" border="0" /></div>
    <div>
    <p>For over 50 years I have been retrofitting, redesigning, repairing, restoring, recombining, inventing, and building fine furnishings and antiques.  My Devotion, is to well thought out design, lasting craftsmanship, and just plain making things extremely functional
    </p>
    </div>
    </div>
    <div id="NavBarFoundation"><div id="NavBarSpacerLeft"><img
    src="CommonImages/NavBar/1pxspacer.gif" width="1" height="1" alt="" /></div>
    <div id="NavBarBook1"><a href="FurnitureCompleteWorks.html"><img
    src="CommonImages/NavBar/NavBarBook1.gif" width="59" height="175" alt="Book of Complete Works of Furniture" /></a></div>
    <div id="NavBarBook2"><a href="FurnitureWhoWhyEtc.html"><img src="CommonImages/NavBar/NavBarBook2.gif" width="49" height="175" alt="Book of Who, Why, What, etc." /></a></div>
            <div id="NavBarBook3"><a href="ContactInfo.html"><img src="CommonImages/NavBar/NavBarBook3.gif" width="52" height="175" alt="Book of Contact Information" /></a></div>
            <div id="NavBarBook4"><a href="FurnitureStudioShop.html"><img src="CommonImages/NavBar/NavBarBook4.gif" width="45" height="175" alt="Book of The Studio Store" /></a></div>
            <div id="NavBarBook5"><a href="MasterSiteIndex.html"><img src="CommonImages/NavBar/NavBarBook5.gif" width="54" height="175" alt="Combined Site Index" /></a></div>
            <div id="NavBarBook6"><a href="index.html"><img src="CommonImages/NavBar/NavBarBook6.gif" width="57" height="175" alt="Book linking to Opening Scene Card Catalogue" /></a></div>
            <div id="NavBarSpacerRight"><img src="CommonImages/NavBar/1pxspacer.gif" width="1" height="1" alt="" /></div>
            <div id="NavBarShelf"><img src="CommonImages/NavBar/NavBarShelf.gif" width="372" height="33" alt="Book Shelf" /></div>
        </div>
</div>
            
            
            <div>
            <div>
            <div>
            <a href="piece1.htm">
            <img src="FurnitureHmPgImages/1CDBureauArts&craftsLight150.jpg" alt="Photo 1" />
            </a>
            </div>
            <div>
            <h3>Photo 1 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above this
            paragraph has space above it and (slightly less) space below it.  This paragraph, as
            printed in the book, has space on the left.</p>
            </div>
            </div>
            <div>
            <div>
            <a href="piece2.htm">
            <img src="FurnitureHmPgImages/2TrebleClefStool150x180.jpg" alt="Photo 2" />
            </a>
            </div>
            <div>
            <h3>Photo 2 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above this
            paragraph has space above it and (slightly less) space below it.  This paragraph, as
            printed in the book, has space on the left.</p>
            </div>
            </div>
            <div>
            <div>
            <a href="piece3.htm">
            <img src="FurnitureHmPgImages/3PearsonTablePlus150x180.jpg" alt="Photo 3" />
            </a>
            </div>
            <h3>Photo 3 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above
            this paragraph has space above it and (slightly less) space below it.  This paragraph,
            as printed in the book, has space on the left.</p>
            </div>
            </div>
            <div>
            <div>
            <a href="piece4.htm">
            <img src="FurnitureHmPgImages/4LaPineGreenTable150x180.jpg" alt="Photo 4" />
            </a>
            </div>
            <h3>Photo 4 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above
            this paragraph has space above it and (slightly less) space below it.  This paragraph,
            as printed in the book, has space on the left.</p>
            </div>
            </div>
                <div>
            <div>
            <a href="piece5.htm">
            <img src="FurnitureHmPgImages/5BuckeaselBack150x180.jpg" alt="Photo 5" />
            </a>
            </div>
            <h3>Photo 5 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above this
            paragraph has space above it and (slightly less) space below it.  This paragraph, as
            printed in the book, has space on the left.</p>
            </div>
            </div>
            <div>
                <div>
            <a href="piece6.htm">
            <img src="FurnitureHmPgImages/6RollingIndexVic150x180.jpg" alt="Photo 6" />
            </a>
            </div>
            <h3>Photo 6 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above this
            paragraph has space above it and (slightly less) space below it.  This paragraph, as
            printed in the book, has space on the left.</p>
            </div>
            </div>
            <div>
            <div>
            <a href="piece7.htm">
            <img src="FurnitureHmPgImages/7SpanishBenchResurectn150x18.jpg" alt="Photo 7" />
            </a>
            </div>
            <h3>Photo 7 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above
            this paragraph has space above it and (slightly less) space below it.  This paragraph, as
            printed in the book, has space on the left.</p>
            </div>
            </div>
            <div>
            <div>
            <a href="piece8.htm">
            <img src="FurnitureHmPgImages/8Bunny1a150x180.jpg" alt="Photo 8" />
            </a>
            </div>
            <h3>Photo 8 Text</h3>
            <p>Setting space around elements is a basic tool in typography.  The headline above this
            paragraph has space above it and (slightly less) space below it.  This paragraph, as
            printed in the book, has space on the left.</p>
            </div>
            </div>
            </div>
            
        </body>
    </html>[/code]

CSS
[code]/* Styles for all pages in all 3 sections: Furniture, Photographic Works, Sculpture Etc.  One for Logo,
    the next 10 for the Navigation Book Shelf, one for the big blank book, and the last to create breathing
    space at the bottom */
    body
{
    background-image:url(CommonImages/Backgrd1Furniture.gif);
    background-color:#000000;
    margin: 0;
    padding: 0
}


#HuttBrooksLogo
{
    visibility:visible;
    position:absolute;
    top:16px;
    left:32px;
    width:293px;
    height:80px
}

#NavBarFoundation
{
    visibility:visible;
    position:absolute;
    top:2px;
    left:432px;
    width:372px;
    height:208px
}

#NavBarSpacerLeft
{
    visibility:visible;
    position:absolute;
    left:0px;
    top:0px;
    width:24px;
    height:175px;
}

#NavBarBook1
{
    visibility:visible;
    position:absolute;
    left:24px;
    top:0px;
    width:59px;
    height:175px;
}

#NavBarBook2
{
    visibility:visible;
    position:absolute;
    left:83px;
    top:0px;
    width:49px;
    height:175px;
}

#NavBarBook3
{
    visibility:visible;
    position:absolute;
    left:132px;
    top:0px;
    width:52px;
    height:175px;
}

#NavBarBook4
{
    visibility:visible;
    position:absolute;
    left:184px;
    top:0px;
    width:45px;
    height:175px;
}

#NavBarBook5
{
    visibility:visible;
    position:absolute;
    left:229px;
    top:0px;
    width:54px;
    height:175px;
}

#NavBarBook6
{
    visibility:visible;
    position:absolute;
    left:283px;
    top:0px;
    width:57px;
    height:175px;
}

#NavBarSpacerRight
{
    visibility:visible;
    position:absolute;
    left:340px;
    top:0px;
    width:32px;
    height:175px;
}

#NavBarShelf
{
    visibility:visible;
    position:absolute;
    left:0px;
    top:175px;
    width:372px;
    height:33px;
}

#OpenBook
{
    visibility:visible;
    position:absolute;
    top:230px;
    left: 0;
    width:804px;
    height:670px
}

#Footer
{
    visibility:visible;
    position:absolute;
    top:900px;
    left:0;
    width:804px;
    height:100px
}

    #topmasterdiv
{
    clear:both;
}

a
{
border:none;
}

$bottomwrap
{
clear:both;
}[/code]
Again the top section was him, I have tried cutting it down, so I decided to try and find a way to make the bottom part happen without touching the top.

wildteen88 · June 20, 2006

I wouldn't go about postioning each individual photo/text on the page.

You should group them, such a when you are postioning the first row phots1, 2 and 3. You should wap them in a div and give it an id/class of row1, and have the following css:
[code]#row1 {
    width: 800px; /* set the total width of the row */

    /* now you only need to positon this to move all the other images into place! */
}[/code]
then inside that div you place 5 divs, and give them all the same class, such as row1-cell.
Now when when goto style the five divs you do this:
[code].row1-cell {
    width: 20%; /* Style each div so it consumes 20% of the overal width of #row1 */
}
.row1-cell img {
    text-align: center /* center the images inside each cell */
}[/code]
Now you do the same thing for the rows2, 3 and 4!

This is the most easiest way of doing what you are trying to do. Addtionally what you can do is prehaps use tables for positioning the images/text into place instead. But use divs/css to positon intro text and the menu.

Hope that helps.

Ninjakreborn · June 20, 2006

Tables are evil, I am so far away from tables, I don't even know how to do tables. I never did a table based website before, I can work lightly in tables, but I forced myself to start with learning css div/span, but I have some ideas now, so I will try putting these into code, and see if it turns out, thanks.

AndyB · June 20, 2006

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]Tables are evil[/quote]
No. Using tables for layout is 'evil'. Using tables to present tabular data is exactly why the table (and elements) exists in the html specifications.

wildteen88 · June 20, 2006

Yeah that was only suggestion. Any here is what I came up with:

[a href=\"http://homepage.ntlworld.com/cshepwood/businessman/test.html\" target=\"_blank\"]http://homepage.ntlworld.com/cshepwood/businessman/test.html[/a]

The green boxes are the images and the blue boxes contain the text.

Also this method can be used for your menu items too. Just put the books into a container than postion that one container div!

Ninjakreborn · June 20, 2006

That really kicks butt, that helped a lot, thanks.
Also thanks for the information about tables, so tables again would then be good for me to use when setting up to display something like results from a database.

Ninjakreborn · June 22, 2006

I encountered a problem, I got the CSS, and XHTML looking like this now for that specific page.

XHTML
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta name="generator" content="Adobe GoLive" />
        <meta name="Keywords" content="custom, furniture, design, kensington, san francisco, bay
        area, repair, woodworking, antique, antiques, library, card, catalog, catalogs, catalogue"
        />
        <title>Entryway to Furniture Section</title>
        <link rel="stylesheet" type="text/css" href="FurnPhotoSculpCSS.css" />
        <script type="text/javascript" src="FurnitureJAVA.js">
        </script>
    </head>
    <body onload="removepics()">
            
            <div>
            <div id="logoandtext">
            <img src="CommonImages/logoFurniture2aSm.gif" alt="Logo" />
            <p id="textbelowheader">For over 50 years I have been retrofitting, redesigning,
            repairing, restoring, recombining, inventing, and building fine furnishings and
            antiques.  My Devotion, is to well thought out design, lasting craftsmanship, and
            just plain making things extremely functional.</p>
            </div>
            <div id="NavBarFoundation"><div id="NavBarSpacerLeft">
            <img src="CommonImages/NavBar/1pxspacer.gif" width="1" height="1" alt="" /></div>
            <div id="NavBarBook1"><a href="FurnitureCompleteWorks.html">
            <img src="CommonImages/NavBar/NavBarBook1.gif" width="59" height="175"
            alt="Book of Complete Works of Furniture" /></a></div>
            <div id="NavBarBook2"><a href="FurnitureWhoWhyEtc.html">
            <img src="CommonImages/NavBar/NavBarBook2.gif" width="49" height="175" alt="Book of Who,
            Why, What, etc." /></a></div>
            <div id="NavBarBook3"><a href="ContactInfo.html">
            <img src="CommonImages/NavBar/NavBarBook3.gif" width="52" height="175" alt="Book of
            Contact Information" /></a></div>
            <div id="NavBarBook4"><a href="FurnitureStudioShop.html">
            <img src="CommonImages/NavBar/NavBarBook4.gif" width="45" height="175" alt="Book of
            The Studio Store" /></a></div>
            <div id="NavBarBook5"><a href="MasterSiteIndex.html">
            <img src="CommonImages/NavBar/NavBarBook5.gif" width="54" height="175" alt="Combined
            Site Index" /></a></div>
            <div id="NavBarBook6"><a href="index.html">
            <img src="CommonImages/NavBar/NavBarBook6.gif" width="57" height="175" alt="Book linking
            to Opening Scene Card Catalogue" /></a></div>
            <div id="NavBarSpacerRight"><img src="CommonImages/NavBar/1pxspacer.gif"
            width="1" height="1" alt="" /></div>
            <div id="NavBarShelf"><img src="CommonImages/NavBar/NavBarShelf.gif" width="372"
            height="33" alt="Book Shelf" /></div>
            </div>
            </div>
            
            <div id="row1">
            <div class="row1-cell-img">
            <a href="pieces1.html"
            onmouseover="handlephoto1on (); return true;"
            onmouseout="handlephoto1off (); return true;">
            <img src="FurnitureHmPgImages/1CDBureauArts&craftsLight150.jpg" alt="Furniture 1"/>
            </a>
            </div>
            <div class="row1-cell"></div>
            <div class="row1-cell-img">
            <a href="pieces2.html"
            onmouseover="handlephoto2on (); return true;"
            onmouseout="handlephoto2off (); return true;">
            <img src="FurnitureHmPgImages/2TrebleClefStool150x180.jpg" alt="Furniture 2" />
            </a>
            </div>
            <div class="row1-cell"></div>
            <div class="row1-cell-img">
            <a href="pieces3.html"
            onmouseover="handlephoto3on (); return true;"
            onmouseout="handlephoto3off (); return true;">
            <img src="FurnitureHmPgImages/3PearsonTablePlus150x180.jpg" alt="Furniture 3" />
            </a>
            </div>
            </div>
            <div id="row2">
            <div class="row2-cell-txt" id="textphoto1">Photo 1 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            <div class="row2-cell-img">
            <a href="pieces4.html"
            onmouseover="handlephoto4on (); return true;"
            onmouseout="handlephoto4off (); return true;">
            <img src="FurnitureHmPgImages/4LaPineGreenTable150x180.jpg" alt="Furniture 4" />
            </a>
            </div>
            <div class="row2-cell-txt" id="textphoto2">Photo 2 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            <div class="row2-cell-img">
            <a href="pieces5.html"
            onmouseover="handlephoto5on (); return true;"
            onmouseout="handlephoto5off (); return true;">
            <img src="FurnitureHmPgImages/5BuckeaselBack150x180.jpg" alt="Furniture 5" />
            </a>
            </div>
            <div class="row2-cell-txt" id="textphoto3">Photo 3 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            </div>
            <div id="row3">
            <div class="row3-cell-img">
            <a href="pieces6.html"
            onmouseover="handlephoto6on (); return true;"
            onmouseout="handlephoto6off (); return true;">
            <img src="FurnitureHmPgImages/6RollingIndexVic150x180.jpg" alt="Furniture 6" />
            </a>
            </div>
            <div class="row3-cell-txt" id="textphoto4">Photo 4 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            <div class="row3-cell-img">
            <a href="pieces7.html"
            onmouseover="handlephoto7on (); return true;"
            onmouseout="handlephoto7off (); return true;">
            <img src="FurnitureHmPgImages/7SpanishBenchResurectn150x18.jpg" alt="Furniture 7" />
            </a>
            </div>
            <div class="row3-cell-txt" id="textphoto5">Photo 5 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            <div class="row3-cell-img">
            <a href="pieces8.html"
                onmouseover="handlephoto8on (); return true;"
                onmouseout="handlephoto8off (); return true;">
            <img src="FurnitureHmPgImages/8Bunny1a150x180.jpg" alt="Furniture 8" />
            </a>
            </div>
            </div>
            <div id="row4">
            <div class="row4-cell-txt" id="textphoto6">Photo 6 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            <div class="row4-cell"></div>
            <div class="row4-cell-txt" id="textphoto7">Photo 7 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            <div class="row4-cell"></div>
            <div class="row4-cell-txt" id="textphoto8">Photo 8 text through a top-down, proactive
            approach we can remain customer focused and goal-directed, innovate and be an inside-out
            organization which facilitates sticky web-readiness transforming turnkey eyeballs</div>
            </div>
            
    </body>
</html>[/code]

CSS
[code]body /* Set's the general page structure */
{
    background-image:url(CommonImages/Backgrd1Furniture.gif);
    background-color:#000000; /* Puts background color behind the image */
    margin:0; /* Starts setting the general positioning of the page */
    padding:0;
    padding-left:20px;
}

#headerwrapdiv /* Wraps logo, text and navigation */
{
    width:800px; /* keeps it from getting too long, sticking to the layout in the pics */
}
/* The text style information right below here I did seperately to allow for maximum customization, with this style you can change the color of the text, the font style, or whatever you want to do, including the position relative to the logo and master div, in case if you want to move it around some */

#textbelowheader
{
    color:#FFFFCC;
    width:250px;
    text-indent:inherit;
    padding-left:25px;
    padding-bottom:20px;
}

#logoandtext /* The style for the logo and text collectively within the master div */
{
    margin-left:5px;
    margin-top:20px;
    float:left; /* This is floated left to allow the navigation to be across from it, in */
}                                                /* proper position */

a img
{
    border:none;
}

#NavBarFoundation
{
    visibility:visible;
    position:absolute;
    top:2px;
    left:432px;
    width:372px;
    height:208px
}

#NavBarSpacerLeft
{
    visibility:visible;
    position:absolute;
    left:0px;
    top:0px;
    width:24px;
    height:175px;
}

#NavBarBook1
{
    visibility:visible;
    position:absolute;
    left:24px;
    top:0px;
    width:59px;
    height:175px;
}

#NavBarBook2
{
    visibility:visible;
    position:absolute;
    left:83px;
    top:0px;
    width:49px;
    height:175px;
}

#NavBarBook3
{
    visibility:visible;
    position:absolute;
    left:132px;
    top:0px;
    width:52px;
    height:175px;
}

#NavBarBook4
{
    visibility:visible;
    position:absolute;
    left:184px;
    top:0px;
    width:45px;
    height:175px;
}

#NavBarBook5
{
    visibility:visible;
    position:absolute;
    left:229px;
    top:0px;
    width:54px;
    height:175px;
}

#NavBarBook6
{
    visibility:visible;
    position:absolute;
    left:283px;
    top:0px;
    width:57px;
    height:175px;
}

#NavBarSpacerRight
{
    visibility:visible;
    position:absolute;
    left:340px;
    top:0px;
    width:32px;
    height:175px;
}

#NavBarShelf
{
    visibility:visible;
    position:absolute;
    left:0px;
    top:175px;
    width:372px;
    height:33px;
}
/* DO NOT TOUCH anything below here, unless you know 100% EXACTLY what you are doing and why.
This is a very, very difficult layout, especially to get right in all the major browsers, 3-4 column layours, are nothing to laugh at they are very difficult, once you read this you can take this comment out.  I laid this up, getting help as well from another developer, that I go to sometimes for advice, this took awhile to set up, especially to where I could get the javascript 100% perfect like you see it now. With such a detailed layout, if something was to go wrong when you tried to format the code, it might be something I can't fix without redoing it all, not only that but the javascript has to have this same layout for the way I set it, or the programming will be messed up */
#row1
{
    padding: 0px;
    width: 800px;
    clear: left;
}

#row1 .row1-cell, #row1 .row1-cell-img, #row1 .row1-cell-txt
{
    width: 20%;
    float: left;
    vertical-align: bottom;
}

#row1 .row1-cell-img
{
    background-color:#000000;
    height: 200px;
}

#row1 .row1-cell-txt
{
    color:#FFFFFF;
    background-color:#000000;
line-height: 1.2em;
}
/* repeat */
#row2
{
    padding: 0px;
    width: 800px;
    clear: left;
}

#row2 .row2-cell, #row2 .row2-cell-img, #row2 .row2-cell-txt
{
    width: 20%;
    float: left;
    vertical-align: bottom;
}

#row2 .row2-cell-img
{
    background-color:#000000;
    height: 200px;
}

#row2 .row2-cell-txt
{
    color:#FFFFFF;
    background-color:#000000;
line-height: 1.2em;
}
/* repeat */
#row3
{
    padding: 0px;
    width: 800px;
    clear: left;
}

#row3 .row3-cell, #row3 .row3-cell-img, #row3 .row3-cell-txt
{
    width: 20%;
    float: left;
    vertical-align: bottom;
}

#row3 .row3-cell-img
{
    background-color:#000000;
    height: 200px;
}

#row3 .row3-cell-txt
{
    color:#FFFFFF;
    background-color:#000000;
line-height: 1.2em;
}
/* repeat */
#row4
{
    padding: 0px;
    width: 800px;
    clear: left;
}

#row4 .row4-cell, #row4 .row4-cell-img, #row4 .row4-cell-txt
{
    width: 20%;
    float: left;
    vertical-align: bottom;
}

#row4 .row4-cell-img
{
    background-color:#000000;
    height: 200px;
}

#row4 .row4-cell-txt
{
    color:#FFFFFF;
    background-color:#000000;
line-height: 1.2em;
}
/* End content, DO NOT edit anything above between this, and hte above comment, unless you know exactly what you are doing and why */            [/code]

The problem I am having, I have the same thing here. The layout you see in the picture up there, is now what I have, I can't show a picture of this, but what is happening, in a few of the browsers, is it's all falling straight against the left hand side of the screen. 100% stuck on that side of the screen, I don't understand why it's doing that, anything I am doing wrong in the css, or anything? It looks good in ie6, but firefox and opera, are scary.

wildteen88 · June 22, 2006

Do you mean the rows?

If you do then you haven't positioned them. I'm a little confused. Helps if you could post us an image/ live view of the problem.

Ninjakreborn · June 22, 2006

One example is the here
This is what it looks like similarly in firefox and opera

I can't get it live unfortunately, I wish I could but it's the way he has it set up on his server.

[img src=\"http://www.freelancebusinessman.com/images/test3.GIF\" border=\"0\" alt=\"IPB Image\" /]

wildteen88 · June 22, 2006

One problem I see is that you have deleted the space ( ) in the empty divs. Those spaces will need to be in there, otherwise the cell will collapse in some browers.

Also another problem is that you havn't positioned the rows thats why they are stuck to the left.

Sign In

layout problem

Recommended Posts

Ninjakreborn

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

AndyB

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information