PDA

View Full Version : CSS in HTML problem!



DanDude
July 14th, 2010, 09:49 AM
Hi!

This is my code:


<style type="text/css">
a {text-decoration:none}

ul#list-nav {
list-style:none;
font-family: Helvetica,Arial,sans-serif;
margin:0px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:url('Images/Icons/nav/nav-fade1.png');
background-repeat:repeat-x
color:#000000;
float:left;
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:url('Images/Icons/nav/nav-fade2.png');
background-repeat:repeat-x
color:#000000
}

ul#list-nav li a:active {
background:url('Images/Icons/nav/nav-fade3.png');
background-repeat:repeat-x
color:#ffffff;
}

</style>


Yes, <style> and </style> is in the head tags!
All padding and stuff works, but the font color does not change!

I have another script that defines the color of the links on my "Links" page... this is the colors the font color of the ul lists changes to!


<body style="color: black; background-color: white; " backgrounds="" alink="#b6f391" link="#b6f391" vlink="#b6f391">

If I remove the script, the font color changes to the standard ones...

trent.josephsen
July 14th, 2010, 01:12 PM
The attributes on <body> are deprecated; http://www.w3schools.com/tags/tag_body.asp. Don't use them.

What's your HTML?

slackthumbz
July 14th, 2010, 01:15 PM
putting CSS in html files is incredibly bad practice. All CSS should be in a separate file and sourced in the header with a link rel tag.

i.e <link rel='stylesheet' type='text/css' href='/css/site.css' />

xsinsx
July 14th, 2010, 05:29 PM
Id put a large Div around all the other body html




<body>
<div id="BodyWrapper">
<!-- All your other html -->
</div>
</body


then in your css have something like


#BodyWrapper{
position: relative;
width: 100%
color: black;
background-color: white;
backgrounds=""
alink="#b6f391"
link="#b6f391"
vlink="#b6f391"
}

that would be linked in from an external file of course.

DanDude
July 16th, 2010, 10:42 AM
Ok, i have put the css in a separate document, now it looks like this:


body {font-family: Helvetica,sans-serif;}

a {color:#b6f391}

a:active {color:#b6f391}

a:hover {color:#b6f391}

a:visited {color:#b6f391}

ul#list-nav {
list-style:none;
font-family: Helvetica,Arial,sans-serif;
margin:0px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:url('../Images/Icons/nav/nav-fade1.png');
background-repeat:repeat-x
color:#000000;
float:left;
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:url('../Images/Icons/nav/nav-fade2.png');
background-repeat:repeat-x
color:#000000
}

ul#list-nav li a:active {
background:url('../Images/Icons/nav/nav-fade3.png');
background-repeat:repeat-x
color:#ffffff;
}I have changed


<body style="color: black; background-color: white; " backgrounds="" alink="#b6f391" link="#b6f391" vlink="#b6f391">Into just <body>

Everything works fine, but the links in my nav bar, are still the colors I have set them to in the beginning of the CSS document! I want them to be the colors i set here:


ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:url('../Images/Icons/nav/nav-fade1.png');
background-repeat:repeat-x
color:#000000;
float:left;
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:url('../Images/Icons/nav/nav-fade2.png');
background-repeat:repeat-x
color:#000000
}

ul#list-nav li a:active {
background:url('../Images/Icons/nav/nav-fade3.png');
background-repeat:repeat-x
color:#ffffff;Is there anything wrong with the CSS script?
This is how I connect the ul list with the css:


<ul id="list-nav">
<li><a href="index.html">Home</a></li>
<li><a href="Scripts/archive.html">Archive</a></li>
<li><a href="Scripts/links.html">Links</a></li>
<li><a href="mailto:xxxxxxx@xxxxxxxxx.com>Contact</a></li>
</ul>Thank you for fast answers :)

howlingmadhowie
July 16th, 2010, 11:29 AM
you're missing a few ';' at the end of css lines.

DanDude
July 16th, 2010, 04:41 PM
Ah, thanks! Now everything works! I am really new to CSS, so sorry for my incompetence :)