Forums > Help! > Web development help - navigation bar keeps moving

Login/Join to Participate

DeepSoulSheep
GOLD Member since Sep 2002

DeepSoulSheep

Carpal \'Tunnel
Location: Berlin, Ireland

Total posts: 2617
Posted:I'm doing my uncle a favour and building a small website for him.

I'm using a table with 2 rows and 2 columns as the main layout.
Top left a logo.
Top right the name
Lower left the navigation bar.
Lower right the main content part.

I'm having a problem I always seems to encounter though and cant get around. In the navigation cell I can't get the navigation bit to stay under the logo because it keeps sliding down the screen as the page gets longer. frown

I'm beginning to suspect that tables is not the way to do this but I don't have any knowledge of layers and that. Does anyone know what I'm doing wrong or how I can get around this? smile

Cheers
J


I live in a world of infinite possibilities.

Delete Topic

Dom
BRONZE Member since Dec 2001

Dom

Carpal \'Tunnel
Location: Bristol, UK

Total posts: 3009
Posted:It's basically impossible to say wot's broken without looking at the code. Is there a colspan on any columns?

If you can make the top nav bar of any site a separate table to the content - it'll load quicker and be easier to code.


Delete

mech
BRONZE Member since Jun 2003

mech

Carpal \'Tunnel
Location: "In your ear", United Kingdom

Total posts: 6207
Posted:as the main table of content gets bigger and longer, the table frame next to it will mirror size and shape, to counter this, if it getting longer, throw empty cells in under your nav table to keeep it in place, like standing stuff under it to make it higher!

Step (el-nombrie)

Delete

DeepSoulSheep
GOLD Member since Sep 2002

DeepSoulSheep

Carpal \'Tunnel
Location: Berlin, Ireland

Total posts: 2617
Posted:</font><blockquote><font class="small">Written by:</font><hr />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

A.imglink{

font : bold 9pt verdana, sans-serif;

color:black;

width:130px;

height:20px;

background:white url(/path/to/off.gif) no-repeat;

text-align:center;

padding-top:2px;

display:block;

text-decoration:none;

}

