PDA

Click to See Complete Forum and Search --> : Everything I'm trying to get this table->CSS not working! :(

DanUK
04-23-2005, 06:43 PM
Hello.

I'm trying to make the following table look the same in CSS, but everything I'm trying is failing dramatically, unfortunately.

Any ideas on how to simply accomplish this? I'm sure I'll be utterly knocking my head on the table, whether this is lack of sleep (?) maybe....hehehe.


<table class="login" cellspacing="2" cellpadding="2">
<tr>
<td class="bg"><strong>Logged in as:</strong><br />username</td>
<td class="bg"><strong>IP address:</strong><br />111.111.111.111</td>
<td class="bg"><strong>Login date:</strong><br />23/04/2005</td>
<td class="bg"><strong>Login time:</strong><br />15:39:03 GMT</td>
<td class="bg"><form method="post" action="/logout.php"><input type="submit" name="logout" value="Log out" /></form></td>
</tr>
</table>


And the CSS.


table.login {
margin: 0px 0px 10px 0px;
width: 100%;
padding: 1px;
text-align: center;
border: 1px solid #b9b9b9;
}
tr.bg , td.bg {
background: url('img/nav.png');
}


Many thanks if you can help.
Sanim
04-23-2005, 07:03 PM
Get rid of the tr.bg in the CSS and see if it works.
DanUK
04-23-2005, 07:05 PM
Hiya.
There's no issue with it.

What I'm trying to do is change the table over to CSS, to use no table at all.
That's what I unfortunately cannot accomplish. :(

Thanks.
Sanim
04-23-2005, 07:07 PM
Oh. :P I'll open it in Dreamweaver and see what I can do.
Vladdy
04-23-2005, 07:08 PM
Proper HTML code is the prerequisite to CSS styling.
What you have there is a definition list not a table.
DanUK
04-23-2005, 07:20 PM
Vladdy, yes I realise that hence wanting to get it over from a table to CSS.
That's why I started this thread ...
Sanim
04-23-2005, 07:26 PM
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#bg div {
background: url('img/nav.png');
width: auto;
height: 40px;
float: left;
text-align: center;
border: 1px solid #b9b9b9;
}
</style>
</head>

<body>
<div id="bg">
<div><strong>Logged in as:</strong><br />username</div>
<div><strong>IP address:</strong><br />111.111.111.111</div>
<div><strong>Login date:</strong><br />23/04/2005</div>
<div><strong>Login time:</strong><br />15:39:03 GMT</div>
<div><form method="post" action="/logout.php"><input type="submit" name="logout" value="Log out" /></form></div>
</div>
</body>
</html>

If you want it centered, I'll have to do away with the float: left and use something else. Hope this helps :)
Vladdy
04-23-2005, 07:33 PM
Sanim, learn other elements besides <div> :rolleyes:

Dan, you do not convert a site from tables to CSS. The steps are
1. Create semantically meaningful HTML markup
2. Style it using CSS

You need to have step 1 before you can work on step 2.
Sanim
04-23-2005, 07:58 PM
Why? It does the same thing if you styled it as it would with a span or something.
Vladdy
04-23-2005, 08:15 PM
Why? It does the same thing if you styled it as it would with a span or something.
Because content is foundation for presentation :rolleyes:
Vladdy
04-23-2005, 08:17 PM
Why? It does the same thing if you styled it as it would with a span or something.
Why would you move away from tables?
Because content is foundation for presentation :rolleyes:
Sanim
04-23-2005, 08:22 PM
I meant that <div> does the same thing as <span> if you styled it.

Edit: or not... lol. I just noticed that there's no line break in between to spans, but there is a line break with divs. Sorry, Vladdy :p
Vladdy
04-23-2005, 08:34 PM
The point is that HTML element should reflect the content, not your desire to style it in a certain way. <div> and <span> are generic elements with no particular cemantic meaning and would not be found in an ideal document.
Sanim
04-23-2005, 08:52 PM
What do you suggest I use, then?
MstrBob
04-23-2005, 09:00 PM
I'd probably suggest a definition list.

<dl>
<dt>Logged in as:</dt><dd>username</dd>
<dt>IP address:</dt><dd>111.111.111.111</dd>
<dt>Login date:</dt><dd>23/04/2005</dd>
<dt>Login time:</dt><dd>15:39:03 GMT</dd>
</dl>