CSS - Replace Text After A Certain Time ( Timer?!)

Dear friends,

I have the following table, which I need to be replaced with CSS. How can I do it? Here is the code:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td style="background: url(engine/images/onLayerWinUpLeft.png) top right no-repeat; width:51px; height:51px"><div id="closeBut" style="width: 30px; height: 30px; position:absolute; margin-left: 302px; margin-top: 10px"><img src="engine/images/closeBoxBut.png" /></div></td>
                <td style="background: url(engine/images/onLayerWinUp.png) top left repeat-x;"></td>
                <td style="background: url(engine/images/onLayerWinUpRight.png) top left no-repeat; width:51px; height:51px"></td>
              </tr>
              <tr>
                <td style="background: url(engine/images/onLayerWinLeft.png) top right repeat-y;"></td>
                <td style="background-color:#FFFFFF" height="400">&nbsp;</td>
                <td style="background: url(engine/images/onLayerWinRight.png) top left repeat-y"></td>
              </tr>
              <tr>
                <td style="background: url(engine/images/onLayerWinDownLeft.png) bottom right no-repeat; width:51px; height:51px"></td>
                <td style="background: url(engine/images/onLayerWinDown.png) bottom left repeat-x;"></td>
                <td style="background: url(engine/images/onLayerWinDownRight.png) bottom left no-repeat; width:51px; height:51px"></td>
              </tr>
            </table>

I have the following: PHP Code:
<td id="nav-01" onmouseover="this.className='classover'" onmouseout="this.className=''">Home</td> 



I realise the "this.className" will produce a class of "classover" when I do a mouseover. However I already have an id="nav-o1" and therefore the class will not overwrite this.... they are both setting different background colours to the column.

Can anyone help me? PHP Code:
<td id="nav-01">Home</td> 



That is the basic code and I would like background colour to change when doing a mouseover and then revert to original when mouse goes away. As much CSS as possible and as little javascript...

Please!

I'm creating a site with a few div layers. Like so:

Code:

<div id="mainDiv">
	<div id="topLinks"><a href="##" class="linkStyle">Calendar</a> | <a href="##" class="linkStyle">Site Map</a> | <a href="##" class="linkStyle">Home</a></div>
	<div id="siteContent">
		<div id="mainContent">
			<div id="header">
				<a href="##"><img src="img/logo.gif" width="131" height="30" border="0" alt="Logo" title="Logo" style="padding: 10px 0px 12px 19px;" /></a>
				<div id="orangeNav">Top Navigation</div>
			</div>
			<div id="content">
				 ****** Need left navigation and right content here**** 			</div>
		</div>
		<div id="bottomNav">Bottom Navigation Here</div>
		<div id="footer">Footer Info here</div>
	</div>
</div>

The problem is with the bold green part. I'm trying to create a left-side navigation with content to the left. If I create a table, I'm done and it works. Of course, I'm trying not to use a table to set up the design.

The the other div tags are all position: relative. If I add two div tags that are position: absolute and place them, the text put in the absolute tags are not affecting the rest of the page and the footer either covers or gets covered by the absolute tags. However, I can't get it to work with relative div tags.

I'm a beginner so I'm struggling. I know I've done it before, but it's just not working this time.

In case you need it, here's the style sheet:

Code:

body {
 background-color: #1D1F12;
 margin: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The whole container for the page */
#mainDiv {
	position: relative;
	top: 0px;
	left: 0px;
	width: 767px;
	padding: 7px 0px 25px 13px;
}
/* START: Calendar | Site Map | Home link and related styles */
#topLinks {
	position: relative;
	width: 757px;
	padding-bottom: 8px;
	text-align: right;
	font-size: 10px;
	color: #999999;
}
#topLinks .linkStyle {
	font-size: 10px;
	color: #999999;
	text-decoration: none;
}
#topLinks .linkStyle:hover {
	text-decoration: underline;
}
/* END: Calendar | Site Map | Home link and related styles */
/* START: items within the lighter background block */
#siteContent {
	position: relative;
	width: 741px;
	padding: 14px 13px 35px 13px;
	background-color: #393D23;
}
#mainContent {
	position: relative;
	border: 3px solid #ffffff;
}
#header {
	position: relative;
	height: 104px;
	background-image: url(img/bg-header.gif);
	border-bottom: 4px solid #FFF1B8;
}
#orangeNav {
	position: relative;
	height: 25px;
	background-color: #993300;
	border-top: 1px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	text-align: center;
	vertical-align: middle;
}
#orangeNav .navImg {
	padding: 4px 8px 0px 8px;
}
#content {
	position: relative;
	background-image: url(img/bg-content.gif);
	padding: 0px 0px 25px 0px;
}
#leftSide{
	position: relative;
	left: 9px;
	top: 12px;
	width: 150px;
}
#nav {
	position: relative;
	width: 150px;
	border: 1px solid #A8A81F;
	background-color: #E0DD92;
	padding-top: 5px;
}
#nav .navItem {
	padding: 5px 8px 5px 8px;
}
#nav .navItem:hover {
	background-color: #E9E6B0;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link:hover {
	text-decoration: underline;
}
#rightSide{
	position: relative;
	left: 200px;
	top: 12px;
	width: 520px;
	font-size: 11px;
	border: 1px solid red;
}
#bottomNav {
	position: relative;
	background-color: #989A8C;
	padding: 2px 25px 2px 0px;
	text-align: right;
}
/* START: footer area and related styles */
#footer {
	position: relative;
	padding: 20px 0px 0px 0px;
	color: #BFC1B8;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
}
#footer .linkStyle {
	font-size: 10px;
	color: #BFC1B8;
	text-decoration: none;
}
#footer .linkStyle:hover {
	text-decoration: underline;
}

