CodingForums.com - Newbie trying to center a menu + logo which are currently aligned on the left

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Newbie trying to center a menu + logo which are currently aligned on the left (http://www.codingforums.com/showthread.php?t=266793)

Newbie trying to center a menu + logo which are currently aligned on the left

Hey guys,

I am pretty new to HTML/CSS and am having trouble aligning parts of my header. I have tried doing position:center; however it doesn't seem to be working :( the CSS code I have for the image logo and menu text that I would like to be aligned is below:

#header div#display_homepage_title{
height: 46px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 40px;
width: 460px;
font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#header div#display_homepage_title a{
width:100%;
height:100%;
margin:0px;
padding:0px;
text-align:leftr;
display:block;
text-indent:-9999px;
color:#aaaaaa;
}

#header div a#homepage_title{
text-indent:0px;
font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:none;
}

If someone is able to help me with this, I would be very greatful :)
Happy coding!

Position: center isn't a thing...

Use margin: 0 auto; for something that isn't positioned absolutely or relatively.

Centering:

Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Using positioning rules just makes it harder and requires more coding. Suggest using the following at the very top of your CSS file. Then you can remove all those rules that have zero padding/margin:

Code:

* { margin: 0; padding: 0; border: 0; }

Example:

Code:

body {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}

Example as a Class:

Code:

.selector_name {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}

HTML for Class:

Code:

<div class="selector_name">Content here</div>

Example as an ID:

Code:

#selector_name {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}

HTML for Class:

Code:

<div id="selector_name">Content here</div>

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

Typo?: "text-align:leftr;" Recommend validating:

Validating:

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3.org/#validate_by_uri+with_options