HTML/CSS - Why is this not centering? - Techist - Tech Forum

Go Back   Techist - Tech Forum > Computer Software > Programming
Click Here to Login
Reply
 
Thread Tools Display Modes
 
Old 03-22-2014, 10:18 AM   #1 (permalink)
Newb Techie
 
Join Date: Sep 2012
Location: USA
Posts: 19
Default HTML/CSS - Why is this not centering?

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
__________________

__________________
Baker is offline   Reply With Quote
Old 03-29-2014, 04:42 PM   #2 (permalink)
Super Techie
 
Reapt's Avatar
 
Join Date: Mar 2014
Location: Colorado
Posts: 261
Default Re: HTML/CSS - Why is this not centering?

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.
__________________

__________________
Reapt is offline   Reply With Quote
Old 03-30-2014, 05:36 PM   #3 (permalink)
Newb Techie
 
Join Date: Mar 2014
Location: Scotland
Posts: 5
Send a message via AIM to kpempire
Default Re: HTML/CSS - Why is this not centering?

Change:

Quote:
Originally Posted by Baker View Post
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.
__________________
kpempire is offline   Reply With Quote
Old 04-01-2014, 04:01 AM   #4 (permalink)
Newb Techie
 
Join Date: Apr 2014
Location: uganda
Posts: 1
Default Re: HTML/CSS - Why is this not centering?

Try this!
#navbar ul li {
a:link color:#FF0000;
display: inline;
margin-left: auto;
margin-right: auto;
padding: 0em 0em;
background-color: #000000;
}
__________________
fabio24 is offline   Reply With Quote
Old 04-04-2014, 07:50 PM   #5 (permalink)
Newb Techie
 
Join Date: Mar 2014
Location: Scotland
Posts: 5
Send a message via AIM to kpempire
Default Re: HTML/CSS - Why is this not centering?

Quote:
Originally Posted by fabio24 View Post
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.
__________________
kpempire is offline   Reply With Quote
Reply

Tags
center, css, div, html, website

Thread Tools
Display Modes

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
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Articles-CSS Mistakes-CSS Faqs paul120 Programming 2 03-26-2008 05:29 AM
Centering problem phandentium Web Graphics and Design 3 02-20-2007 01:09 AM
Web Page Centering msaunders Web Graphics and Design 1 10-14-2006 04:19 PM
Monitor centering problem.... Static_11 Hardware Repairs and Troubleshooting 0 03-15-2006 08:27 PM
can we not substitute index.html with main.html? rookie1010 Internet Software and Browsers 4 12-27-2004 06:38 PM



Copyright 2002- Social Knowledge, LLC All Rights Reserved.

All times are GMT -5. The time now is 11:01 AM.


Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2018, vBulletin Solutions, Inc.