CSS - Replace Tables

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.

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

Hello

I would like to have some text replaced after, for example 10 seconds, with new text. And with fading in and fading out

Example given:
after opening page
fade in - show text1 "Welkom to the pleasure dome" - fade out
fade in - after 10 sec "For the latest Items, go to..." - fade out
fade in -after 10 sec "For ordering , call 0800-orderIT" - fade out

and so on. But al on the same place ( footer )

I did see this somewhere, but I am not sure if it was CSS only.

Thanks

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?

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?

For some reason the following HTML & CSS code do not render the same result as the code listed below it:

CSS - Attached Style sheet
Code:

td.style1{
  background-color: #FFFFFF;
  border-top: 1px solid #AAAAAA;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #AAAAAA;
}

HTML Code
Code:

<table>
  <tr>
    <td class="style1">Some content to display</td>
  </tr>
</table>

HTML (Intended display)
Code:

<table>
  <tr>
    <td bgcolor="#FFFFFF" style="border-top: 1px solid #AAAAAA; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #AAAAAA;">Some content to display</td>
  </tr>
</table>

Why wouldn't any browser follow the CSS in the stylesheet?

Does anyone know of some good tutorials on how to use CSS rather than tables? If so, could you providea link.

Thanks a lot.
andrew

Hello everybody,

I am new to the forum and also a newbie to webdesign! I am hoping that somebody wants to help me out as
I am trying to put the design of a table and the font used in CSS. I am trying to create a new table class out of:

<table cellspacing="0" cellpadding="0" width="100%" class="tekst6" bgcolor="#E6373D">
(tekst6 = FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; )

How do I do this? Many many thanks in advance for your help!

Regards
Buzzman

Hi everyone,

Dont actually know if this is possible (my css knowledge is way not what it should be!)

Can I define a whole set of attriblutes for a table (fonts, links, hover links etc etc) and than just use it with

<table class = "whatever"> etc

and then that table will have all the properties I defined (for only that table, not for the rest of the page)

if so how could I go about doing that.

Any help is very appreciated!

cheers

I am looking for advice on replacing a table layout (for form layout) with a CSS design. The purpose is to put together a PHP class that auto-generates forms so that the structure of the forms, is under control of an admin interface though an API. The problem is, that many of the clients that I do work for are very particular about the layout. In other words city, state and zip code must all be on one line, but phone number must have a row to itself, etc., etc.. The form must look exactly like the paper version.

Generating a good looking form through an API using a table layout where i have to worry about column spans and so forth, is not something I am looking forward to. I would like to use a CSS layout instead. What is the best way to coax divs to work in the same way table cells and rows do and still deal with any goofy IE CSS quirks?

Hi

I would like to replace the tables that make up my page with CSS.

I have a header, footer, left column and the main body.

Do you know of a link to a tutorial that can help. Or perhaps you know the CSS code.

Any pointers gratefully received..

**FIXED**

Ok moving my site from tables to CSS in my spare time at work but im having some difficulty with height attr.

Click me

The Left and right bars - I would like them to go all the way to the bottom of the page. If anyone can help - please let me know! Thanks!

Edit: Got it to work in Firefox just fine - but IE6 is still giving me problems.

Edit #2: *sigh* needed to set body to 100% - man IE is bass-ackwards.

Hello all,

I have a site which I am working on right now and there is going to be text on the right side, and 3 rows on the right which on the top there will be a page banner, on bottom, just a picture, and i want to repeat the background colors on the other side. Kind of confusing to explain but he brandyn.garlic.com/headstart/aboutus.html

Thats a page on the site, as you can see, there is a blank spot where I want a background to repeat but the size will obviously vary by the size of the content on the right. If someone could assist me with that, I would greatly appreciate it.

Thank you,

Brandyn