Jump to content


Photo

layout problem


  • Please log in to reply
9 replies to this topic

#1 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 19 June 2006 - 09:30 PM

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
<!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>

CSS
/* 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;
}
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.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 20 June 2006 - 09:44 AM

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:
#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! */
}
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:
.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 */
}
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.

#3 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 20 June 2006 - 02:51 PM

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.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#4 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 20 June 2006 - 02:57 PM

[!--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.
Legend has it that reading the manual never killed anyone.
My site

#5 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 20 June 2006 - 03:03 PM

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!

#6 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 20 June 2006 - 05:19 PM

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.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#7 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 22 June 2006 - 04:43 PM

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

XHTML
<!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>

CSS
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 */            


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.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#8 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 22 June 2006 - 04:57 PM

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.

#9 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 22 June 2006 - 05:32 PM

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\" /]

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#10 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 22 June 2006 - 06:27 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users