8 Replies - 3691 Views - Last Post: 22 August 2010 - 10:45 AM

#1 Suryc   User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 105
  • Joined: 15-August 10

My table won't fill up the left side

Posted 18 August 2010 - 06:08 PM

I'm trying to make a nav bar with a table, but the table stays in the middle of the content to the right (I'm terrible at explaining, I know).

Here's the 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>Version 2!</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<base target="_self" />
<meta name="description" content="Version 2 of Cyrus trying to learn HTML" />
<meta name="keywords" content="HTML, CSS, Suryc, Cyrus" />
<link rel="stylesheet" type="text/css" href="main.css" />
<body>
<h1 style="text-align:center">Welcome!</h1>
<table>
<td>
<div class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://google.com/">Google</a></li>
</ul>
</div>
</td>
<td>
<p>Welcome to my website. I am creating this to learn HTML, CSS and hopefully eventually Javascript. </p>
<!-- I put a line here to test the comment box -->
<hr />

<p>My second paragraph. I'll put a line break after this sentence to test it. <br />This is still the same paragraph, just 
on a different line. </p>

<p><b>This is bold text. </b><br /><big>This is big text. </big><br /><em>This is emphasized text. </em><br />
<i>This is italic text. </i><br /><small>This is small text. </small><br /><strong>This is strong text. </strong><br />
<sub>This is subscript text. </sub><br /><sup>This is superscripted text. </sup><br /><ins>This is inserted text. </ins><br />
<del>This is deleted text. </del>
</p>
<hr />
<p><code>This is computer code text. </code><br /><kbd>This is keyboard text. </kbd><br /><samp>This is sample computer code. </samp><br /><tt>This is teletype text. </tt><br /><var>This is a variable. </var><pre>This is preformatted text. </pre>
</p>
<hr />
<p><abbr>This defines an abbreviation. </abbr><br /><acronym>This defines an acronym. </acronym><br />
<address>This defines contact information. </address><br /><bdo>This defines the text direction. </bdo><br />
<blockquote>This defines a long quotation. </blockquote><br /><q>This defines a short quotation. </q><br />
<cite>This defines a citation. </cite><br /><dfn>This defines a definition term. </dfn>
</p>
<hr />
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<hr />
<ul>
<li>This is unordered list item #1</li>
<li>This is unordered list item #2</li>
<li>This is unordered list item #3</li>
</ul>
This is my ordered chore list:
<ol>
<li>Wash dishes</li>
<li>Wash car</li>
<li>Wash dog</li>
<li>Vacuum</li>
</ol>
<hr />

Time to test out some forms. 
<form>
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="password" /><br />
<input type="radio" name="sex" value="male" />Male<br />
<input type="radio" name="sex" value="female" />Female<br />
<input type="checkbox" name="transportation" value="bike" />I ride my bike. <br />
<input type="checkbox" name="transportation" value="car" />I drive a car. <br />
<input type="checkbox" name="transportation" value="walk" />I like to walk. <br />
<input type="submit" value="submit" />
</form>
<!-- I have no idea how to submit forms -->
<hr />
</td>
</body>
</html>


main.css
body
{
    background-color:#999;
}

div.navigation
{
    width:inherit;
    height:auto;
    padding:1px;
    border:none;
    float:left;
    background-color:#FFF;
}

div.navigation ul
{
    list-style-type:none;
}


The table on the left side (navigation) doesn't fill up all the way. It sort-of does what I wanted it to do, stay on the left side with no text going around it, but it just stays in the middle of the page. I've tried taking out the navigation tags, changing the height variable (I'm not sure what it's called) and removing the height thing. I don't know what to do to fix this. I want it to be at the top.

How can I fix this? I tried searching but my way of explaining means my search results aren't very well >.>

Is This A Good Question/Topic? 0
  • +

Replies To: My table won't fill up the left side

#2 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,993
  • Joined: 08-August 08

Re: My table won't fill up the left side

Posted 19 August 2010 - 06:03 PM

Don't use tables for formatting. That's what css is for.
Was This Post Helpful? 0
  • +
  • -

#3 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5552
  • View blog
  • Posts: 14,558
  • Joined: 18-April 07

Re: My table won't fill up the left side

Posted 19 August 2010 - 07:50 PM

On line 14 of your code, where you have that <td> tag, add the style style="vertical-align: top;"

So that part of the code looks like this after you are done...

<table>
<td style="vertical-align: top;">
<div class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://google.com/">Google</a></li>
</ul>
</div>
</td>



That will move your navigation to the top of the table cell. Secondly, don't forget to close your <head> tag. :)

P.S. CTphpnwb is right about using CSS for formatting in general... I personally use a mix of both tables and CSS because CSS itself is not perfect yet either.

This post has been edited by Martyr2: 19 August 2010 - 07:52 PM

Was This Post Helpful? 0
  • +
  • -

#4 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,993
  • Joined: 08-August 08

Re: My table won't fill up the left side

Posted 19 August 2010 - 08:05 PM

I use tables too, and for the same reason. The OP on the other hand seems to be using css as an adjunct to tables and that's a bad habit to form.
Was This Post Helpful? 0
  • +
  • -

