table alignment problem…

@james_d_kellyOct 16.2005

Hi, ive recently decided to write/design my website by hand and ive just started to learn css.

Ive come accross a couple of problems – i can’t seem to get a nested table to be positioned at the top of the table its in, it is in the middle of the table instead!
And the three rows in the nested table dont appear to have any borders between them, how do i get borders between them?

Im using

[code]vertical-align = top;[/code]

but this doesnt seem to do anything, can some one help please!!!

this is my css so far:

[code]<style type=”text/css”> <!– body{ filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=’#FFFFFF’, startColorstr=’#C0CFE2′, gradientType=’0′); text-align:center; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }

.maintable{ text-align:center; position: relative; top: -1px; border-style = solid; border-width = 1px; cellspacing = 0px; cellpadding = 0px; width = 600; height = 100%; border-color = #000000; background-color = #D5DCE4; vertical-align = top; }

.toptable{ text-align:center; position = relative; top: 0px; border-style = solid; border-width =1px; cellspacing = 0px; cellpadding = 0px; width = 600px; height = 100px; border-color = #000000; background-color = #D5DCE4; vertical-align = top; } –> </style>[/code]

and this is my html:

[code]<div align=”center”> <center> <table class=”maintable”> <tr> <td>

<span class=”toptable”> <table> <tr> <td>row1</td> </tr> <tr> <td>row1</td> </tr> <tr> <td>row3</td> </tr> </table> </span>

</td> </tr> </table> </center> </div>[/code]

thanks for any help! ?

to post a comment

CSS

8 Comments(s) _↴

@LiLcRaZyFuZzYOct 16.2005 — #you definately should review your way of writing html:

you should place a doctype declaration first

dont use the <center> tag

dont place a block element in a <span> element

dont use tables for layout

if you have any questions, you are welcomed to ask!

good luck ?

@tegraphixOct 16.2005 — #The reason people use CSS is so that they don't have to use tables. I've redone the page with CSS. Also, your background gradient can only be seen by people using IE so I've added a pic for the background.

[code=html]
 <!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>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 <style type="text/css">
 <!--
 
 html {
 height: 100%;
 }
 
 body {
 height: 100%;
 margin: 0;
 padding: 0;
 background: url(bkgd.gif) repeat-x 0 0;
 }
 
 #main {
 margin: 0 auto;
 width: 600px;
 height: 100%;
 border-style: solid;
 border-width: 1px;
 text-align: center;
 background-color: #D5DCE4;
 }
 
 #area {
 border-style: solid;
 border-width: 0 0 1px 0;
 text-align: center;
 }
 
 //-->
 </style>
 
 </head>
 
 <body>
 
 <div id="main">
 
 <div id="area">
 row 1<br />
 row 1<br />
 row 1<br />
 row 1<br />
 row 1<br />
 row 1<br />
 </div>
 
 <div id="area">
 row 2<br />
 row 2<br />
 row 2<br />
 row 2<br />
 row 2<br />
 row 2<br />
 </div>
 
 <div id="area">
 row 3<br />
 row 3<br />
 row 3<br />
 row 3<br />
 row 3<br />
 row 3<br />
 </div>
 
 </div>
 
 </body>
 </html>
 [/code]

[upl-file uuid=6fc55fa7-49be-497a-bc77-e8ebd36a1ed8 size=881B]bkgd.gif[/upl-file]

@james_d_kellyauthorOct 17.2005 — #Thanks!! thats brilliant - much more clear and easy to read.

How would i get the impression of multiple colombs within the div tag containing "row2".

@tegraphixOct 17.2005 — #You would just float two divs (one left, one right) in the area where you want 2 columns.

[code=html]
 <!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>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style type="text/css">
 <!-- 
 html {
 height: 100%;
 } 
 
 body {
 height: 100%;
 margin: 0;
 padding: 0;
 background: url(bkgd.gif) repeat-x 0 0;
 }
 
 #main {
 margin: 0 auto;
 width: 600px;
 height: 100%;
 border-style: solid;
 border-width: 1px;
 text-align: center;
 background-color: #D5DCE4;
 }
 
 #area {
 border-style: solid;
 border-width: 0 0 1px 0;
 text-align: center;
 }
 
 #leftcolumn {
 float: left;
 width: 299px;
 border-style: solid;
 border-width: 0 1px 0 0;
 }
 
 #rightcolumn {
 float: right;
 width: 300px;
 }
 
 //-->
 </style>
 </head
 
 <body>
 <div id="main">
 
  <div id="area">
   row 1<br />
   row 1<br />
   row 1<br />
   row 1<br />
   row 1<br />
   row 1<br />
  </div>
 
  <div id="area">
   <div id="leftcolumn">
   row 2 left<br />
   row 2 left<br />
   row 2 left<br />
   row 2 left<br />
   row 2 left<br />
   </div>
   <div id="rightcolumn">
   row 2 right<br />
   row 2 right<br />
   row 2 right<br />
   row 2 right<br />
   row 2 right<br />
   </div>
   <div style="clear: both"></div>
  </div>
 
  <div id="area">
   row 3<br />
   row 3<br />
   row 3<br />
   row 3<br />
   row 3<br />
   row 3<br />
  </div>
 
 </div>
 
 </body>
 </html>
 [/code]

