4 Replies - 516 Views - Last Post: 19 August 2010 - 03:47 AM

#1 Suryc  Icon User is offline

  • D.I.C Head

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

Keep the menu going down

Posted 17 August 2010 - 09:24 PM

This is my source code:

<!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>

<div class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://google.com/">Google</a></li>
</ul>
</div>

<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 />
</body>
</html>


and the .css (main.css):

div.navigation
{
    width:inherit;
    height:inherit;
    padding:1px;
    border:none;
    float:left;
}

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


(I know it's probably very messy; I'm still learning)

I want the menu on the left to go straight down as far as the page keeps going, like how the normal page expands if you fill it with things. They do it on W3S:

http://www.w3schools...ound-repeat.asp

You can see an example of what I mean by how the menus on the left and right go down as far as the content goes. What would I have to do for that?

This post has been edited by Suryc: 17 August 2010 - 09:25 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Keep the menu going down

#2 psyking  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 165
  • Joined: 17-January 10

Re: Keep the menu going down

Posted 17 August 2010 - 09:40 PM

I'm pretty sure that they use tables. That's probably going to be the easiest way for you to achieve what you want.
Was This Post Helpful? 1
  • +
  • -

#3 Suryc  Icon User is offline

  • D.I.C Head

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

Re: Keep the menu going down

Posted 17 August 2010 - 10:04 PM

View Postpsyking, on 17 August 2010 - 08:40 PM, said:

I'm pretty sure that they use tables. That's probably going to be the easiest way for you to achieve what you want.

Ah, that is what they did. I was originally too stupid to check the source XD I always forget you can do that. Thanks mate! :D

EDIT: Aww damn, I was trying to do the table thing and I ran into a problem. Here is the updated source 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 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?

This post has been edited by Suryc: 17 August 2010 - 10:28 PM

Was This Post Helpful? 0
  • +
  • -

#4 psyking  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 165
  • Joined: 17-January 10

Re: Keep the menu going down

Posted 18 August 2010 - 09:02 PM

Try doing the whole thing as a table, see how that works.
Was This Post Helpful? 0
  • +
  • -

#5 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Keep the menu going down

Posted 19 August 2010 - 03:47 AM

There are a ton of tutorials about two column CSS layouts that stretch like that. Tables should never be used for layout. Google for those.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1