Jump to content

Having some trouble with my layout

music_lp90

By music_lp90
in CSS

Recommended Posts

music_lp90 Member

music_lp90

Posted
Posted

edit: This first post is the original post, but I've changed the code quite a bit and have gotten close to what I want, but I'm not sure if the way I have it now is an acceptable way of doing this, please see the post at the bottom of this thread, thanks!Hi, I'm creating a portfolio website and this is my first time using CSS and DIVs for the main layout instead of tables. What I want the site to look like is here: http://www.grantportfolio.com/333.html So far what I have done looks like this: http://www.grantportfolio.com/portfolio/It does not look too good right now as you can see, It is also appearing differently based on whether you look at it in firefox or IE. here's the html

<body><div id="container">	<!--top-->	<div id="top"><img src="images/slices/top.gif" class="slice">		<!--nav -->		<div id="nav_div">			<div id="nav_spacer"></div>		</div>		<!--content-->		<div id="content_div">			<p>This is some test text. How does it work?</p><p> This is some test text. How does it work?</p><p> This is some test text. How does it work?</p>							<p> This is some test text. How does it work?</p><p> This is some test text. How does it work?</p><p> This is some test text. How does it work?</p>			<div id="right"></div>		</div>		<!--bottom -->		<div id="bottom">			<img src="images/slices/bottom.gif" class="slice">		</div>			</div></div></body>

Here's the CSS

