CSS - Mymenubox With Header And Link Style Problem

I have one css file
which is linked to all my html pages

That css file defines a style for all my
<a> tags

ie - a:link, a:visited, a:hover etc.

Theres one html file
where i need a different style for some of the <a> tags
ive set a sepecific class on these tags ie:
<a class="set1" etc

and in my css file ive tried the following

.set1 a:link
{
etc
}

but for some reason this doesnt override the style on the generic a tags
ie it seems to keep using
a:link {

}

ignoring the

.set1 a:link
{
etc
}

help!

i want to have two seperate styles for links on my page - how can i do this. i am using dreamweaver.

i can only work out how to use one link style, i.e. the a:hover etc..

Hi,

I'm new to CSS and am using the weebly website builder. I need to add a link to my header image. Could anyone help me with this?

This is the CSS:

#header{
width: 961px;
height: 141px;
border-top: 2px solid #cccccc;
border-left: 2px solid #cccccc;
border-right: 2px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}

thank you!

Hello,
My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all.
I see this happenning with IE 6.x and FireFox 1.5 and netscape 7
Example HTML code where the unvisited link appears in Red and it should be in Grey:
Code:

<div class=medGray>
<a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records).
</div>

Here's my snippet from my CSS file:
Code:

a.medGray:link {
	text-decoration: underline;
	FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }

Can someone tell me why css style settings for links won't effect a mailto: link? Is there anyway to make it happen without individually coding style into each mailto: link?

Thanks,
HeadElf

I have a menu where the submenu li's have a blue/darker blue background color and hover color.

I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up

Here's the part of my styles for the list that I'm trying to change..
Code:

/* original backgrounds for the menu */
ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

Is it the way I tried to rename the style?
Code:

/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
  background: #afe4bf;
  color: #000;
  padding-left: 20px;
}

.green ul.menu li ul li a:hover {
  background: #88b796;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

thanks in advance for any help, Kathy

I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends.

http://www.guestwardho.com/campground_map.html


If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends.


Thank you in advance for your assistance.

When viewing my website, the font is too small in IE/Opera/Crazy Browser. I am a Firefox user and the site looks the way I want when viewed in Navigator & Firefox. I don't want to change that.

I'm thinking that I can use java script to make a page link to a specific style sheet, based on the user's browser. Unfortunately, I'm not a scripter and I haven't managed to find one that suits my purpose.

Is there a simpler way to accomplish this?

Thanks

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

Hi,

I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line.

I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other!



My page code:

<div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1>
</div>



My stylesheet code:

#garden-designer-title {
position:relative;
left:0px;
top:0px;
padding: 0;
margin: 0;
width:526px;
height:51px;
z-index:7;
}

#garden-designer-title a {
position:relative;
font-size: 46px;
font-family: verdana, arial, helvetica, sans-serif;
color: #009999;
font-weight: normal;
text-decoration: none;
}

#garden-designer-title h1 a {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}

Does anyone know what I'm doing wrong?!

Many thanks!

Hey all,

I have a seemingly simple problem with my link and header styles that I keep thinking had a really obvious solution which I can't see, so maybe it will be glaringly obvious to someone on here!

Notes: I'm a bit of a css beginner and I'm using Wordpress on my site.

I want to style the link-attributes of a specific <h3> tag so it won't underline when hovered. (the current hover-decoration is specified in the overall a: styles of the website).

Only thing is that I can't use a link class because the <h3> tag has only <?php the_category(', ') ?> inside, which displays and links to the relevent categories of a blog post.

So how can I style the link without creating a link class??

Appreciate anyone's thoughts on this,

Cheers!

Hi,
Can't see what is wrong with this line.. maybe i'm being blind?

<option style="font-family: verdana; font-size: 10px;" value="http://www.link here.com">LINK HERE</option>

Any ideas?

I am trying to use ul list to organize my images.

Here is how it should look like.

IMAGE IMAGE IMAGE
text text text

But instead, I get

IMAGEtext IMAGEtext IMAGEtext

Code:

<style>
/**************************************************************
   Thumbnail Lists
 **************************************************************/

ul.thumbs,
ul.thumbs li {
  margin: 0;
  padding: 0;
}

ul.thumbs li {
  margin: 0 0 15px 0 !important;
  margin: 0;
  padding: 0px;
  list-style: none;
}

ul.thumbs li.pagination {
  margin: 10px;
  padding: 0px;
  list-style: none;
  display:block;
}

a.thumb img {
  border: 5px solid #ccc;
}

a:hover.thumb img {
  background: #8EB4C6;
  border: 5px solid #000;
}

a:hover.thumb {
  background: none;
}

a.thumb span {
  width: 100%;
  display: block;
  margin-top: -5px !important;
  margin-top: -2px;
}
</style>

      <ul class="thumbs">

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>

        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li class="pagination">1.&nbsp;</li>

	</ul>

I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div.

Footer content section is right above the copyright notice.
http://www.aslanyurek.com/rtt/


Code:

/* content footer.css */

#fcontent{
	height:80px;
	width:790px;
	background-color:#999999;
}
#fcontent .help{
	float: left;
  	height: 60px;
  	width: 300px;
	vertical-align:middle;
	background-color:#FFFFCC;
}
#fcontent .catalog{
	float: left;
  	height: 60px;
  	width: 300px;
	vertical-align:middle;
	margin-left:10px;
	background-color:#F0FFCC;
}
#fcontent li {
	float:left;
	list-style-type:square inside;
	margin-left:25px;
}
#fcontent li a {
	display:block;
}

hello

i have a header on my website with an image in it positioned to the left.

so in my html it's:

<div id="header">
<img src="blabla.jpg">
</div>

and css is:

#header {
background-color: #FFFFFF;
padding-left: 25px;
}

this works perfectly but in that same header i want to place 2 more images but positioned to the right.

i have searched for many possible solutions but haven't found any. maybe i'm trying to hard and i'm overlooking the simplest solution... anyone has any suggestions ?

thanks in advance !