Layout

[chuxs]

<table width ="600">
<div align="center">
<table>
<tr>
<td width="20%"></td>
<td Width 5%></td>
<td width="70%"></td>
</tr>
</table>
</div>
</table>

Keeping in mind the screen resolution of user (min-640x480)
hw can i transfer this code layout to a tableless Css layout and hw do i create a css menu that contain sub-menus

[karinne]

check out

for tableless layouts
http://www.thenoodleincident.com/tut...son/boxes.html
http://www.glish.com/css/
http://www.bluerobot.com/web/layouts/


and this one for the css sub-menu
http://www.alistapart.com/articles/dropdowns/

hth

[Knightime]

chuxc, I think you will have better luck making a menu with submenus (dynamic) if you use javascript. A CSS menu can only get you so much, but if you want a simple menu, then you could probably do it. There is a great article on making a somewhat dynamic menu at alistapart.com:

http://www.alistapart.com/articles/slidingdoors/

Good luck.

[Knightime]

Here is part 2 to that article.

http://www.alistapart.com/articles/slidingdoors2/

[chuxs]

thanx karinne. Can u help me out on hw to create and apply ccs styles to html form controls i.e <input type="text">, <select>,<input type="button">...

check out

for tableless layouts
http://www.thenoodleincident.com/tut...son/boxes.html
http://www.glish.com/css/
http://www.bluerobot.com/web/layouts/


and this one for the css sub-menu
http://www.alistapart.com/articles/dropdowns/

hth

[karinne]

Sure... the simple use of a class will do the job

.formfield {
 border: 1px solid #999;
 color: #000;
 background-color: #eee;
 font-size: 12px;
}
 
.formbutton {
 border: 1px solid #000;
 color: #000;
 background-color: #c33;
 font-size: 12px;
}

<input type="text" name="name" value="" size="40" class="formfield">
 
<input type="submit" value="submit" name="submit" class="formbutton">

That should work.

And then you can always have a bit of fun and add some onfocus and mouseover effects

Use the same code for the CSS and this for the HTML

<input type="text" name="name" size="40" class="formfield" onfocus="this.style.background='#fff'" onblur="this.style.background='#ded'">
 
<input type="submit" value="submit" name="submit" class="formbutton" onmouseover="this.style.background='#f66'" onmouseout="this.style.background='#c33'">

Have fun with it

[chuxs]

thanx alot

Sure... the simple use of a class will do the job

.formfield {
 border: 1px solid #999;
 color: #000;
 background-color: #eee;
 font-size: 12px;
}
 
.formbutton {
 border: 1px solid #000;
 color: #000;
 background-color: #c33;
 font-size: 12px;
}

<input type="text" name="name" value="" size="40" class="formfield">
 
<input type="submit" value="submit" name="submit" class="formbutton">

That should work.

And then you can always have a bit of fun and add some onfocus and mouseover effects

Use the same code for the CSS and this for the HTML

<input type="text" name="name" size="40" class="formfield" onfocus="this.style.background='#fff'" onblur="this.style.background='#ded'">
 
<input type="submit" value="submit" name="submit" class="formbutton" onmouseover="this.style.background='#f66'" onmouseout="this.style.background='#c33'">

Have fun with it