CSS - Customizing Some Not All Links

Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay?

HTML Code:
Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div>

  

<div class="formRow">
    <div class="textInput">
        <input class="textInput" id="name" type="text" />
        <label for="name">Name</label>
    </div>
</div>

CSS Code:
Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }

  

  


 #content div.formRow:hover


     {


     background-color: #EEE;


     }


 #content input.textInput


     {


     font-size: 14px;


     color: #666;


     padding: 3px 5px;


     width: 190px;


     height: 20px;


     border: 0;


     background-color: transparent;


     }


 #content input.textInput:focus


     {


     color: #000;


     }


 #content div.textInput


     {


     margin-left: 50px;


     background: transparent url('images/textInput.png') no-repeat;


     }


 #content div.textInput label


     {


     font-size: 14pt;


     font-weight: bold;


     margin-left: 50px;


     vertical-align: top;


     } 

And lastly... my image:


Thanks a lot!

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; 	 }

I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean.

here is my css style for that particular part:

.bodycopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #575757;
text-decoration: none;
line-height: 13px;
}
.bodycopy a:link {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:active {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:visited {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:hover {
color: #969696;
text-decoration: underline;

I have what seemed to be a simple idea but is turning out to bother me.
In my style sheet i want to put a base url followed by a user id
Link looks like this
Code:

http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=

Now in my html i have this
Code:

<table><tr><td >My name<td >Job position<td >606959150</tr>

The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this
Code:

<a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a>

I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide

Hi,

If I have the following CSS:

body {
margin: 0px;
padding: 0px;
}

a:link, a:visited {
color: #F36706;
text-decoration: none;
}
a:hover, a:active {
color: #F36706;
text-decoration: underline overline;
}

#siteDimention {
width: 758px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

How come the links in my page aren't changing from the normal blue/purple ones?

I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links.

The HTML:
Code:

<div id="homelink"><a href="index.html"></a></div>

The CSS:
Code:

#homelink{
	position:absolute;
	width:53px;
	height:17px;
	margin-top:25px;
	margin-left:70px;
	z-index:10;
}

#homelink a{
	display:block;
	background-image:url(images/links/home.png);
	background-repeat:no-repeat;
	width:53px;
	height:17px;
}

#homelink a:hover{
	display:block;
	background-image:url(images/links/homehover.png);
	width:53px;
	height:17px;
}

As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it.

Is there any way to solve this so that no border appears?

My first post Website:www.freewebs.com/weareamazing

I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help!

Hi,

I have CSS document like so:

Code:

div.menu A:link {
definitions 
}
div.menu A:visited {
definitions 
}
div.menu A:active {
definitions 
}
div.menu A:hover {
definitions
}

And in my HTML document

Code:

<div class="menu">
Links are then put in here
</div>

But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck

Thanks alot!

I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE.

My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>?

Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop)

Code:

<html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>

<body>
<div id="links">
	<ul>
		<li><a href="#">links</a></li>
		<li><a href="#">link 2</a></li>
		<li><a href="#">three</a></li>
	</ul>
</div>

<div id="links2">

		<a href="#">links</a>
		<a href="#">link 2</a>
		<a href="#">three</a>

</div>
</div>
</body>
</html>

question is about CSS and links.

I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text.

How do i set up more than two link effects?

I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness?

<div id="footer_bottom" class="bold">

<a href="sitemap.php" title="Sitemap">Sitemap</a> |
<a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> |
<a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a>

</div>

I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links:

Code:

a:link {
  color: red;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: red;
  text-decoration: none;
}
a:active {
  color: red;
  text-decoration: underline;
}

Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined.

However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined.

I want visited links to act the same. They only way I could get them to act the same was to do the following:

Code:

a.general:link {
  color: red;
  text-decoration: none;
}
a.general:visited {
  color: red;
}
a.general:hover {
  color: blue;
  text-decoration: underline;
}
a.general:active {
  color: red;
  text-decoration: underline;
}

This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this?

Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Code:

	body 		{

			
			background:#CBDEF5;
			margin: 1em auto;
			width: 600px;
			
			
			}

	#leftcontent	{
			margin: 1em auto;
			position: absolute;
			top:100px;
			left:250px;
			width:100px;
			background:#CBDEF5;
			
			}

	#centercontent 	{
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
   			margin-left: 140px;
   			margin-right:20px;
			}
	
	
	#advertising {
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
			margin-left:140px;
			margin-right:20px;
		}
		
	#banner 	{
			background:#CBDEF5;
			height:40px;
			padding:5px;
			}
	

	p,h1,pre 	{
			margin:0px 10px 0px 10px;
			}

	h1 		{
			font-size:14px;
			padding-top:10px;
			}

	
	background: #c3c8c3; }
	
	#button ul {
			list-style: none;
			margin: 0;
			padding:0;
			border:;
			}
	
		#button li {
			border-bottom: 1px solid #CBDEF5;
			margin: 0;
			}
	
	
	#button li a {
			display: block;
			padding: 5px 5px 5px 0.5em;
			border: 1px solid #1958b7;
			background-color: #87B4EB;
			color: #fff;
			text-align:center;
			text-decoration: none;
			width: 100%;
			}
	
		html>body #button li a {
			width: auto;
			}
	
		#button li a:hover {
			border: 1px solid #1958b7;
			background-color: #4B7BD3;
			color: #fff;
		}
	
	
		

On this site, the links do not work and I don't know why. The links should be a different color and when you hover over them they should change colors, but again, they do not. You can't even click on them and I can't figure out why. Any help is appreciated. Thanks!