HTML/CSS - Why is this not centering?

Baker · Mar 22, 2014

Hey guys!

So I have started HTML for the first time yesterday, and CSS for the first time today, so please don't use advanced website admin lingo on me!

The code is short. I have a header, body, and footer, all in a container div, and I have a CSS style sheet that the HTML links to.

My issue?

My only issue currently lies with my most recent addition to the code: My navbar, which is basically an unorganized list of hyperlinks (<UL> tag). My CSS code gives it the horizontal navbar formation.

Onto the problem. Everything on my site centers perfectly, except for this navbar. Below is a picture of the website and the non-centered navbar.

Please note that the body, the title, and all of the other text IS aligned. The navbar circle in green is a little bit to far to the right.

HTML:

<HTML>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="container">
<div id="header"><TITLE>DemonicMC - Stay Demonic!</TITLE>
<img src="images/demonicmc_title.png"><BR>
<P><B>Welcome to the DemonicMC community site!</B></P>
<a href="http://www.demonicmc.com">DemonicMC</a>
</div
<div id="body">
<div id="navbar">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
<div style="background-image: url(images/content_bg.png); height: 100%; width: 900px; padding-top: 0px; margin-top: 0px;">
Body content!
</div>
<div id="footer">
Footer!
</div>
</HTML>

----------------------------------------

CSS:

html, #container, #body{
width:100%;
height:100%;
color:#FFFFFF;
}
#footer{
text-align:center;
position:relative;
bottom:0;
}
body
{
background-image:url('images/demonicmc_bg.png');
position:absolute;
background-repeat:repeat-y;
text-align: center;
font-family:"Carter One",Times New Roman,Georgia,Serif;
}
#header{
text-align: center;
}
#navbar ul li {
a:link color:#FF0000;
display: inline;
margin-left: auto;
margin-right: auto;
padding: 0em 0em;
background-color: #000000;
}

Nothing seems out of line to me. I don't see any factors that could cause it to become offset like this. Any ideas?

Thanks!

-Baker

Reapt · Mar 29, 2014

You are missing a ">" after one of your divs. But back to the subject. I would set up a grid system. Using CSS to create a container, and then making each div a set pixel size. So everything would be centered.

kpempire · Mar 30, 2014

Change:

Baker said:
Hey guys!
#navbar ul li {
a:link color:#FF0000;
display: inline;
margin-left: auto;
margin-right: auto;
padding: 0em 0em;
background-color: #000000;
}

-Baker

To:

Code:

nav ul li {
		float: left;
	}
	
		nav ul li:hover {
			background: #4b545f;
			background: linear-gradient{top, #4f5964 0%, #5f6975 40%};
			background: -moz-linear-gradient{top, #4f5964 0%, #5f6975 40%};
			background: -webkit-linear-gradient{top, #4f5964 0%, #5f6975 40%};
		}
		
			nav ul li:hover a {
				color:#fff;
			}
			
		nav ul li a {
			display: block; padding: 25px 40px;
			color: #757575; text-decoration: none;
		}

P.s, you'll need to change the colours and stuff. I ripped this from one of my own nav-bars.

fabio24 · Apr 1, 2014

Try this!
#navbar ul li {
a:link color:#FF0000;
display: inline;
margin-left: auto;
margin-right: auto;
padding: 0em 0em;
background-color: #000000;
}

kpempire · Apr 4, 2014

fabio24 said:
Try this!
#navbar ul li {
a:link color:#FF0000;
display: inline;
margin-left: auto;
margin-right: auto;
padding: 0em 0em;
background-color: #000000;
}

This would also get the job done.

HTML/CSS - Why is this not centering?

Baker

Solid State Member

Reapt

In Runtime

kpempire

Beta member

fabio24

Beta member

kpempire

Beta member

Similar threads