#5 Sandi   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 18-November 07

Re: My table won't fill up the left side

Posted 19 August 2010 - 08:21 PM

Also as long as your using tables you don't need the div and <li>. You also need to add a <tr> row for your <td> if you want them on the same line.

This works with the navbar on top (starting at your line 13).

<table>
<tr>
<td class="navigation"><a href="index.html">Home</a></td>
<td class="navigation"><a href="http://google.com/">Google</a></td>
</tr>
<tr> <!-- also add tr for rest of page below nav -->
<td>


Drop the div on your css navigation so it can be used with table td.

Change
div.navigation


To:
.navigation

Was This Post Helpful? 0
  • +
  • -

#6 Suryc   User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 105
  • Joined: 15-August 10

Re: My table won't fill up the left side

Posted 20 August 2010 - 11:11 PM

View PostCTphpnwb, on 19 August 2010 - 05:03 PM, said:

Don't use tables for formatting. That's what css is for.


Noted, googled it and found a nice tutorial.

View PostMartyr2, on 19 August 2010 - 06:50 PM, said:

On line 14 of your code, where you have that <td> tag, add the style style="vertical-align: top;"

So that part of the code looks like this after you are done...

<table>
<td style="vertical-align: top;">
<div class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://google.com/">Google</a></li>
</ul>
</div>
</td>



That will move your navigation to the top of the table cell. Secondly, don't forget to close your <head> tag. :)

P.S. CTphpnwb is right about using CSS for formatting in general... I personally use a mix of both tables and CSS because CSS itself is not perfect yet either.


As I was going through the tutorial, Idk if it's just because I don't know all the methods, but it just sort of seems like I would need both to do some of the sites I'm thinking of making. And thanks for the help :]

View PostCTphpnwb, on 19 August 2010 - 07:05 PM, said:

I use tables too, and for the same reason. The OP on the other hand seems to be using css as an adjunct to tables and that's a bad habit to form.


Well what if you want to style the table? o.O Wouldn't you have to use CSS?

View PostSandi, on 19 August 2010 - 07:21 PM, said:

Also as long as your using tables you don't need the div and <li>. You also need to add a <tr> row for your <td> if you want them on the same line.

This works with the navbar on top (starting at your line 13).

<table>
<tr>
<td class="navigation"><a href="index.html">Home</a></td>
<td class="navigation"><a href="http://google.com/">Google</a></td>
</tr>
<tr> <!-- also add tr for rest of page below nav -->
<td>


Drop the div on your css navigation so it can be used with table td.

Change
div.navigation


To:
.navigation


Thank you very much :D
Was This Post Helpful? 0
  • +
  • -

#7 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,993
  • Joined: 08-August 08

Re: My table won't fill up the left side

Posted 21 August 2010 - 06:16 AM

View PostSuryc, on 21 August 2010 - 01:11 AM, said:

View PostCTphpnwb, on 19 August 2010 - 05:03 PM, said:

Don't use tables for formatting. That's what css is for.


Noted, googled it and found a nice tutorial.

View PostMartyr2, on 19 August 2010 - 06:50 PM, said:

On line 14 of your code, where you have that <td> tag, add the style style="vertical-align: top;"

So that part of the code looks like this after you are done...

<table>
<td style="vertical-align: top;">
<div class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://google.com/">Google</a></li>
</ul>
</div>
</td>



That will move your navigation to the top of the table cell. Secondly, don't forget to close your <head> tag. :)

P.S. CTphpnwb is right about using CSS for formatting in general... I personally use a mix of both tables and CSS because CSS itself is not perfect yet either.


As I was going through the tutorial, Idk if it's just because I don't know all the methods, but it just sort of seems like I would need both to do some of the sites I'm thinking of making. And thanks for the help :]

View PostCTphpnwb, on 19 August 2010 - 07:05 PM, said:

I use tables too, and for the same reason. The OP on the other hand seems to be using css as an adjunct to tables and that's a bad habit to form.


Well what if you want to style the table? o.O Wouldn't you have to use CSS?

Yes, but the point is that the information you're showing doesn't belong in a table. If you have information that needs to be shown in rows and columns then use a table. If you use a table for anything else then you're using a table for formatting and that is a very bad idea.
Was This Post Helpful? 2
  • +
  • -

#8 Lemur   User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1453
  • View blog
  • Posts: 3,633
  • Joined: 28-November 09

Re: My table won't fill up the left side

Posted 21 August 2010 - 06:16 PM

http://www.dreaminco...-design-basics/

Give that a read through, talks about how you can make a list behave like you want it to and make a pretty nice menu.
Was This Post Helpful? 1
  • +
  • -

#9 Suryc   User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 105
  • Joined: 15-August 10

Re: My table won't fill up the left side

Posted 22 August 2010 - 10:45 AM

View PostLemur, on 21 August 2010 - 05:16 PM, said:

http://www.dreaminco...-design-basics/

Give that a read through, talks about how you can make a list behave like you want it to and make a pretty nice menu.

Will definitely use this when I work on the next site (I scrapped this one :P), it's very informative and useful.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1