Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Different Link Colors For Different Divs In Css


  • Please log in to reply
6 replies to this topic

#1 lhamil64

lhamil64

  • Members
  • 200 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:United States
  • Local time:01:53 AM

Posted 23 July 2008 - 11:38 AM

I am re-designing the layout and colors of my website to match my blogs theme. On my blog, the title for the entire blog is white text with a dark-ish blue background. This text is also a link. On my website, I have searched and searched but I can't find anything that works. How can I change the link color for one div but not for the rest? here is my CSS code:

body{
background:white
}
A:link, A:visited, A:active{
color:red;
text-decoration:none
}
A:hover{
color:red;
text-decoration:underline 
}
.title{
background:#0066CC;
color:white;
position:absolute;
top:15px;
left:10px;
height:127px;
width:970px;
text-align:center
}
/*nav.a{color:black;text-decoration:none}
title.a{color:white}*/
.nav{
color:white;
border:1px solid white;
background:lightblue;
width:950px;
height:50px;
padding:10px;
position:absolute;
top:150px;
font-size:20px
}
.content{
border:1px solid white;
background:#E1EBF2;
width:950px;
min-height:400px;
padding:10px;
position:absolute;
top:230px;
left:10px;
font-size:18px;
color:black;
}
p{
text-indent:10px
}

The commented code is what I tried to do, but it didn't work :thumbsup:

Here is my HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="include.css">
<title>lhamil64's BASIC Programs</title>

</head>

<body>

<div class="title">
<a href="index.html"><h1>lhamil64's BASIC Programs</h1></a>
</div>

<div class="nav">
<a href=index.html>HOME</a>

<a href=links.html>LINKS | </a>
<a href="/forum">FORUM | </a>
<a href="/blog">BLOG | </a>
<a href=contactme.php>CONTACT ME | </a>
<a href=programs.html>PROGRAMS | </a>
<a href=chatroom.html>CHATROOM | </a><br/>
<!-- To view this website at its fullest, please use the Firefox web browser:<br/>
<a href="http://www.getfirefox.com">
<img src="firefox_logo.gif" alt="Firefox Logo" align="middle" height="50px" width="50px">
</a>-->
</div>

<div class="content">
<p>
Welcome to lhamil64's BASIC Programming Website! Here you will find many resources and my programs avaible for download.
<br/>
If you like the website, please join the forum and read the blog. Links to these are at the left.
</p>
</div>
</body>

</html>

Website: http://web.ruibranco.com/~lhamil64
Forum: http://web.ruibranco.com/~lhamil64/forum
Blog: http://web.ruibranco.com/~lhamil64/blog

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:11:53 PM

Posted 23 July 2008 - 01:46 PM

Give the div a unique ID, and create CSS that applies only to that ID. In your case, you are going to want to nest divs, with an outer div housing them all.

#3 lhamil64

lhamil64
  • Topic Starter

  • Members
  • 200 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:United States
  • Local time:01:53 AM

Posted 23 July 2008 - 01:51 PM

I can give the div an ID just by putting "id=name" after the class name right?
How would I do all the other stuff (lol)
I should have mentioned that I am pretty new to html, I'm doing it mainly by tutorials :thumbsup:

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:11:53 PM

Posted 23 July 2008 - 02:27 PM

IF you have a class parameter and an Id parameter, I'm not sure what will happen. You would be better off having one or the other. Make up a simple HTML page that contains only the stuff you want to work with and experiment. See what happens if you have two different styles being called by the same tag. Incidentally, if you use an ID parameter, then in your CSS, the name needs to be proceeded with a #.

#5 lhamil64

lhamil64
  • Topic Starter

  • Members
  • 200 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:United States
  • Local time:01:53 AM

Posted 23 July 2008 - 03:29 PM

Actually, I googled one more time just because I was getting annoyed (lol) and I found out that if you do the color CSS code for the link in the HTML code and not in the seperate file you can change the color for that one link (now I just have to change the color for every navigation link on every page :D, oh well, not that hard)
I did the same thing to the title and it worked just fine.

Really the only thing how that I have left to do is position and size everything to match.

#6 Ryan12

Ryan12

  • Members
  • 28 posts
  • OFFLINE
  •  
  • Local time:10:53 PM

Posted 26 July 2008 - 05:54 PM

I quickly scanned this topic so forgive me if I miss something, but it seems the commented code has the crucial error.

/*nav.a{color:black;text-decoration:none}
title.a{color:white}*/

To specify the classes 'nav' or 'title' with the anchor element, switch the beginning around.
a.nav {}
a.title {}
not the other way around as you have it
selector.class rather than class.selector

See the class selector heading at http://www.w3schools.com/Css/css_syntax.asp

Edited by Ryan12, 26 July 2008 - 05:55 PM.


#7 lhamil64

lhamil64
  • Topic Starter

  • Members
  • 200 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:United States
  • Local time:01:53 AM

Posted 27 July 2008 - 07:36 AM

Thanks for that. I did get the colors though, I just had to add CSS in the HTML code for each link instead of doing it in the separate file. This will probably cause more hard work later because if I want to change the link colors I will have to change it in each HTML file, but for now it's fine.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users