Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-01-2012, 06:43 AM   PM User | #1
maxta99
New to the CF scene

 
Join Date: Jul 2012
Location: Sydney
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
maxta99 is an unknown quantity at this point
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!
maxta99 is offline   Reply With Quote
Old 07-01-2012, 06:48 AM   PM User | #2
Nile
Regular Coder

 
Nile's Avatar
 
Join Date: Jun 2008
Posts: 280
Thanks: 2
Thanked 46 Times in 46 Posts
Nile is an unknown quantity at this point
Position: center isn't a thing...

Use margin: 0 auto; for something that isn't positioned absolutely or relatively.
Nile is offline   Reply With Quote
Old 07-02-2012, 09:26 AM   PM User | #3
Major Payne
Regular Coder

 
Join Date: Aug 2005
Location: MS
Posts: 745
Thanks: 7
Thanked 65 Times in 63 Posts
Major Payne is an unknown quantity at this point
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
__________________
☠ ☠RON☠ ☠

Last edited by Major Payne; 07-02-2012 at 09:30 AM..
Major Payne is offline   Reply With Quote
Reply

Bookmarks

Tags
align, center, css, header, html

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:39 AM.


Advertisement
Log in to turn off these ads.