CSS - Thumbnail Link Style Problem

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..

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

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

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!

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

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?

Here is some code below. How do I write it, that only the title is bold and not the description?

Code:

<html>
<head>
    <style type="text/css">
        .selected {font-weight: bold; }
    </style>
</head>
<body>
<ul>
    <li class="selected">Title</li>
        <ul>
            <li>description 1</li>
            <li>description 2</li>
            <li>description 3</li>
        </ul>
    </ul>
</body>
</html>

I'm relatively ignorant about css and html, but I've faked my way along so far. But I've encountered a problem. I designed a style for a blog on LiveJournal, and it looks OK there. (http://www.livejournal.com/users/javajed/). I've also put a small bit of JavaScript in my website to embed my blog there. (http://www.jaredvoss.com/). On my website, the embedded blog is all screwy. All three DIVs should be contained within the scrolling layer, but only two of them are. Originally the sidebar DIV was even hidden behind the layer it's embedded in (I brought it forward using a z-index code). It seems like the sidebar DIV is taking it's position cues from the main body of my site, while the other DIVs are taking their position cues from the layer they're embedded in. I want all three DIVs to be aligned as they are on LiveJournal, and contained within the scrolling layer on my website. Any ideas? I've tried using wrapper divs and container divs (maybe not correctly) without success. Thanks for any help!

Im just playing around with CSS and Photoshop and made this so far:-
http://www.o0matte0o.myby.co.uk/windows-vista/
Lazy Link

It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please?

I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S

Code:

body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }

#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; } 
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }

Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.)

I have a rule called #MainContent. Now I want to change this rule for just one page so I duplicate it but don't add it to the global style sheet but declare the rule for this page only. However this doesnt work the div still changes based on the #MainContent rule in the global css file