Jump to content

Need help


businessman332211@hotmail.com
 Share

Recommended Posts

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.test.gifNow 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.test2.gifOk 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 by Jonas
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...