PDA

View Full Version : Different Link Styles



JJackson
Feb 10th, 2010, 10:32 PM
Is it possible to create different link styles... like, coding it so that links under the #navigation div appear as #ffffff and links under the #footer div appear is #f3f3f3?

Thanks!

harrierdh
Feb 10th, 2010, 11:43 PM
You would do this with a class attribute in the <ul tag. Something like this. (Untested)


<style>
.header li {
color: #ffffff;
}
.footer li {
color: #f3f3f3;
}
</style>
<ul class="header">
<li></li>
</ul>
<ul class="footer">
<li></li>
</ul>

JJackson
Feb 10th, 2010, 11:51 PM
You would do this with a class attribute in the <ul tag. Something like this. (Untested)


<style>
.header li {
color: #ffffff;
}
.footer li {
color: #f3f3f3;
}
</style>
<ul class="header">
<li></li>
</ul>
<ul class="footer">
<li></li>
</ul>


Any way to do it inside the CSS?

Excavator
Feb 11th, 2010, 12:04 AM
Any way to do it inside the CSS?

You can specify different styling for links by how they are located. Like all links in #header can be one color on hover and all links in #content can be another.


#header a:link, #header a:active {color:#000;}
#header a:hover, #header a:visited {color:#f00;}
#content a:link, #content a:active {color:#0f0;}
#content a:hover, #content a:visited {color:#00f;}

If you have links in #whateverDiv that you want styled differently, you will need to add a class/id in the markup.

jenius
Feb 11th, 2010, 01:46 AM
that is within the css, the original example excavator gave - he just put it in an internal stylesheet. Look into descendent selectors (http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm) - the solution is easy, you just need to specify the classes one additional level as excavator did. so in your css you would add the id or class of the div before the a, as in




CSS------

#content a:link {color: red;}

#footer a:link {color: blue;}

HTML------

<div id="content">
<a href="#">This link will appear red!</a>
</div>

<div id="footer">
<a href="#">This link will appear blue!</a>
</div>

JJackson
Feb 11th, 2010, 05:22 AM
Thanks! I'm confused on how I would get a background image on the link for the current page on the site though. Any ideas?

Thanks!

P.S. - http://i46.tinypic.com/i3ufwm.jpg

ahallicks
Feb 11th, 2010, 05:45 PM
If you mean add a background to JUST the link that corresponds to the current page then you will have to add a class, or separate id to that link to distinguish it from the rest of the links (this could be done manually, or using a server side script if you have one building your site).

Your link would look like:



<a href="" title="Current Page" id="current">About Us</a>


Then to put a background image on the link just reference it using:



a#current {
background: #FFF url(/images/image.jpg) no-repeat;
/* Might need the following depending on the image */
display: block;
width: 100px;
height: 100px;
}



Oh, and that link doesn't work

JJackson
Feb 11th, 2010, 07:46 PM
If you mean add a background to JUST the link that corresponds to the current page then you will have to add a class, or separate id to that link to distinguish it from the rest of the links (this could be done manually, or using a server side script if you have one building your site).

Your link would look like:



<a href="" title="Current Page" id="current">About Us</a>


Then to put a background image on the link just reference it using:



a#current {
background: #FFF url(/images/image.jpg) no-repeat;
/* Might need the following depending on the image */
display: block;
width: 100px;
height: 100px;
}



Oh, and that link doesn't work

Thanks! That worked well. I have another question about my navigation. I've inserted the links into the markup as Home, Services, About, Contact. However, for some reason the navigation is outputting them backwards. Any idea why? Site can be found live at http://thecodester.com/projects/orange.

Thank you!

Excavator
Feb 11th, 2010, 07:58 PM
Thanks! That worked well. I have another question about my navigation. I've inserted the links into the markup as Home, Services, About, Contact. However, for some reason the navigation is outputting them backwards. Any idea why? Site can be found live at http://thecodester.com/projects/orange.

Thank you!

Floats can be funny that way.
Try this -


