PDA

View Full Version : css float trouble



finoy_ako
Feb 21st, 2010, 04:51 PM
Take a look at my sample link below.

http://romelad.freehostia.com/sample11.php

Why I cant make it to center my centerban.png and footer.png?????

I.m think this is because of my image above I set to float: left; and the the other image affected of float.

but still I dunno how to fix this.




#centerban {
margin-right: auto;
margin-left: auto;

}
#footer {
margin-left: auto;
margin-right: auto;


I also try this one to clear the float.


#centerban {
clear: left;
margin-right: auto;
margin-left: auto;

}
#footer {
clear: left;
margin-left: auto;
margin-right: auto;

Excavator
Feb 21st, 2010, 05:05 PM
Hello finoy_ako,
To center an element you need three things,

a DocType Declaration
an element with a width
that elements left/right margins set to auto


Try making your CSS look like this

/*#centerban {
margin-right: auto;
margin-left: auto;

}
#footer {
margin-left: auto;
margin-right: auto;
}*/

#centerban, #footer {
width: 900px;
margin: 0 auto;
}

finoy_ako
Feb 21st, 2010, 05:19 PM
Sir can I ask is it normal that the text color of my css is became grey???

screen shot below

Excavator
Feb 21st, 2010, 05:26 PM
The red bits here - /* ...your gray css .... */ - are how you comment inside your CSS. Anything inside those slash/stars will not be seen by the browser.
See CSS comments (http://www.w3schools.com/Css/css_syntax.asp).

I just used them to comment out your original CSS since my suggestion replaced yours.

finoy_ako
Feb 21st, 2010, 05:42 PM
Gotcha, by the way sir Excavator the actual size of my centerban and footer is 1000px I just make it 900px as a sample to see if the alignment is okey because my screen resulotion are too small.

when I do try to change the my css width to 1000px and the image size to 900px the alignment in my dreamweaver misplaced again


but I do set it to the actual size 1000px css width and 1000px image width.

see the link if its now centered.
http://romelad.freehostia.com/sample11.php


sorry my monitor is too small, I cant see if the alignment is fixed when it set to actual size :(

finoy_ako
Feb 21st, 2010, 05:47 PM
I get it, I get it.......................... thanks to you sir, your really great.

Excavator
Feb 21st, 2010, 06:37 PM
Gotcha, by the way sir Excavator the actual size of my centerban and footer is 1000px I just make it 900px as a sample to see if the alignment is okey because my screen resulotion are too small.

when I do try to change the my css width to 1000px and the image size to 900px the alignment in my dreamweaver misplaced again


but I do set it to the actual size 1000px css width and 1000px image width.

see the link if its now centered.
http://romelad.freehostia.com/sample11.php


sorry my monitor is too small, I cant see if the alignment is fixed when it set to actual size :(

Just for demonstration, I'll increase the width of your two divs just so I don't have to edit your markup.
You can center your image by adding text-align:center; like this -

#centerban, #footer {
width: 1200px;
margin: 0 auto;
text-align: center;

}

Another way might be to put the image as a background of the div so you could add a menu or text later.
Try this -
<!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" />
<title>Untitled Document</title>
<style type="text/css">
body {background-color: #000;}
#centerban, #footer {
height: 20px;
width: 1200px;
margin: 0 auto;
background: #333 url(centerban.png) no-repeat center top;
}
#centerban p, #footer p {margin: 0 0 0 200px;}
</style>
</head>
<body>
<div id="container">
<div id="centerban">
<p>some text here</p>
<!--end centerban--></div>
<br />
<br />
<br /> <!--breaks are for demo only-->
<br />
<br />
<br />
<div id="footer">
<p>some footer text here</p>
<!--end footer--></div>
<!--end container--></div>
</body>
</html>