[SOLVED] Converting table style to div style?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

[SOLVED] Converting table style to div style?

Post 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).
Last edited by Josh1billion on Sat Dec 01, 2007 5:12 pm, edited 1 time in total.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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. :)
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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! :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post by Josh1billion »

How do I make the columns line up like this, though?:

Image

And with a border and background preferably.. though I could probably figure that much out on my own. :P
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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).
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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;
} 
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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. :)
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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.
Last edited by JellyFish on Mon Dec 03, 2007 4:27 pm, edited 1 time in total.
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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. :)
Post Reply