HTML/CSS question

Glaanieboy

OSNN Veteran Addict
Joined
6 Mar 2002
Messages
2,628
OK, here is what I want to do. I am redisigning my website for school (Can only be accessed locally, it runs on the internal network). I used frames for the last page, but I want to get rid of them.
Now I want to put it into one file, but with a left side bar for the menu. This side bar must have a different color than the rest of the page.
Here is what I have atm (the code is till a little rough):
index.php
Code:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
       <link href="style.css" rel="stylesheet" type="text/css">
       <title>Title here!</title>
</head>
<body>
<table>
<tr>
<td class="side">
<a href="?page=main">Mainpage</a><br />
<a href="?page=drv">Drivers and Service Packs</a>
</td>
<td>
Mainpage bladieblabla
</td>
</tr>

</table>
</body>
</html>

and here is the CSS file:
style.css
Code:
body {
  font-family: Arial;
  font-size: 80%;
  color: #000000;
}

table {
  width : 100%;
  height : 100%;
}

td.side {
  border-style : none solid none none;
  border-right-width : thin;
  width : 50%; (only as a test, my final page won't have a 50% wide sidebar of course)
  height : 100%;
  background-color : yellow;
}

The problem is that somehow my <table> and <td> aren't 100% high, it is only as high as the text I typed in it, but the width is correctly parsed (as 50% wide). This happens both in Internet Explorer and Mozilla Firebird. Can someone explain why this happens and how I can do it correctly?
 
it is because height is relative when set in percents, try using pixels, ie height:400px;

I can t see that background color, you shouldn't use generic color tems, try #FFFF00

(Also you have <br /> which is for XHTML)
 
ok, check these out;

body {
font-family: Arial, sans-serif; /* always include sans-serif */
font-size: 80%;
background-color : #ffffff;
color: #000000;
}

table {
width : 100%;
height : 100%;
}

td {
vertical-align : top;
}

td.side {
vertical-align : top;
border-style : none solid none none;
border-right-width : thin;
width : 50%;
height : 400px;
background-color : #FFFF00;
color : #000000; /* if you specify the background color, you need to also specify the font color and vice versa */
}

and

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Title here!</title>
</head>
<body>
<table>
<tr>
<td class="side">
<a href="?page=main">Mainpage</a><br>
<a href="?page=drv">Drivers and Service Packs</a>
</td>
<td>
Mainpage bladieblabla
</td>
</tr>
</table>
</body>
</html>
 
Do note, that if you use pixels, and you go over the set limit, and anything else is after that page like shown at http://spooged.net/blog.php it wont be all nice, and it will walk over the other stuff.

Causing the page to look pretty bad. I never use height personally, i just add more content to push it further down the page =).
 
Thanks. I already solved it by doing this:
Code:
body {
  font-family: Arial;
  font-size: 80%;
  background-image: url(images/01001011.jpg);
  background-repeat: repeat;
  color: #FFFFFF;
  background-attachment: fixed;}

table {
  width : 100%;
  height : 100%;
}

td.side {
  background-image: url(images/10110100.jpg);
  background-repeat: repeat;
  color: #FFFFFF;
  background-attachment: fixed;
}

and
Code:
<html>
<head>
    <title>Nieuwe pagina 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<table><tr><td style="width : 20%;" class="side">
[...The rest...]

Now I have a dark image for the main document, but the menu has a light image (the same as the dark image, but with inverted colors). Thanks for trying. :thumbsup:
 

Members online

No members online now.

Latest profile posts

Also Hi EP and people. I found this place again while looking through a oooollllllldddd backup. I have filled over 10TB and was looking at my collection of antiques. Any bids on the 500Mhz Win 95 fix?
Any of the SP crew still out there?
Xie wrote on Electronic Punk's profile.
Impressed you have kept this alive this long EP! So many sites have come and gone. :(

Just did some crude math and I apparently joined almost 18yrs ago, how is that possible???
hello peeps... is been some time since i last came here.
Electronic Punk wrote on Sazar's profile.
Rest in peace my friend, been trying to find you and finally did in the worst way imaginable.

Forum statistics

Threads
62,015
Messages
673,494
Members
5,621
Latest member
naeemsafi
Back