Page 1 of 1
[SOLVED] Converting table style to div style?
Posted: Fri Nov 30, 2007 10:05 pm
by Josh1billion
I'm trying to convert a table to div format, and it's not going very well, so I must be doing something very wrong with it. So I was hoping someone could give me some pointers on how to get started the correct way.
Here's the HTML:
Code: Select all
<table class='prettytable'>
<tr>
<td width='100'><b>To:</b></td>
<td width='400'><input type='text' name='recipient' value='$recipient' size='30'></td>
</tr>
<tr>
<td><b>Subject</b></td>
<td width='400'><input type=\"text\" name=\"subject\" value=\"$subject\" size=\"40\"></td>
</tr>
<tr>
<td><b>Message</b></td>
<td><textarea name='message' cols='45' rows='7'></textarea></td>
</tr>
<tr>
<td><b>Send</b></td>
<td><input type='submit' value='Send Message'></td>
</tr>
</table>
..and the style:
Code: Select all
table.prettytable {
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
table.prettytable th, table.prettytable td {
border: 1px #aaa solid;
padding: 0.2em;
}
table.prettytable th {
background: #f2f2f2;
text-align: center;
}
table.prettytable caption {
margin-left: inherit;
margin-right: inherit;
font-weight: bold;
}
table.prettytable code {
background-color: transparent;
}
What I tried to do was change the "th" of the table to a style called prettytable_row, and the "td" to a style called prettytable_col. Then I changed everything to div's, span's, and a combination of both. I also changed widths (like <td width='300'>) to be styles (like <div class='prettytable_col' style='width: 300px;'>).
It sort of worked, but instead of winding up with
this, I wound up with
this. So I'm just going to try again from square one.
So what I'm asking is: since I clearly must have went about this wrong when I tried it myself, how should I convert this to div/span format, the correct way? Which elements should be changed to div's, which to span's, or doesn't it matter? And is there something I should know about style='width: 300px;' on divs and spans (as it wasn't working on spans if my memory serves correctly).
Posted: Fri Nov 30, 2007 10:44 pm
by JellyFish
Here's a good example of a css form. I wouldn't go with a table-like approach. But instead I might use fieldset and label elements.
Check it out, I hope it turns out to be helpful.

Posted: Fri Nov 30, 2007 11:54 pm
by Josh1billion
That's very cool.

Unfortunately, it's much different from what I'm currently trying to do. Is there any way to make it look (with CSS) identical or nearly identical to what the table version of what I have now looks like?
Fun fact: the "prettytable" class is borrowed from Wikipedia. Thanks Wikipedia!

Posted: Sat Dec 01, 2007 12:12 am
by matthijs
Here's the most basic css-styled form:
Code: Select all
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span></label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<p><input id="submit" class="submit" name="submit" type="submit"/></p>
</form>
Code: Select all
* { margin:0;padding:0;}
body { font-size:12px;line-height:18px;}
form { margin:10px;padding:10px;background:#f2f2f2; }
fieldset { }
fieldset p { padding:5px 10px;}
label { float:left;width:200px;margin-right:10px; }
input[text] { width:180px;}
.required { font-size:80%;}
form fieldset p { position:relative; }
.feedback { position:absolute;left:410px;color:#900; }
The essential is floating the lables to the left.
[edit:saw your reply]
you should be able to style my example in a way it looks like yours.
Posted: Sat Dec 01, 2007 12:23 am
by Josh1billion
How do I make the columns line up like this, though?:
And with a border and background preferably.. though I could probably figure that much out on my own.

Posted: Sat Dec 01, 2007 12:51 am
by matthijs
Well, you could do something like:
Code: Select all
fieldset div { padding:0px 10px;}
fieldset div { float:left;width:100%;clear:both; }
fieldset div div.box { float:left;width:210px;height:25px;clear:none;padding:5px 0;border:1px solid #444;border-width:1px 1px 1px 0;}
fieldset div div.box.first { border-width:1px;}
Code: Select all
<div>
<div class="box first">
<label for="author">Name: <span class="required">(Required)</span></label>
</div>
<div class="box">
<input name="author" id="author" type="text" />
</div>
</div>
<div>
<div class="box first">
<label for="email">Email Address: <!--<span class="feedback">Incorrect email address. Please try again.</span>--></label>
</div>
<div class="box">
<input name="email" id="email" type="text" />
</div>
</div>
And adjust borders and padding to your liking.
But I think this gets a bit messy. If you want to make it look and behave like a table, why not just use a table? Just make sure to use proper labels in your form and mark up your table correctly (accessibility).
Posted: Sat Dec 01, 2007 1:14 pm
by Josh1billion
matthijs wrote:If you want to make it look and behave like a table, why not just use a table?
Because some changes I've made to my layout now make all tables appear outside of the columns.. it's weird. But I'm supposed to have a table displaying in the middle column (between the left and right navigation bars), and instead it's being displayed to the right of the right navigation bar. It used to work fine until I recently added the right navigation bar (going from two columns to three).
It's weird, but it seems to be a problem with using tables instead of div's, since when I changed the table/td/th/tr tags to divs, it all appeared in the correct column (the middle one). It just formatted incorrectly because of differences between divs and tables apparently...
I'll take a look at your code and test it out, then edit my post once I'm done...
Edit: I don't see the idea behind that code.. the result is just a regular, unformatted form? I'm not just using the table for forms, I'm also using it for other displays of information too, in a nice boxed format like shown above
Posted: Sat Dec 01, 2007 2:38 pm
by Josh1billion
Maybe the better solution to my problem would be to find out why the tables aren't working with the layout. I tried the table in another CSS layout, a very similar one, and it worked fine.
This is what the basic problem is:
http://img64.imageshack.us/img64/9233/tablewrongkc2.png
As you can see, I have three div columns, and the table is shown outside of all three instead of inside of the middle one.
EDIT: Okay, found it, sort of...
The problem is coming with the navigation bar (the blue one which says Home / Forums / Logout) apparently. Upon removal of that HTML, everything works fine.
I don't see anything wrong with the code.. do you? Removing the following HTML snippet solves the problem (but of course, removes the navigation bar...).
HTML code for navigation bar:
Code: Select all
<!-- Begin Navigation -->
<div id="navigation">
<div class="menu_left"></div>
<div class="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="forums/index.php">Forums</a></li>
<?php
if (isset($username))
print "<li><a href='logout.php'>Logout</a></li>";
else
{
print "<li><a href='register.php";
// get $referrer ready if it is passed through the URL (as a $_GET variable)
if (isset($referrer))
unset($referrer);
if (isset($_GET['referrer']))
$referrer = strip_tags(mysql_real_escape_string($_GET['referrer']));
if (isset($referrer))
print "?referrer=$referrer";
print "'>Create Account</a></li><li><a href='login.php'>Login</a></li>";
}
?>
</ul>
</div>
<div class="menu_right"></div>
</div>
<!-- End Navigation -->
Stylesheet entries for that navigation bar:
Code: Select all
#navigation {
float : left;
width : 100%;
color : #333;
margin : 0 0 0 0;
background : #fff;
}
.menu {
background : #fff url(images/nav_repeat.png) repeat-x;
height : 40px;
float: left;
width: 90%;
}
.menu_left {
float: left;
width: 35px;
height: 40px;
background : #fff url(images/nav_left.png) no-repeat;
}
.menu_right {
float: left;
width: 35px;
height: 40px;
background : #fff url(images/nav_right.png) no-repeat;
}
.menu ul {
list-style : none;
padding : 7px 0 10px 0;
margin : 0;
text-align : center;
padding: 12px 0em 10px 0em;}
.menu li {
padding : 0 1em 0 1em;
display : inline;
}
.menu li a {
color : #002870;
font-weight : bold;
text-decoration : none;
font-size : 1em;
}
.menu li a:hover {
color : #e78229;
text-decoration : none;
}
Posted: Sat Dec 01, 2007 5:11 pm
by Josh1billion
Ok, nevermind about all this.
In my last post, you see that I found the problem was gone when I removed the navigation bar. So to solve this problem, I have removed the navigation bar on pages which use this table. Now all is more or less good.

Posted: Sat Dec 01, 2007 6:42 pm
by JellyFish
If it's not to late, I've whipped this up for you. I don't know how good of an example it is but it's an example, and maybe better then a table.
My example.
I don't know, check it out.
Posted: Sat Dec 01, 2007 7:27 pm
by Josh1billion
That looks awesome, thanks for that.

I'll keep this thread bookmarked and hopefully I'll be not too lazy to switch it in sometime.
