Jump to content


Photo

CSS Navigation Issues


  • Please log in to reply
3 replies to this topic

#1 xftitan

xftitan

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 20 May 2011 - 09:25 PM

I'm extremely new to CSS and currently piece mealing my site together from tutorials that I have found to help me build my site how I would like it. I have come to a problem which I currently can't resolve, and want to know where I am going wrong. I am working on the navigation and want the background image to line up with the header image and get the links to be spaced out over their respective buttons. Here is a live demo of my issue. My Navigation Nightmare


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK href="index.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<style type="text/css">
<!--
body
{
	background-image: url(images/background.png);
	background-repeat:repeat-y;
	background-attachment:fixed;
	background-position:center;
	background-color: #2061A8;
}
-->
</style

></head>

<body>
<img src="images/header.png" /><div id="navcontainer"><ul id="navlist"><li><a href="index.html">Home</a></li>
<li><a href="rules.html">Rules</a></li>
<li><a href="joining.html">Joining</a></li>
<li><a href="staff.html">Staff</a></li>
<li><a href="/forums">Forums</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="affiliates.html">Affiliates</a></li>
</ul>
</div>
</body>
</html>

That is the Html part of the page, and I'm pretty confident that that is correct. Where I am thinking my issue is stemming is from the following css:
@charset "utf-8";
/* CSS Document */
<style type="text/css">
<!--
body
}
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: underline;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #000;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
}
body
{
	text-align: center;
}

div#container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
}
#navcontainer ul
{
padding-left: 0;
margin-left: 274px;
color: #2061A8;
width: 877px;
height: 60px;
background: url(images/navigation.png) no-repeat;
position: relative;
}
{
float: left;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; 
}
#navcontainer ul li a
{
padding: 0.2em 3em;
color: #2061A8;
text-decoration: none;
float: left;
}

#navlist ul li a:hover
{
color: #000;
}
-->
</style

If anybody is able to help me out by pointing out where my issue is, and pointing me in the direction of finding a tutorial or something to assist me in correcting it, I would greatly appreciate it.

XF Titan

#2 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 21 May 2011 - 05:38 PM

try this instead:

#navcontainer ul {
padding: 0;
margin: auto;
color: #2061A8;
width: 877px;
height: 60px;
background: url(images/navigation.png) no-repeat;
}

your margin-left pushed the image over to the right, un-aligning it to the right

Edited by derek.sullivan, 21 May 2011 - 05:40 PM.


#3 xftitan

xftitan

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 23 May 2011 - 01:17 PM

That fixed the alignment issue. Now im just trying to figure out 3 things. Getting the two images to meet. getting my links to line up on their buttons, and figure out why my site is suspended.

#4 _*Abhijit_*

_*Abhijit_*
  • Guests

Posted 24 May 2011 - 04:14 AM

Yes. Your site is suspended. Do get it sorted out and then I will be able to go through the code and design at once. I will try to help you out then.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users