PDA

View Full Version : CSS menu links


shado
12-18-2009, 06:40 PM
Hi there,
I've got a problem with my CSS links for a webpage that I am creating for an assignment.
Now the issue is that I have typed in the CSS code so when the mouse is highlighted over the text it changes colour and when it is clicked on it changes colour and if it has been visited it changes colour etc. But when I view it on the webpage nothing happens.
Below is the CSS and HTML codes that i have used:
HTML
<!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 **********="Content-Type" content="text/html; charset=utf-8" />
<title>My Online Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<div class="container">
<div id="header">

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div><!--end header -->

<div id="content">
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>Lorem ipsum, Dolor sit</h2>
<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. </p>
<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,
gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
<div id="news">
<h3>Latest Updates</h3>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
</div><!--end news-->
</div>
<p>
<!--end content-->

</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="sidebar">
<div id="subscribe">
<h3>Subscribe!</h3>
<ul>
<li><a href="#">Subscribe via RSS</a></li>
<li><a href="#">Get Email Updates</a></li>
<li><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div id="popular">
<h3>Popular Items</h3>
<ul>
<li><a href="#">Lorem ipsum dolor site amet</a></li>
<li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
<li><a href="#">Lorem ipsum dolor site amet</a></li>
<li><a href="#">Proin tempor erat sit tene</a></li>
</ul>
</div>
<div id="contributors">
<h3>Contributors</h3>
<ul>
<li><a href="#">John Smith, freelance writer</a></li>
<li><a href="#">Jack McCoy, designer</a></li>
<li><a href="#">Lenny Briscoe, editor</a></li>
<li><a href="#">John Smith, martketing</a></li>
</ul>
<a href="#" class="button">Join Our Team</a>
</div>
</div><!--end sidebar-->
<div style="clear:both"></div>

</div><!--end main container-->
</div><!--end main-->

<div id="footer">
<div class="container">
<p>Copyright 2009 MySite <br />
All Rights Reserved</p>
</div><!--end footer container-->
<div class="container">
</div><!--end footer container-->
</div><!--end footer-->
</body>
</html>CSS
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

body {
font-family: Arial, Helvetica, sans-serif;
background: #ebe8e8;
}

.container {
width: 800px;
margin: 0 auto;
}
#main {
background: url(images/headernotext.jpg) repeat-x;
}

#header {
padding-top: 40px;
text-align: left;
}

ul#menu {
list-style: none;
padding-top: 40px;
padding-bottom: 50px
}

ul#menu li a {
font-size: 20px;
color: #FFF;
text-decoration: none;
position: relative;
left: -10px;
top: 3px;
width: 55px;
}
ul#menu li {
float: left;
padding-left: 108px;
width: 10px;
text-align:left;
}

a:link {
color: #0F0;
}
a:visited {
color: #F00;
}
a:hover {
color: #00F;
}
a:active {
color: #F0F;
}

#content h2 {
font-size: 36px;
color: #015878;
padding-top: 25px;
}

#content h3 {
font-size: 24px;
color: #444444;
padding-top: 20px;
padding-bottom: 20px;
}

#content h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}

#content p {
font-size: 14px;
color: #595858;
padding-top: 20px;
}

#content small {
font-size: 12px;
color: #373737;
}

#content a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}

#news {
padding-top: 10px;
}

#news h3 {
padding-bottom: 10px;
}

#news p {
padding-top: 10px;
padding-bottom: 14px;
}
#content {
width: 510px;
float: left;
}
#sidebar {
float: left;
margin-left: 55px;
margin-top: 35px;
background: #d4d6d3;
border: 1px solid #BEBDBD;
padding: 15px 15px 30px 15px;
}
#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
padding-bottom: 20px;
padding-left: 15px;
}

#sidebar ul li a {
font-size: 14px;
color: #393838;
}
ul#subscribe li a {
font-size: 18px;
}
ul#subscribe li {
padding-bottom: 5px;
padding-left: 35px;
}
#sidebar ul {
list-style: none;
padding-bottom: 25px;
}

a.button {
color: #393838;
text-decoration: none;
background: url(images/button_slice.jpg) repeat-x;
margin-left: 14px;
padding: 13px 23px;
border: 1px solid #c7c7c7;
}

#footer {
background: url(images/footer_slice.jpg) repeat-x;
padding-top: 20px;
padding-bottom:60px;
margin-top: 40px;
color: #fff;
}Another problem I have (Although I'm not sure if this matters a great deal) is that in my design view and my webpage view is different. On the design view my menu text is not alligned correctly but when viewed on the internet it is alligned correctly oO.
http://i239.photobucket.com/albums/ff220/ozz4/webdesign2.jpg
http://i239.photobucket.com/albums/ff220/ozz4/webdesign.png

If anyone can help me out then I will be very grateful

walkamongus
12-19-2009, 03:57 PM
The problem might be in your choice of using a "ul id=" instead of an "ul class="

DWcourse
12-19-2009, 05:37 PM
Try adding these style rules for your rollovers:

ul#menu li a:visited
ul#menu li a:hover
ul#menu li a:active

The ul#menu li a selector is very specific, so when you use pseudo classes (hover, etc.), you need to be at least that specific for them to work in your menu.

gentleone
12-19-2009, 05:38 PM
I think it's because you overrule the links states with this part in your CSS.
#content a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}


If you remove this whole CSS rule then the links should work how you've set them in the beginning of your stylesheet.

EDIT:
:confused: are you talking about your menu links or your text links on the page?

DWcourse
12-19-2009, 06:44 PM
:confused: are you talking about your menu links or your text links on the page?

Oh! Good question.:confused:

shado
12-20-2009, 04:42 PM
I am talking about the menu links for the page navigation. Sorry for the confusion, But I will try out what you guys suggested and hopefully it will work :D