XHTML Coding problem

bana · 11-08-2005

Hello

I hope you'll understand something

As the title said, ive a coding problem.

Im currently trying to create my first webby and so, the index page.
So im making a simple table with a 100% height (it's the problem) with a simple image, a background image for the whole page and another one for the table.
When the code is done, all works.
Now im trying to validate it for xhtml, so i put the correct doctype in the code, and when im seeking at the page, the height has moved to 100 px (the logo height).

I cant have the correct height for the table and i really dont know where's the problem....ive tried to use css to change it but always the same problem...

For information, i use :
Coding : dreamweaver mx & Notepad ++
Navigator : mozilla firefox

If anyone can help me, it'll be really great for me ^^
Thanks

ps: a pic which resume what ive said : linked pic

GoldNetX · 11-08-2005

Try adding into your CSS this:

Code:

min-height:100.1%;

Not sure if it will work, but you can give it a shot. May need to make it a larger value thatn 100.1

Also the reason you are getting the result you are is because of the way CSS functions. CSS when given a specific height will set itself to that, such as:

Code:

height:50px;

When using a percentage or the auto attribute, CSS will make the container a size relative to the items inside. It is sort of a conflict in the way developers and the language view hieght. CSS says height is based upon what is included inside it's container, while the designer might say height should be based upon the object relation to the screen size.

Hope that made some sense. I am pretty sure though, that somehow you can achieve the effect you want.

bana · 11-10-2005

Thanks for the answer, but dont change anything.
Like some friends, even i dont really know html, i dont really understand where the problem is....

It makes me crazy

...i think it's a stupid code error but cant find what sould i change....

If u can find something, here's the code :
Index.html file >

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">

</style>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100" border="0" cellpadding="0" cellspacing="0" class="index" style="height: 100%">
<tr>
<td><img src="logo_mid.gif" width="300" height="100" /></td>
</tr>
</table>
</body>
</html>

CSS File >

Quote:

.index {
background-image: url(back_mid.gif);
min-height:100.1%;
}

:}

kiek · 11-10-2005

If I get it right, you want to have the hole row with that picture right??

try to make your table bigger like.....

HTML Code:

 <tr>
<td><img src="logo_mid.gif" width="300" height="600" /></td>
</tr>
</table>
</body>
</html>

Order · 11-10-2005

Tables are tricky like that, what would be best is to make that image the pages background, and have a table that fits inside it.

so:

Code:

body {
   background: #FFF url('logo_mid.gif') repeat-y center center;
}

then remove the backgrounds from the table, adjust so your cells fit inside your new background, and you are good. Sometimes you have to thing outside of logic to make a design really flow.

j3ll3 · 12-20-2005

I dont get it, why would you use tables for your layout???????? That's just not done.

If you want to make your site VALID, you should use CSS.
Here is the answer for your problem:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	body {
		margin:0px;
	}
	
	#bg_image {
		width: 231px;  /* width of your image */
		height: 100%;
		left: 0px;
		top: 0px;
		position: absolute;
		z-index: 0;
	}
	
	#contents {
		z-index: 1;
		position: absolute;
	}
</style>
</head>

<body>
<!-- this creates the background image -->
<div id="bg_image"> <img src="background.jpg" style="width: 100%; height: 100%;" /> </div>
<!-- this puts the contents of the page ontop of the background image -->
<div id="contents"> This is a test. </div>
</body>

</html>

the image (background.jpg) is 231px wide, and it's in the same folder as the .htm file.

I saw this here:
http://www.htmlite.com/faq022.php

Good luck!

malboroman · 12-21-2005

also, as a sidenote, I have noticed that tables (or divs for that matter) don't expand to 100% unless you set height of the body itself. Here's a line I always put in my css.

Code:

body,html {
   height: 100%;
   width: 100%;
   padding: 0px;
   margin: 0px;
}

I put in the 'padding/margin: 0px;' because the body has a 5px p/m by default. I find it irritating when positioning my divs.