A.imglink:Hover{

font : bold 10pt verdana, sans-serif;

color:red;

text-decoration:none;

background:blue;



</style>



</head>

<!-- background:white url(/path/to/on.gif) no-repeat -->

<body>

<body>

<table width="100%" height="100%" border="0" bordercolor="#0000CC">

<tr>

<td width="20%" height="112" bgcolor="#0000CC"><img src="Fordfocus.jpg" width="197" height="104"></td>

<td width="80%" bgcolor="#0000CC"><h1>&nbsp;</h1></td>

<tr>

<!-- start of menu table -->

<td bgcolor="#0000CC" width-"20%">

<table align="center" cellpadding=0 cellspacing=0>

<tr>

<td><a href="#" class="imglink">Home</a> </td>

</tr>

<tr>

<td><a href="#" class="imglink">Where are we?</a> </td>

</tr>

<tr>

<td><a href="#" class="imglink">Cars</a> </td>

</tr>

<tr>

<td><a href="#" class="imglink">Finance</a> </td>

</tr>

<tr>

<td><a href="#" class="imglink">Contact us</a> </td>

</tr>

</table>

</td>

<!-- End of menu table -->

<td>

<p>hi</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p></td>

</tr>

</table>

</body></body>

</html>







Yea sorry I probably should've copied the code in here it is. As you can see the nav bar keeps slipping.



Edit: The 2 tables is a good idea but that's going to have the same problem me thinks. I'll try the propping up bit Mech and let you know.



Any other idea's'd be great. Thanks for the help so far smile

EDITED_BY: DeepSoulSheep (1089986133)


I live in a world of infinite possibilities.

Delete

mech
BRONZE Member since Jun 2003

mech

Carpal \'Tunnel
Location: "In your ear", United Kingdom

Total posts: 6207
Posted:try this, just copy and paste into what ever prog you are using,

for expample throw it into d-weaver and it will make th page for you, i have use a set of tables to support teh next table down, not the cleanest code, but im sure you can figure it out

laterdays


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="42%" height="95">&nbsp;</td>
<td width="58%">&nbsp;</td>
</tr>
<tr>
<td><table width="76%" border="0">
<tr>
<td> <table width="75%" border="0">
<tr>
<td><table width="75%" border="1">
<tr>
<td>Nav</td>
</tr>
<tr>
<td>frame</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>


Step (el-nombrie)

Delete

Dom
BRONZE Member since Dec 2001

Dom

Carpal \'Tunnel
Location: Bristol, UK

Total posts: 3009
Posted:You need valign="top" in the menu table's parent cells and you've got nested tables in there for some reason I can't make out.



Try not to use empty spacer cells or spacer gifs so much - they're messy and a work around so the page could just break again if the content gets longer.


Delete

DeepSoulSheep
GOLD Member since Sep 2002

DeepSoulSheep

Carpal \'Tunnel
Location: Berlin, Ireland

Total posts: 2617
Posted:I've tried putting columns in under the navigation bar and it still wont stay under the logo.

table align="center" cellpadding=0 cellspacing=0>
<tr>
<td><a href="#" class="imglink">Home</a> </td>
</tr>
<tr>
<td><a href="#" class="imglink">Where are we?</a> </td>
</tr>
<tr>
<td><a href="#" class="imglink">Cars</a> </td>
</tr>
<tr>
<td><a href="#" class="imglink">Finance</a> </td>
</tr>
<tr>
<td><a href="#" class="imglink">Contact us</a> </td>
</tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>

This seems like a pretty unelegant way of doing this anyway. Can anyone offer me any kind of solution just to have a navigation in the right place. Plleeeeaasseee help


I live in a world of infinite possibilities.

Delete

mech
BRONZE Member since Jun 2003

mech

Carpal \'Tunnel
Location: "In your ear", United Kingdom

Total posts: 6207
Posted:ill shut up then

Step (el-nombrie)

Delete

DeepSoulSheep
GOLD Member since Sep 2002

DeepSoulSheep

Carpal \'Tunnel
Location: Berlin, Ireland

Total posts: 2617
Posted:Mech....I posted that before I saw the code you posted. The way I was trying wasn't what you were talking about at all.



I had just spent the last 10 mintues putting the tags back into place on your code cause I thought is was such a cool way of doing it.



Sorry dude unelegent sounds bad....your way is anything but, the way I interpretted it and tried it was crap..... :blush:

EDITED_BY: DeepSoulSheep (1089988055)


I live in a world of infinite possibilities.

Delete

ado-p
GOLD Member since May 2004

ado-p

Pirate Ninja
Location: Galway/Ireland

Total posts: 3882
Posted:Written by:


<!-- start of menu table -->

<td bgcolor="#0000CC" width="20%" valign="top">







and bob's your granny



*edited to say that this works on the first piece of code you used above...*



and that while tables are lovely, they are also the enemy of my sanity *goes back to trying to convert triple frame pages into table pages*

EDITED_BY: ado-p (1089988438)


Love is the law.

Delete

ado-p
GOLD Member since May 2004

ado-p

Pirate Ninja
Location: Galway/Ireland

Total posts: 3882
Posted:must compliment mech on indentation, almost a lost art in HTML.

I so cant nest tables properly!!! frown


Love is the law.

Delete

musashii


musashii

starring Skippy the green llama
Location: Seattle, WA

Total posts: 1148
Posted:dunno if this is what you mean, but check the tables on the sides of this page, and other pages(how the right column images expand to fit the rest of the page), is that what you're looking for?

http://206.180.240.41/aboutUs.aspx
br>
just a quick post, I have an interview to run off to. Might be able to help out more later eh


First intention, then enlightenment..
Ars Pyronomica

" Life is programmed. Whether death is programmed or not is yet to be determined."

Delete