CSS - Spacing Between Links And Underlining Of Hyperlinks.

I'm pretty new to css but now use one css file for all of the formatting of my entire website. The only problem I see with that (I say problem because I can't figure out a way around it) is that all of my hyperlinks throughout the website have only one normal state, hover state, active state and visited state. Is there a way to make more than one hyperlink set of formats? Like if I wanted to make one for each page? I could do something like ahomepage:link, ahomepage:visited, ahomepage:active or something???

Code:

a:link, a:visited, a:active  { font-size:12px; font-weight:normal; font-family: times; text-decoration:none; color : #000000 }
a:hover                      { font-size:12px; font-weight:normal; font-family: times; text-decoration:underline; color : #000000 }

I want to have all my hyperlinks in my CSS file, so I can call them all at once. Is there any way to do this? Or do I have to code them into every page individually??

i currently have the following code for links..

Code:

a {
	color:#666666;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font-family: arial, helvetica, sans-serif;
	}
a:link {color:#666666;}
a:visited {color:#333333;}
a:hover {background-color:#eee;}

is there a way of having another set so that some have the colour settings as above and another set have the colour settings that are blue or something???

any suggestions would be great....

thanks

RF

Something has gone terribly wrong. I added a sub menu to one of my pages by creating a sub-unordered list and positioning it absolutely where I wanted it. Now only 1 of 7 of the hyperlinks actually works and even that one isn't lined up correctly.

I'm not sure what is going on here. The page in question can be found here. I've gone over this a hundred times and can't find where the problem starts.

Hi,

I have a series of images that act as hyperlinks to other pages.

I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide.

Tried doing this with normal link styles, but it ain't workin.

So how do you do this?

Thanks

mM

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!

Hello All,

I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/

The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height.

Any help would be greatly appreciated!

Thanks!

I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows...

HTML
Code:

<ul id="nav">
<li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a>
<ul>
<li><a href="#" style="color:#000;">About Asthma</a></li>
<li><a href="#" style="color:#000;">Treatment</a></li>
<li><a href="#" style="color:#000;">Taking Control</a></li>
<li><a href="#" style="color:#000;">Lifestyle</a></li>
<li><a href="#" style="color:#000;">Resources & Support</a></li>
</ul></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
</ul></li></ul>

I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here?

This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!!

Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer.

Example: This is what we see now.

| Text Here

Example: This is what we would like to see.

| Text Here

Any suggestions?

ul a, li a{
margin:0;
padding:0;
}

This is my first time ever working with CSS. I am trying to put together a site; however, I am havings some setbacks straight out of the gate. I am trying to get the navigation bar to align up against the header. How do I eliminate the spacing between the header and the navigation bar? I have tried the padding: 0; method with no luck. PLEASE HELP!

Hi Guys

I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here

in firefox the two containers appear correctly but in internet explorer there is a 10px space between them.

Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing.

Does anyone have any ideas as to what the problem is.

Any help would be much appreciated!

I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS.

The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div.

Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html

CSS is he
http://www.prairieplugs.com/Sample1...ieplugscss1.css

Below is the CSS that is applicable:

Code:

body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .9em;
	color: #000;
	background-color: #008F13;
	background-image: url(images/bgbottom.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	background-attachment: fixed;
}

#wrapper {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 15px;
}

#wrapper #header {
	background-image: url(images/headerSamp1.jpg);
	margin: 0px;
	padding: 0px;
	height: 276px;
	background-repeat: no-repeat;
}
#wrapper #nav {
	background-color: #FFF;
	background-image: url(images/navSamp1.jpg);
	background-repeat: no-repeat;
	height: 60px;
	width: 900px;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#wrapper #content {
	background-image: url(images/contentSamp1.jpg);
	background-repeat: repeat-y;
	margin: 0px;
	width: 900px;
	background-color: #FFF;
	padding: 0px;
}
#wrapper #footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background-repeat: no-repeat;
	height: 79px;
	background-color: #FFF;
	background-image: url(images/footerSamp1.jpg);
	margin: 0px;
	padding: 0px;
}
#wrapper #nav ul {
	margin: 0px;
	list-style-type: none;
	text-align: center;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	color: #060;
}
#wrapper #footer p {
	text-align: center;
	margin: 0px;
	padding-top: 25px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#wrapper #nav ul li {
	display: inline;
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: #000;
	font-size: 1.2em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: small-caps;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}
#wrapper #nav ul li.last {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#wrapper #nav ul li a:visited {
	text-decoration: none;
}
#wrapper #nav ul li a:hover {
	color: #000;
	text-decoration: underline;
}

#wrapper #nav ul li a {
	text-decoration: none;
	color: #FFF;
}
#wrapper #content p {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1em;
	text-align: left;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 15px;
}