• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

HTML/CSS question

#1
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?
 

j79zlr

Glaanies script monkey
Political User
#2
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)
 

j79zlr

Glaanies script monkey
Political User
#3
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>
 

X-Istence

*
Political User
#4
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 =).
 
#5
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 posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,961
Messages
673,239
Members
89,016
Latest member
ernestrojasn