@james_d_kellyauthorOct 17.2005 — #Thanks! i think i getting to grips with it now, however i have another prolem, lol.

I want the div 'area' with copyright in to always be at the bottom of the main div 'area'. Ive tried

vertical-align: bottom;

but this didn't work!?

Can someone help me plz.

This is my code so far:

[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>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 <style type="text/css">
 <!--
 
 html {
 height: 100%;
 }
 
 body {
 height: 99.7%;
 margin: 0;
 padding: 0;
 background: url(bkgd.gif) repeat-x 0 0;
 }
 
 #main {
 margin: 0 auto;
 width: 600px;
 height: 100%;
 border-style: solid;
 border-width: 1px;
 text-align: center;
 background-color: #D5DCE4;
 }
 
 #header {
 border-style: solid;
 border-width: 0 0 1px 0;
 text-align: center;
 }
 
 #navcol1 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 1px 1px 0;
 }
 
 #navcol2 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 1px 1px 0;
 }
 
 #navcol3 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 1px 1px 0;
 }
 
 #navcol4 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 1px 1px 0;
 }
 
 #navcol5 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 1px 1px 0;
 }
 
 #navcol6 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 1px 1px 0;
 }
 
 #navcol7 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 1px 1px 0;
 }
 
 #navcol8 {
 float: left;
 width: 74px;
 border-style: solid;
 border-width: 0 0 1px 0;
 }
 
 
 #content {
 height: 60%;
 border-style: solid;
 border-width: 0 0 1px 0;
 text-align: center;
 }
 
 #copyr {
 border-style: solid;
 border-width: 0 0 0 0;
 text-align: center;
 line-height: 16px;
 background-color: #FFFFFF;
 font-size: 9px;
 font-family: Tahoma,Arial;
 
 }
 
 //-->
 </style>
 
 </head>
 
 <body>
 
 <div id="main">
 
 <div id="header">
 header<br />
 header<br />
 header<br />
 header<br />
 header<br />
 </div>
 
 
 
 <div id="navcol1">
 nav 1<br />
 </div>
 
 <div id="navcol2">
 nav 2<br />
 </div>
 
 <div id="navcol3">
 nav 3<br />
 </div>
 
 <div id="navcol4">
 nav 4<br />
 </div>
 
 <div id="navcol5">
 nav 5<br />
 </div>
 
 <div id="navcol6">
 nav 6<br />
 </div>
 
 <div id="navcol7">
 nav 7<br />
 </div>
 
 <div id="navcol8">
 nav 8<br />
 </div>
 
 
 
 <div id="content">
 <iframe name="ifmcont" src="home.html" height="425px" width="580px" frameborder="0" scrolling="no" allowtransparency="true" background-color="transparent"></iframe>
 </div>
 
 
 
 <div id="copyr">
 Website copyright © James Kelly 2005
 </div>
 
 
 </div>
 </body>
 </html>[/CODE]

@james_d_kellyauthorOct 17.2005 — #hi, again, ive been searching on google to try and find out how to get the background colour and text of a div to change when the mouse hovers over it, but have had no luck in understanding how to do it correctly.

Thanks for any help!

@LiLcRaZyFuZzYOct 17.2005 — #that doesn't work in IE

<i>
 </i>div.whatever{
 background-color: #ff0000;
 }
 div.whatever:hover{
 background-color: #000;
 }

@james_d_kellyauthorOct 19.2005 — #hi, that code didnt work (IE) im just gona use javascript instead.

Ive still got the problem where i need to vertically align a nested div to the bottom of its parent div, but vertical-align: bottom; does not work. How can i get the nested div to always be at the bottom of another div? (i want this to be a footer div containing copright notices).

thanks

Also in #CSS _↴

Older IE display issues background color problem font-weight question

Success!

Help @james_d_kelly spread the word by sharing this article on Twitter...

Tweet This

table alignment problem…

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

table alignment problem…

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