• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

CSS aligning help

T

tgabe213

2[H]4U
Joined
Aug 27, 2007
Messages
3,684
I am having issues getting the 'Logo Filler' centering. I have the width of 'content' set to 805 (a wrapper for anything displayed). I just can't figure out how to get this to center. I was able to get the top and bottom border for the nav to center, as well as the footer dummy text (img). I can't get the top one to.

Also,

1. I cannot get a border for the 'content' div to wrap around itself, without just declaring a height in pixels. It only shows the border for a certain portion of the page. It doesn't extend all the way to the bottom of the content.

2. The footer img will not display in IE6. I'm doing this all in IE7, and verifying in IE6 on my laptop which is housing a wamp server.

3. *Forget this one. Getting the logo filler centered makes it look alright. * How can I get where it says 'People' as a title for the current page, not nav bar to float off to the left a little bit. Perferrable have the right side of the 'People' img almost at the same colum of pixels as the left side of the white space? I'd like it to move with everything else if a browser is resized.

Thanks

http://homeserve.zapto.org/jtp/jamestphotography/people.html

HTML
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Jamest Photography - People</title>

</head>

<body>

<div id="content">

<div id="logo" align="center">
<img src="images/logofill.png" />
</div><!--Logo-->

<div id="nav" align="center">

<img src="images/navborder.png" />
<ul>
<li><a href="#"><img src="images/pplup.png" /></a></li>
<li><a href="#"><img src="images/industup.png" /></a></li>
<li><a href="#"><img src="images/productup.png" /></a></li>
<li><a href="#"><img src="images/contactup.png" /></a></li>
</ul>
<img src="images/navborder.png" />

</div><!--Nav-->

<div id="title">
<img src="images/People.png" />
</div><!--Title-->

<div id="body">

<div id="bodyimg"></div>
<div id="bodythumb"></div>
</div>

<div id="footer">
<img src="images/footer.png" />
</div><!--Footer-->

</div><!--Content-->

</body>
</html>
Click to expand...

CSS
@charset "utf-8";
/* CSS Document */

body {
background-color: #000000;
margin: 0;
}

#content {
position: relative;
color: #FFFBF0;
text-align: left;
margin: 0 auto;
width: 800px;
border: 1px solid #33CCCC;
}

#logo {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 800px;
}

#nav {
position: absolute;
list-style-type: none;
top: 150px;
width: 800px;
}

#nav ul {
list-style-type:none;
margin: 0;
padding: 0;
}

#nav li {
display: inline;
}

#nav ul li a {
text-decoration: none;
}

#nav a img {
border:none;
padding-left: 51px;
padding-top: 0px;
}

#title {
position:absolute;
top: 230px;
float: left;
text-align: left;
}

#body {
position: absolute;
background-color:#FFFFFF;
top: 320px;
width: 800px;
height: 250px;
}

#bodyimg {
position: absolute;
}

#bodythumb {
position: absolute;
}

#footer {
position: relative;
top: 625px;
}
Click to expand...
 
Try changing this:
Code: 
#logo {
    position: absolute;
    text-align: left;
    margin: 0 auto;
    width: 800px;
}
To this:
Code: 
#logo {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}
 
Duh! I was reading something before that suggested that. That's how I got the main content div to center. I'm not sure why the other 2 img's centered, and that one didn't.

Thanks!

Any ideas on the others?
 
Try this change:

Code: 
#logo {
margin: 0px auto;
width: <ACTUAL WIDTH OF IMAGE>;
}

1) border-top: 1px 1px 1px 1px solid #33CCCC; is incorrect;
border: 1px solid #33CCCC will apply a border around the whole DIV

2) Footer image won't display properly because you're using a PNG on IE6. Use this hack: http://www.twinhelix.com/css/iepngfix/

3) Apply a float and probably negative margin; that'll break the boundary of the content div
 
Tabris_Zero said:
Try this change:

Code: 
#logo {
margin: 0px auto;
width: <ACTUAL WIDTH OF IMAGE>;
}

