PDA

View Full Version : CSS problem



finoy_ako
Jan 16th, 2010, 03:49 PM
hey there,, i got problem about this css code...

i only want to apply the css effect in the <ul> tag but the other hyperlinks is also affected.

id try to use the id but the other hyperlink is still affected..

take a look at this code.





Group:
Members
Member
#298
Joined:
January 12, 2010

ive try to use ID but the other link still affected.


<html>
<head>
<style type="text/css">

#sample1
{
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>

<ul id="sample1">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>


<div align="right">
<table width="300" border="1">
<tr>
<td><a href="yahoo.com">Yahoo</a></td>
</tr>
<tr>
<td><a href="facebook.com">facebook</a></td>
</tr>
</table>
</div>

</body>
</html>

met
Jan 16th, 2010, 03:58 PM
#sample1 li a:link, #sample1 li a:visited
{
<!-- css -->
}

#sample1 li a:hover, #sample1 li a:active {
<!-- css -->
}


select any anchor that is a descendant of a LI element that is a descendant of an element with the ID of sample1

finoy_ako
Jan 16th, 2010, 04:22 PM
thanks for you response sir met... but i didnt understand it clearly.

can you please edit my code to the right one, so i can study the code better.

thanks again bro,,

met
Jan 16th, 2010, 04:42 PM
perhaps this will be better to show you

in a new document:



<!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" />
<style>
#sample1 li a:link, #sample1 li a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

#sample1 li a:hover, #sample1 li a:active {
{
background-color:#7A991A;
}</style>
</head>

<body>
<div id="sample1">
<ul><li><a href="#">Style</a></li></ul>
<!-- this link will be styled, as it is within a <LI> element contained within the DIV "sample1" -->

<a href="#">No style</a>
<!-- this link will have no style, even though it is contained within <div id="sample1">-->
</div>
</body>
</html>


the css uses selectors to control exactly which parts are styled.

#sample1 li { //

this means style any LI element that is a descendant of an element with an ID of sample1.

i.e



<div id="sample1">
<ul><li>this will be styled.</li></ul>
</div>

<ul><li>this will not be styled because it is outside of #sample1.</li></ul>

finoy_ako
Jan 16th, 2010, 05:18 PM
thanks sir met,, i get it...

i wish my knowledge is far as you about this thing,,,

two thumbs up for you sir met.

by the im a beginner about web designing, im sure i will spam this forum with my question..

thanks sir met..