Jump to content

layout problem

Ninjakreborn

By Ninjakreborn
in CSS Help

 Share

Recommended Posts

Ninjakreborn Prolific Member

Ninjakreborn

Posted
Posted
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>    
    <!-- Begin Entire head section -->
    <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>
            <!-- End Entire head section -->
            <!-- Begin situating rest of body -->
            <div><!-- Wrapper -->
            <div><!-- photo 1 set -->
            <div><!-- photo link 1 -->
            <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><!-- end photo 1 set -->
            <div><!-- photo 2 set -->
            <div><!-- Photo link 2 -->
            <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><!-- end photo 2 set -->
            <div><!-- photo 3 set -->
            <div><!-- Photo link 3 -->
            <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><!-- end photo 3 set -->
            <div><!-- photo 4 set -->
            <div><!-- Photo link 4 -->
            <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><!-- end photo 4 set -->
                <div><!-- photo 5 set -->
            <div><!-- Photo link 5 -->
            <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><!-- end photo 5 set -->
            <div><!-- photo 6 set -->
                <div><!-- Photo link 6-->
            <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><!-- end photo 6 set -->
            <div><!-- photo 7 set -->
            <div><!-- Photo link 7-->
            <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><!-- end photo 7 set -->
            <div><!-- photo 8 set -->
            <div><!-- Photo link 8-->
            <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><!-- end photo 8 set -->
            </div><!-- end wrapper -->
            <!-- End main content -->
        </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.
Link to comment
https://forums.phpfreaks.com/topic/12416-layout-problem/
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted
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.
Link to comment
https://forums.phpfreaks.com/topic/12416-layout-problem/#findComment-47584
Share on other sites
Ninjakreborn Prolific Member

Ninjakreborn

Posted
  • Author
Posted
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.
Link to comment
https://forums.phpfreaks.com/topic/12416-layout-problem/#findComment-47682
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted
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!
Link to comment
https://forums.phpfreaks.com/topic/12416-layout-problem/#findComment-47690
Share on other sites
Ninjakreborn Prolific Member

Ninjakreborn

Posted
  • Author
Posted
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()">
            <!-- Header section -->
            <div><!-- Start master header div -->
            <div id="logoandtext"><!-- Sub div for logo and text under logo -->
            <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><!-- End logo and text sub 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><!-- End master header div -->
            <!-- BEGIN ENTIRE BODY SECTION -->
            <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>
            <!-- END ENTIRE BODY SECTION -->
    </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.
Link to comment
https://forums.phpfreaks.com/topic/12416-layout-problem/#findComment-48514
Share on other sites
Ninjakreborn Prolific Member

Ninjakreborn

Posted
  • Author
Posted
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\" /]
Link to comment
https://forums.phpfreaks.com/topic/12416-layout-problem/#findComment-48535
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted
One problem I see is that you have deleted the space (&nbsp;) 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.
Link to comment
https://forums.phpfreaks.com/topic/12416-layout-problem/#findComment-48552
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.