1) border-top: 1px 1px 1px 1px solid #33CCCC; is incorrect;
border: 1px solid #33CCCC will apply a border around the whole DIV

2) Footer image won't display properly because you're using a PNG on IE6. Use this hack: http://www.twinhelix.com/css/iepngfix/

3) Apply a float and probably negative margin; that'll break the boundary of the content div
Click to expand...

All my images are .png
 
Wouldn't it be great if it supported stuff like translucent PNGs?
Click to expand...

That's my issue right there. For now, I'll just give it that black background.

Edit: Nevermind. I was goin to make it translucent, but I didn't.

Edit2: I even tried a jpg for IE6 and it still didn't show?
 
Hello tgabe213,
some markup for you
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" />
<title>Jamest Photography - People</title>
</head>
<body>     
<div id="content">    
<img src="http://homeserve.zapto.org/jtp/jamestphotography/images/logofill.png" alt="logo" width="350" height="150" />
<div id="nav">
	<img src="http://homeserve.zapto.org/jtp/jamestphotography/images/navborder.png" alt="" width="600" height="1" />
  		<ul>
        	<li><a href="#"><img src="people_files/pplup.png" alt="" width="69" height="25" /></a></li>
            <li><a href="#"><img src="people_files/industup.png" alt="" width="104" height="20" /></a></li>
            <li><a href="#"><img src="people_files/productup.png" alt="" width="84" height="20" /></a></li>
            <li><a href="#"><img src="people_files/contactup.png" alt="" width="82" height="19" /></a></li>
        </ul>
 	<img src="http://homeserve.zapto.org/jtp/jamestphotography/images/navborder.png" alt="" width="600" height="1" />    
<!--end nav--></div>
   		 <img src="http://homeserve.zapto.org/jtp/jamestphotography/images/People.png" alt="text image" width="88" height="32" id="title" />     
<div id="body">    	
        	<div id="bodyimg"></div>
            <div id="bodythumb"></div>
<!--end body--></div>        
	<div id="footer">
    	<img src="people_files/footer.png" alt="text" width="350" height="100" />    
	<!--end footer--></div>      
<!--end content--></div>
</body>
</html>
and the CSS
Code: 
html, body {
	background-color: #000000;
	font: bold 100% Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}
* {  /*zeros out default margin and padding*/
	margin: 0;
	padding: 0;
	border: none;
}
#content {
	color: #FFFBF0;
	text-align: center;
	margin: 0 auto;
	width: 800px;
	overflow: auto; /*clears floats*/
	border: 1px solid #33CCCC;
}
#nav {
	width: 600px;
	margin: 10px auto 0 auto;
}
		#nav ul {
			list-style-type:none;
		}
		#nav li {
			display: inline;
		}
		#nav ul li a {
			text-decoration: none;
		}
		#nav a img {
			padding: 0 0 0 51px;
		}
#title {
	float: left;
margin: 40px 0 20px 0; /*move PEOPLE up and down here*/
}
#body {
	background-color:#FFFFFF;
	width: 800px;
	height: 250px;
	float: left;
}
#bodyimg {
}
#bodythumb {
}
#footer {
	width: 800px;
	clear: both;
}

and like I always say...
Use the right DocType
Validate your markup
Validate your CSS
Why validating is good
Why tables are bad
 
I'll try to explain a bit.

=First I put an XHTML 1.0 Strict DocType instead of your tranistional. New construction might as well be strict, transitional is for converting/upgrading an existing page.

=In your CSS you had
Code: 
#logo {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}
Since it was in an 800px wide centered container, centering #logo wasn't doing anything. Neither was adding absolute positioning but not positioning it.
You don't want to use absolute positioining in this layout yet anyway, causes more trouble than it's worth.
Instead, I just put text-align center on the container and removed the div around the logo image.

=Floats and margins postition everything else. Much more fluid and flexible that way.
Floatscan break out though, that's what I meant by overflow:auto; clearing the floats. Here is a good description of that technique.

Be sure and check out the links at the bottom of my other post.
 
You must log in or register to reply here.
Back
Top