CSS - Css Class Attributes Inside Of Struts Html Tags

Hi all,
Not exactly sure where this post truely belongs (CSS, HTML, JS forums) but firt trying this forum.

I'm trying to create a simple expandable link but the link jumps up and down when expands/collapses. The code attached, any ideas any one. Code demonstrates the problem so please save it as .html and view it.

--
Thanks.


Code:

<style type="text/css">
.faq_hidden
{
	visibility: hidden;
}

.faq_shown
{
	visibility: visible;
}
</style> 

<script type="text/javascript"> 

function showReview(n)
{
 document.getElementById(n+'_r').className = 'faq_hidden';
 document.getElementById(n+'_f').className = 'faq_shown';
}

function hideReview(n)
{
 document.getElementById(n+'_f').className = 'faq_hidden';
 document.getElementById(n+'_r').className = 'faq_shown';
}

</script> 

<div id="r1_r" class="faq_shown"> 
 <a onclick="showReview('r1'); return false;" href="#"> 
  <div>
   Completing the questions 1
  </div> 
 </a>
</div>

<div class="faq_hidden" id="r1_f"> 
 <a onclick="hideReview('r1'); return false;" href="#"> 
  <div>
   Completing the questions
  </div> 
 </a> 
 <p>
  Completing the questionnaire should take 8 - 10 minutes of your time.
  Be honest, answer as you would normally behave and act, in response to
  the statements and questions. 
 </p>
</div>

Hi, everybody I'm trying to attached the CSS code you see below to the HTML/PHP code all the way at the bottom. I have tried renaming the ID to Class and replacing navigation with menu1 but no luck. How would I go about attaching this piece of CSS to the code below?


Code:

.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:37px; background:#fff url(button1.gif); position:relative; border:0px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:right; height:37px; line-height:37px; color:#aaa; text-decoration:none; font-size:13px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

How do I attach the above CSS to the HTML/PHP piece below?


PHP Code:
<div id="navigation">
<?php if ( function_exists( 'wp_nav_menu' ) ) { // Added in 3.0 ?>
    <?php wp_nav_menu( array(
    'theme_location' => 'primary', 
    'menu_id' => 'dropmenu', 
    'container' => '', 
    'container_id' => '', 
    'fallback_cb' => 'revert_wp_menu_page'
    )); ?>
    <?php } else { ?>
<ul id="dropmenu">
<li id="<?php if (is_home()) { ?>home<?php } else { ?>page_item<?php } ?>"><a href="<?php bloginfo('url'); ?>" title="Home">Home</a></li>
<?php $header_page_navigation = get_theme_option('header_page_navigation'); if($header_page_navigation == '') { ?>
<?php wp_list_pages('title_li=&depth=1&sort_column=menu_order'); ?>
<?php } else { ?>
<?php wp_list_pages('exclude='. $header_page_navigation . '&' . 'title_li=' . '&' . 'depth=' . '1' . '&' . 'sort_column=menu_order'); ?>
<?php } ?>
</ul><!-- DROPMENU PAGE END -->
<?php } ?>
<div class="clearfix"></div>
</div><!-- NAVIGATION END --> 

Question: If I assign an image a particular class (in this case, "photography", which I also use to align and add a border to the photo), can I have it display a bit of code as well. I'd like to be able to print a hyperlink to a script that will return EXIF data (which I have and works) to elements marked with that class?

Example:

Code:

  .photography {
    border: 5px solid #333333;
	text-align: center;
    }

.....

<img class="photography" src="whatever.jpg" />

would display whatever.jpg in a centered 5px box with a link that says "click here for EXIF data", which, on the backend, looks like this:

Code:

<a href="java script:exifWindow('exif/readexif.php?path=whatever.jpg')">click here for EXIF data</a>

How do you use element attributes as part of your CSS declaration?

For instance, I want to display the following into a row of data...

Code:

<quotes>
   <titles>
      <column id="c1">Symbol</column>
      <column id="c2">Name</column>
      <column id="c3">Last Sale</column>
      <column id="c4">Net Change</column>
      <column id="c5">% Change</column>
      <column id="c6">Volume</column>
   </titles>
</quotes>

The CSS I am using is ....

Code:

quotes {display:table}

titles {display: table-row}

column[id="c1"], column[id="c2"], column[id="c3"], column[id="c4"], column[id="c5"], column[id="c6"] {display: table-cell}

so whereever I have an element with an attribute I am using...

element[attribute="value"] {declaration}

...but this is not working. It includes the first column "c1" into the row and then nothing else.

Any clues?

I am trying to create different link attributes for different areas on the same page. For example, I have a banner area that is a dark color and the links need to be a lighter color for contrast, but on the main body of the page the background is white, so I want the links to be darker colors. I also want the hover colors to be different on the different types of links. I have tried using different classes of links, but they all seem to default to one or the other. Any suggestions?

Thanks for taking the time to read my question.

I am wondering if it is possible to control table attributes with css sheets.

For example,

center a tabel
modify border size
modify cellpadding
modify cellspacing

Thanks again,

Brad

CSS dummy reporting in here. This does what i need it to, but how could i make it better...and please point me to a good tutorial on not only using DIV tags with ID and classes, but referencing

Code:

/* links for navAlpha menu */	
#navAlpha a {
	color:#09c;
	font-size:13px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	
}
#navAlpha A:link {
	COLOR: white; 
}
#navAlpha A:active {
	COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:visited {
	COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:hover {
	COLOR: blue; TEXT-DECORATION: underline
}

/* links for navAlpha menu */		
#navBeta a {
	color:#09c;
	font-size:13px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	
}
#navBeta A:link {
	COLOR: white; 
}
#navBeta A:active {
	COLOR: white; TEXT-DECORATION: none
}
#navBeta A:visited {
	COLOR: white; TEXT-DECORATION: none
}
#navBeta A:hover {
	COLOR: blue; TEXT-DECORATION: underline
}

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 &nbsp; 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

Thanks for taking the time to read my question.

Is is possible to have different link attributes on different sections of a page?

For example:

I'd like to have all links on the menu section be white font, visited be black font, hover to be green font and active to be yellow font

On the rest of the page, I'd like all links to be green font, visited to be blue font, hover to be yellow font, and active to be whtie font.

here is my css:

Code:

@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
/*background-color: #d8d8d8;*/
}

#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}

#header {
width: 640px;
height: 100px;
background-color: blue;
}

#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
text-align: left;
text-transform: uppercase;
font-size: medium;
background-color: #FD9800;
font-size: 16px;
border: medium solid #E0E0E0;
padding: 4px;
}

#menu a.nav {
width:92px;
/*How can I have different colored links in this section v.s. the rest of the page?*/
}

a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-weight: bold;
font-size: 12px;
}
a {
color:green;
font-size: 12px;
}

hey,

I got a table, every <td> in the table got the css class .regular.
(<td class='regular'>).
When the user moves their mouse over a row, that row should change color. This works with the following code:
<tr onmouseover='this.className=\"hoverRow\"'>
However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this.

How can i overwrite the class of the td's by the class for the whole row?

thanks in advance

Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks.

P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-)

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

Using the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.