body { background-color: #c0c0c0; }img {}.slice { padding: 0px; margin: 0px; border-width: 0px; }#container { background-color: #930000; width: 767px; padding:0px;}#top { float: left; padding:0px;}#middle { float: right; padding: 0px;}#right { float: right; padding:0px; background-image:url(../../Lyndon_Bible_Online/images/right.gif); width: 25px;}#bottom { clear:both; padding:0px; margin: 0px;}#nav_div { float:left; width: 127px; background-color: #333333; padding: 0px;}#nav_spacer { float:right; background-image: url(../../Lyndon_Bible_Online/images/middle.gif); width: 8px; }#content_div { float:right; background-color:#0F4A63; width: 640px; padding:0px; }

I just put the red background in thecontainer to make spaces show up easily. The images that I am using in #right and #nav_spacer are 25px X 2px and 8px X 2px GIFs I wanted them to be able to repeat and stretch if the page gets taller.The page lined up pretty well in Firefox (not IE) before I added some text into the body. To see what it looked like without text in the content section go to : http://www.grantportfolio.com/portfolio/no_text.htmlThanks for your help, I really appreciate it!

Link to comment
Share on other sites
music_lp90 Member

music_lp90

Posted
  • Author
Posted

Ok, I have it so it seems to work ok, but I'm not sure if this is a really acceptable way to do it. I took the image that I couldn't get rid of the space on and I set its bottom margin to -5px and it seems to work ok, but I don't know if this will end up screwing up more on other browsers or what.Thanks for any input!Here's the CSS

body { background-color: #c0c0c0; }img {}.slice { padding: 0px; margin: 0px; border-width: 0px; }#container { 	position:absolute; top: 15px; left: 20px;	background-color: #c0c0c0; 	width: 765px; 	padding:0px;	}#middle { float: left; 	background-image:url(../images/slices/background.gif); 	background-repeat:repeat-y; 	width: 765px; z-index:0; 	padding:0px; 	margin:0px; 	}#nav { float: left; 	width:113px; 	z-index:1; 	background-color:#333333; 	}#content { float: left; 	width: 609px; 	z-index:1; 	background-color: #0F4A63; 	padding-top: 0px;	margin-top: 0px;	}#bottom {	clear:both; 	padding:0px; 	margin: 0px;	}#rights {	background-color:#333333;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color:#FFFFFF;	text-align:center;	width: 763px;	height:30px;}#spacer { float:left; 	width: 15px; 	padding:0px; 	margin:0px;	}#spacer_nav { float:left; 	width: 5px; 	padding:0px; 	margin:0px;	}#nav_content_contain { float:left; padding:0px; margin:0px; padding-top: 0px; margin-top: 0px; }

Here's the html:

<body><div id="container">	<img src="images/slices/top.gif" class="slice" style="padding-bottom:0px; margin-bottom:-4px; ">		<div id="nav_content_contain">				<!--middle-->			<div id="middle">				<div id="spacer_nav"> </div>				<div id="nav"><p>Nav Goes Here</div> 				<div id="spacer"> </div>				<div id="content"><p>This is a test</p><p>This is a test</p><p>This is a test</p><p>This is a test</p><p>This is a test</p>				  <p>This is a test</p>				  <p>This is a test </p>				</div>			</div>			<!--bottom -->			<div id="bottom">				<img src="images/slices/bottom.gif" class="slice">			</div>		</div></div></body>

What I want the site to look like is here: http://www.grantportfolio.com/333.html So far what I have done looks like this: http://www.grantportfolio.com/portfolio/Thanks!

Link to comment
Share on other sites
music_lp90 Member

music_lp90

Posted
  • Author
Posted
Add some content and what exactly is the problem?
The problem is underneath the top image where it says "Grant Portfolio" there is a space between that and the content/nav area below it. For Firefox there is no space below it, but on IE there is a 4 or 5 pixel space between the top area and the content/nav area. here's the current html code:
<?php include("connect.php"); ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><link href="css/styles.css" rel="stylesheet" type="text/css"></head><body><div id="container">	<img src="images/slices/top.gif" class="slice" style="padding-bottom:0px; ">		<div id="nav_content_contain">				<!--middle-->			<div id="middle">				<div id="spacer_nav"> </div>				<div id="nav">					<?php include("nav.php"); ?>				</div> 				<div id="spacer"> </div>				<div id="content">					<embed class="intro" src="flash/intro.swf"></embed>				</div>			</div>			<!--bottom -->			<div id="bottom">				<img src="images/slices/bottom.gif" class="slice">			</div>		</div></div></body></html>

here's the current CSS:

body { background-color: #c0c0c0; }img {}.slice { padding: 0px; margin: 0px; border-width: 0px; }h2 {	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;	font-size: 28px;	color: #B8CADD;}p {	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;	font-size: 14px;	color: #fff;}.highlight {	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;	font-size: 14px;	color: #CC9933;}ul {}.nav_list { padding-top: 10px; }li {	font-family: Arial Narrow, Arial, Helvetica, sans-serif;	color:#FFFFFF;	list-style-image:url(../images/slices/naVbullet.gif);	padding-left: 0px;	margin-left: -18px;}li a {	font-family: Arial Narrow, Arial, Helvetica, sans-serif;	color:#FFFFFF;}li a:link {	font-family: Arial Narrow, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; }li a:visited {	font-family: Arial Narrow, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; }li a:hover {	font-family: Arial Narrow, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; }li a:active {	font-family: Arial Narrow, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; }#container { 	position:absolute; top: 15px; left: 20px;	background-color: #c0c0c0; 	width: 765px; 	padding:0px;	}#middle { float: left; 	background-image:url(../images/slices/background.gif); 	background-repeat:repeat-y; 	width: 765px; z-index:0; 	padding:0px; 	margin:0px; 	}.intro {	float:left;	width:615px; 	height: 360px;	margin-left: -8px;}#nav { float: left; 	width:113px; 	z-index:1; 	background-color:#333333; 	}#content { float: left; 	width: 609px; 	z-index:1; 	background-color: #0F4A63; 	padding-top: 0px;	margin-top: 0px;	}#bottom {	clear:both; 	padding:0px; 	margin: 0px;	}#rights {	background-color:#333333;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color:#FFFFFF;	text-align:center;	width: 763px;	height:30px;}#spacer { float:left; 	width: 15px; 	padding:0px; 	margin:0px;	}#spacer_nav { float:left; 	width: 5px; 	padding:0px; 	margin:0px;	}#nav_content_contain { float:left; padding:0px; margin:0px; padding-top: 0px; margin-top: 0px; }

This is what it looks like, and please use Internet Explorer because that is where the problem is. http://www.grantportfolio.com/development/I have tried putting the bottom margin of the top image to -4px and that seemed to correct the problem on my version of IE, but then I checked on another computer with IE and there was a space there. I don't know what is causing the space if its the top div, the top image, or the middle div or something else. I'm beginning to think tables were easier, but I guess thats just because I have used them a lot more. Thanks for replying!

Link to comment
Share on other sites
music_lp90 Member

music_lp90

Posted
  • Author
Posted
get rid of the spacer gifs. use padding instead.if that leaves the bar in the ie version, try line-height. play with it.
Hi, thanks for the reply. I'm not actually using spacer gifs. I am using spacer DIVs. The reason I am doing this is I created the background in one div which repeats a 1px slice of the background that I designed in Firefox. I did it this way because of the drop shadows. I didn't want to create a bunch of different slices and plug them in in various places, so this allowed me to use one small gif file for the background. I had to use empty divs so that the background of the content and nav divs did not cover up the drop shadow areas of the background underneath them and this is working fine. I've tried padding and margin on pretty much everything that I can think of, but I haven't tried line-height, so I'll give that a try.Thanks
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

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