businessman332211@hotmail.com Posted June 19, 2006 Share Posted June 19, 2006 (edited) 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.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.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. Edited June 19, 2006 by Jonas Link to comment Share on other sites More sharing options...
scott100 Posted June 19, 2006 Share Posted June 19, 2006 For the top section use float, just like this example: http://www.w3schools.com/css/tryit.asp?filename=trycss_float This will float the bookshelf to the right and keep the text to the leftFor the second section create 5 columns and insert the text/image into each column, kind of like this: http://scott100.atspace.com/3Cols.htm (i used absolute positioning though...) Link to comment Share on other sites More sharing options...
businessman332211@hotmail.com Posted June 19, 2006 Author Share Posted June 19, 2006 I tried that, the top I am not really worried about as much as hte bottom, see I have the bottom set up like that but it went retarded, and what's worse is the top is good but I can't get that other piece of text around there Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now