Edited to add: I have included the div tags for the left and right portions: #leftSide and #rightSide

hey,

I got a form and use javascript to perform simple validations on it.

When all form fields are valid, ready_for_submit is true and i want to show a div saying everything is filled in correctly. (a different div is shown when not all fields are filled in correctly).

I got that working but what i want is that both div's have the same position. Now when one div is hidden, an empty line is shown, and below that line the visible div is shown. (Its the other way around when the other div is hidden.)

html Code:
Original - html Code <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td>

  

    <td colspan="4" align="right">
    <div id="not_ready" style="visibility: visible;">
        <img name='img_subRegister' src='images/invalid.gif'>
        Not all required data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    <div id="ready" style="visibility: hidden;">
        <img name='img_subRegister' src='images/valid.gif'>
        All data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    </td>

How can i set both div's on the same position?

Changing visibility is done with javascript like this:
javascript Code:
Original - javascript Code if(ready_for_submit == false){ document.getElementById("not_ready").style.visibility = "visible"; document.getElementById("ready").style.visibility = "hidden"; return; } else{ document.getElementById("not_ready").style.visibility = "hidden"; document.getElementById("ready").style.visibility = "visible"; }

  

  


 if(ready_for_submit == false){


     document.getElementById("not_ready").style.visibility = "visible";


     document.getElementById("ready").style.visibility = "hidden";


     return;


 } else{


     document.getElementById("not_ready").style.visibility = "hidden";


     document.getElementById("ready").style.visibility = "visible";


 } 

thanks in advance.

Hi--

I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help!

I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png.

In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background.

My code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>

<body>

<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>

</html>

I'm into redesigning our web shop, and am thinking about navigation. Today we have a 30-item tree menu, "norton commander"-style. I'm looking for a modern, user-friendly alternative.

I've understood that top menus are very "in" now, so I have concidered that, but failed to narrow down the menu items.
I need a vertical menu that can hold many items, but also is user friendly. this menu is good, but I would like to load the submenu items via ajax. Anybody know if anyone has done that?

Can anybody point me in the right direction of any blog/article/script about how to deal with the navigation problem?

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like

Code:

<input type="image" src="..."

and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much?

can someone help me with this?
here is the page&css I have been working on...

the page file
the css file

I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site?

this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!!

hey folks, I've got about 4 words in a row all with different styles on them!

I'm using the :hover function to put rollovers on the different words which works sweet.


problem is, can I when I rollover the first word make the rollovers on the other words highlight?


cheers


p.s if you dont know what I'm talking about i'll post up a simple example

When i load http://www.promogift.be/index.php?page=producten&catnr=&pagina=10 in FF the first time it is not showing correct, after a refresh it is showing the page like i want it, doe anyone has a solution how to solve this so the visitors don't have to reload?

Hi All,

I am new to css and am hoping that someone out there will be able to help me to achieve the following.

I have set up some visuals for a site, I was originally told that would be working visuals so ti wouldn't matter how I set it up - so, to save time I used tables - but on completion of the visuals I have been told that the vis' need to be set up using css and no tables as it will adapted to xhtml.

Can anyone tell me how to set a button that has a background that is a 'lozenge' shape (rounded corners) that changes the tone of blue on rollover and some html text overlayed. How can I create this using css?

Also how do I make the page elements sit in the centre of the window regardless of how wide the browser goes.

I don't know if this is clear, what I am trying to achieve but, I am kinda stressed, and babbling!!! I need to have it sorted by tomorrow a.m.

Please help this frightened newbie!!!

Dno