#top-nav li {
margin: 10px 10px 10px 10px;
display: inline;
float: left;
}

ul {
list-style-type : none;
font-size: 10px;
float: right;
}

JJackson
Feb 11th, 2010, 08:03 PM
Floats can be funny that way.
Try this -


#top-nav li {
margin: 10px 10px 10px 10px;
display: inline;
float: left;
}

ul {
list-style-type : none;
font-size: 10px;
float: right;
}

Thanks! Is it possible to vertically align the image with the text?

Excavator
Feb 11th, 2010, 08:13 PM
Thanks! Is it possible to vertically align the image with the text?

If you give the ul a width so it can go on the same line as your floated logo image, you should be able to margin it up/down where ever you need it.
Something like this -

ul#top-nav {
width: 300px;
float: right;
margin: __px 0 0 0;
list-style-type : none;
font-size: 10px;
}
#top-nav li {
margin: 0 10px ;
float: left;
}

JJackson
Feb 11th, 2010, 08:20 PM
Thank you. www.thecodester.com/projects/orange -- for #banner I added margin-top: 23px; -- will that mess the layout up later down the road? Also, I'm trying to move it to the left a bit so that it's in line (how it's supposed to be according to the PSD). What can I do to accomplish this?

EDIT: Had to re-upload the files. Done.

Excavator
Feb 11th, 2010, 09:53 PM
Thank you. www.thecodester.com/projects/orange -- for #banner I added margin-top: 23px; -- will that mess the layout up later down the road? Also, I'm trying to move it to the left a bit so that it's in line (how it's supposed to be according to the PSD). What can I do to accomplish this?



I'm not sure how far to move the logo over...
Have a look at this approach -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: url(http://thecodester.com/projects/orange/images/background.png) repeat-x;
font: 14px/16px Tahoma, Geneva, sans-serif;
text-align: justify;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 700px;
margin: 0 auto;
overflow: auto;
}
#header {
height: 94px;
background: url(http://thecodester.com/projects/orange/images/logo.png) no-repeat left center;
}
/*=========
NAVIGATION
=========*/
ul#top-nav {
width: 300px;
float: right;
margin: 25px 0 0;
list-style-type : none;
font-size: 10px;
}
#top-nav li {
margin: 10px 10px 10px 10px;
float: left;
}

a#current {
height: 22px;
width: 74px;
display: block;
text-align: center;
background: url(http://thecodester.com/projects/orange/images/current.png) no-repeat;
}
#top-nav a:link,
#top-nav a:visited,
#top-nav a:hover,
#top-nav a:active {
color: #ffffff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul id="top-nav">
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--end header--></div>
<!--end container--></div>
</body>
</html>

JJackson
Feb 11th, 2010, 10:00 PM
I'm not sure how far to move the logo over...
Have a look at this approach -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: url(http://thecodester.com/projects/orange/images/background.png) repeat-x;
font: 14px/16px Tahoma, Geneva, sans-serif;
text-align: justify;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 700px;
margin: 0 auto;
overflow: auto;
}
#header {
height: 94px;
background: url(http://thecodester.com/projects/orange/images/logo.png) no-repeat left center;
}
/*=========
NAVIGATION
=========*/
ul#top-nav {
width: 300px;
float: right;
margin: 25px 0 0;
list-style-type : none;
font-size: 10px;
}
#top-nav li {
margin: 10px 10px 10px 10px;
float: left;
}

a#current {
height: 22px;
width: 74px;
display: block;
text-align: center;
background: url(http://thecodester.com/projects/orange/images/current.png) no-repeat;
}
#top-nav a:link,
#top-nav a:visited,
#top-nav a:hover,
#top-nav a:active {
color: #ffffff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul id="top-nav">
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--end header--></div>
<!--end container--></div>
</body>
</html>

Oh no, I was referring to the orange banner (#banner). And I fixed it... my stupidity, I set the width of #container to 700px when I first started working on the design because I didn't check the exact width of the banner. Sorry to waste your time!