CSS - How To Specify Link Attributes For More Than One Id

Okay, so I am having some issues in positioning items with CSS properly. I have this div first:

Code:

#main
{
	position: relative;
	width: 927px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(/planetscuba/images/main.png);
	background-repeat: repeat-y;
	padding-top: 10px;
	padding-left: 35px;
	padding-right: 35px;
	padding-bottom: 10px;
}

Then inside that tag I have 4 more tags, which are just columns of data.

Code:

#navside
{
	position: relative;
	top: 0px;
	left: 0px;
	width: 150px;
	border-right: #FFFFFF medium dotted;
	border-bottom: #FFFFFF medium dotted;
	padding-bottom: 10px;
}

#column1
{
	position: absolute;
	top: 15px;
	left: 160px;
	width: 222px;
	text-align: center;
}

#column2
{
	position: absolute;
	top: 15px;
	left: 397px;
	width: 222px;
	text-align: center;
}

#column3
{
	position: absolute;
	top: 15px;
	left: 634px;
	width: 222px;
	text-align: center;
}

Now how I have it right now is the elements are all positioned correctly, but #main does not resize dynamically, which is a problem as I am adding data from a server in these columns, and the amount could change from time to time.

In addition the way I am doing is more then likely bloated, but it's the only way I know how to do this. I have a navigation menu on the side which is #navside, then I want to display 3 columns of data, essentially one image and a couple words underneath each image in each column. Now this is all coming from a database, so the easiest way would be just to have the navbar on the side and then content in the rest of the #main div but I don't know how to properly position everything apart from each other without using mass amounts of   tags.

So to summarize, first problem is to be able to position everything properly so that #main resizes dynamically and then second would be to find some better way to do this. If you can help me on both that would be awesome. Thanks for your help in advance.

Hi all,

I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited.

The test page is here

You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text.

Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color.

BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited.

Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this?

CSS file is here

Thanks!

Chris

I've been restyling a legacy web app. the old app had
height and width attributes for every image. So when you modernize you can create classes that chunk a whole bunch of stuff, one of which is height and width.

In order for SEO analysis to like you do you have to keep the old fashioned height and width attributes on every single image tag? Is it OK to have both a style from a class AND height and width attributes? I assume if they conflict the local ones will win, even though strictly speaking they are not styles.

Thanks, just curious.

Hi All,

I'm having problems getting a couple of CSS rules to render on my page. First, here's the page:

http://www.righteousguitar.com/

Here are the rules that aren't rendering properly (or likely at all):

Code:

#Heading {
	text-align: center;
}
#Heading h3 {
	margin-top: 14px;
	margin-bottom: -5px;
}

This rule should move the logo 5px from the left and top of the header. I've tried increasing the margins to as much as 50px, and it has no effect. (The "logo behind the logo" is part of the header image, which I'll remove once this is resolved.)

Code:

#Heading {
	text-align: center;
}
#Heading h3 {
	margin-top: 14px;
	margin-bottom: -5px;
}

These rules should center the h1/h3 heading and change the top-margin of h3 from 34px to 14px.

I should say that, for the most part, this is not my code - I received a free template with my hosting package. I did, however, create the rules in question. I'd prefer not to make wholesale changes to the code unless absolutely necessary. I've reviewed my notes on inheritance and specificity, but I can't find the problem, so I'm hopeful someone here can.

Thanks in advance for any ideas or suggestions.

Sam

How are you supposed to use the class="someCssStyle" attribute format inside of an struts html tag?
I tried just putting it in, but the jsp page won't compile:

<html:text property="ssn" class="textfield2" />

where textfield2 is a valid style attribute in my included css file.
Surely there is a way to specify this so that the taglib will render the proper output.
I'm not having any luck googling for an answer.

I have the following code, simplified from wordpress for clarity:

Code:

<div class="entry">
 	<p><img width="800" class="size-full" src="image.jpg" /></p>
 	<p>This is text.</p>
</div>

What I am trying to do is indent the text to a position 15 pixels inside the width of the image. In other words, shift ".entry p" 15 pixels right, and shift ".entry p img.size-full" 15 pixels left.

The complicating factor is that some of the images are not full width, and so the img.size-full selector has auto margins to center the image.

So what I need to have is something like

Code:

/* indent the P tag */
entry p {
	margin-left: 15px;
}

/* center the img */
img.size-full {
	margin: 5px auto;
}

/* This is where I fall down. I can identify the img, but I need to 
    affect the margin of the p tag, not the img tag, to change the
    margin. If I change the img tag, then then centering goes away */

entry p img.size-full {
	?????
}

Is this possible?

...Mike

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different.

How do i reference the sublinks? I did this which has no effect.
<a href='".$mypath."' id='catsub2'>";



//these settings override it still.
#blanksideboxContent.sideBoxContent a{
color: #000000;
font-size:1em;
font-family:verdana;
font-weight:bold;
text-decoration: none;
border:2px outset #000000;
background-color:#5ec82a;
width:125px;
display :block;
margin-left:2%;
}


#catsub2 a{
width:80px;

}

hi everyone,
im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers.
what its suppossed to look like is:
a:link.2{
color: white;
text-decoration: none;
font-weight: bold;
}
a:visited.2{
color:white;
text-decoration: none;
font-weight: bold;
}
a:hover.2{
color: #85ADC0;
text-decoration: none
font-weight: bold;
}
a:active.2{
color:white;
text-decoration: none;
font-weight: bold;
}

sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a>

any help is greatly appreciated!
thanks...

Hi

I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css".

Code:

<!--[if IE]>
   <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css">
<![endif]-->
<LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css">

Just tested and it doesn't work... it only calls "menu.css"

Tried it with "if IE7" and "if IE6" with no avail.

--------------

IE Style:
Code:

 #menu * {margin:0;} 
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px} 

All Others Style:
Code:

 #menu * {padding: 0;margin:0} 
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px} 

Anyone know how this is done?

Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.)

In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally.

Right now I've got

Code:

.leftnavtext A:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext A:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: underline;
}
.leftnavtext A:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}

And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks.