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.Get rid of the tr.bg in the CSS and see if it works.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.Oh.
I'll open it in Dreamweaver and see what I can do.Proper HTML code is the prerequisite to CSS styling.
What you have there is a definition list not a table.Vladdy, yes I realise that hence wanting to get it over from a table to CSS.
That's why I started this thread ...<!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
Sanim, learn other elements besides <div> 
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.Why? It does the same thing if you styled it as it would with a span or something.Why? It does the same thing if you styled it as it would with a span or something.
Because content is foundation for presentationWhy? 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 presentationI 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, VladdyThe 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.What do you suggest I use, then?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>
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.Get rid of the tr.bg in the CSS and see if it works.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.Oh.
I'll open it in Dreamweaver and see what I can do.Proper HTML code is the prerequisite to CSS styling.What you have there is a definition list not a table.Vladdy, yes I realise that hence wanting to get it over from a table to CSS.
That's why I started this thread ...<!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
Sanim, learn other elements besides <div> 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.Why? It does the same thing if you styled it as it would with a span or something.Why? It does the same thing if you styled it as it would with a span or something.
Because content is foundation for presentation
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
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
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.What do you suggest I use, then?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>