PDA

View Full Version : CSS formation problems (Warning! - Long)

BoR|S
04-17-2003, 08:11 AM
I made a webpage using tables, here is it's code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS try</title>
<style type="text/css">
body { margin:0px 0px 0px 0px; background-color:#000000; color:#000; text-align:center }
</style>
</head>
<body>
<table border="0" width="696" cellpadding="0" cellspacing="0">
<tr width="696">
<td width="18" background="_forum_bg_left.gif"></td>
<td width="660">
<table border="0" width="660" cellpadding="0" cellspacing="0">
<tr width="660">
<td width="660" height="20" bgcolor="#eeeeee">Website slogan will be here</td>
</tr>
<tr width="660">
<td width="660" height="60" bgcolor="#dddddd"><img src="logo.gif" border="0" width="660" height="60" alt="Logo"></td>
</tr>
<tr width="660">
<td width="660" height="20" bgcolor="#eeeeee">Menu will be here</td>
</tr>
<tr width="660">
<td width="660">
<table border="0" width="660" cellpadding="0" cellspacing="0">
<tr width="660">
<td width="20" height="20" bgcolor="#dddddd"><img src="left.gif" border="0" width="20" height="20" alt="Go!"></td>
<td width="160" height="20" bgcolor="#ffffff" align="center">Date will be here</td>
<td width="20" height="20" bgcolor="#dddddd"><img src="dio.gif" border="0" width="20" height="20" alt=""></td>
<td width="440" height="20" bgcolor="#ffffff" align="right">Title will be here</td>
<td width="20" height="20" bgcolor="#dddddd"><img src="here.gif" border="0" width="20" height="20" alt="Open"></td>
</tr>
</table>
</td>
</tr>
<tr width="660">
<td width="660">
<table border="0" width="660" cellpadding="0" cellspacing="0">
<tr width="660">
<td width="500" height="160" bgcolor="#cccccc" align="right" valign="top">Text will be here</td>
<td width="160" height="160" bgcolor="#cccccc"><img src="image1.gif" border="0" width="160" height="160" alt="Image1"></td>
</tr>
</table>
</td>
</tr>
<tr width="660">
<td width="660">
<table border="0" width="660" cellpadding="0" cellspacing="0">
<tr width="660">
<td width="20" height="20" bgcolor="#dddddd"><img src="left.gif" border="0" width="20" height="20" alt="Go!"></td>
<td width="160" height="20" bgcolor="#ffffff" align="center">Date will be here</td>
<td width="20" height="20" bgcolor="#dddddd"><img src="dio.gif" border="0" width="20" height="20" alt=""></td>
<td width="260" height="20" bgcolor="#ffffff" align="right">Title will be here</td>
<td width="20" height="20" bgcolor="#dddddd"><img src="dio.gif" border="0" width="20" height="20" alt=""></td>
<td width="20" height="20" bgcolor="#dddddd"><img src="dio.gif" border="0" width="20" height="20" alt=""></td>
<td width="20" height="20" bgcolor="#dddddd"><img src="dio.gif" border="0" width="20" height="20" alt=""></td>
<td width="120" height="20" bgcolor="#ffffff" align="center">Title</td>
<td width="20" height="20" bgcolor="#dddddd"><img src="here.gif" border="0" width="20" height="20" alt="Open"></td>
</tr>
</table>
</td>
</tr>
<tr width="660">
<td width="660">
<table border="0" width="660" cellpadding="0" cellspacing="0">
<tr width="660">
<td width="500" height="160" bgcolor="#dddddd" align="right" valign="top">Text will be here</td>
<td width="160" height="160" bgcolor="#dddddd"><img src="image1.gif" border="0" width="160" height="160" alt="Image1"></td>
</tr>
</table>
</td>
</tr>
<tr width="660">
<td width="660" height="20" bgcolor="#eeeeee">Copyright notice will be here</td>
</tr>
</table>
</td>
<td width="18" background="_forum_bg_right.gif"></td>
</tr>
</table>
</body>
</html>
BoR|S
04-17-2003, 08:12 AM
Then I made this page using CSS instead of tables and here it's code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS try</title>
<style type="text/css">
body { margin:0px 0px 0px 0px; background-color:#000000; color:#000; text-align:center }
#frame { width:696px; margin-right:auto; margin-left:auto; margin-top:0px; padding:0px; text-align:left }
#borderleft { width:18px; background-image:url("_forum_bg_left.gif"); background-repeat:repeat-y; float:left }
#content { width:660px; height:440px; padding:0px; float:left; text-align:center }
.fulline { width:660px; height:20px; float:left; text-align:center }
.sqa { width:20px; height:20px; float:left; text-align:center }
.godate { width:160px; height:20px; float:left; text-align:center }
.titl { width:260px; height:20px; float:left; text-align:right }
.titl2 { width:120px; height:20px; float:left; text-align:center }
.titlong { width: 440px; height:20px; float:left; text-align:right }
#logo { background-color:#bbb; color:#000; width:660px; height:60px; text-align:center }
.left { background-color:#ccc; color:#000; width:500px; height:160px; padding:0px; float:left; text-align:right }
.right { background-color:#ccc; color:#000; width:160px; height:160px; padding:0px; float:left }
#borderright { width:18px; background-image:url("_forum_bg_right.gif"); background-repeat:repeat-y; float:left }
</style>
</head>
<body>
<div id="frame">
<div id="borderleft"></div>
<div id="content">
<div class="fulline" style="background-color:#eee; color:#000">Website slogan will be here</div>
<div id="logo"><img src="logo.gif" border="0" width="660" height="60" alt="Logo"></div>
<div class="fulline" style="background-color:#eee; color:#000">Menu will be here</div>
<div class="fulline">
<div class="sqa" style="background-color:#ddd; color:#000"><img src="left.gif" border="0" width="20" height="20" alt="Go!"></div>
<div class="godate" style="background-color:#fff; color:#000">Date will be here</div>
<div class="sqa" style="background-color:#ddd; color:#000"><img src="dio.gif" border="0" width="20" height="20" alt=""></div>
<div class="titlong" style="background-color:#fff; color:#000">Title will be here</div>
<div class="sqa" style="background-color:#ddd; color:#000"><img src="here.gif" border="0" width="20" height="20" alt="Open"></div></div>
<div class="left" style="background-color:#ccc; color:#000">Text will be here</div>
<div class="right" style="background-color:#ccc; color:#000"><img src="image1.gif" border="0" width="160" height="160" alt="Image1"></div>
<div class="fulline">
<div class="sqa" style="background-color:#ddd; color:#000"><img src="left.gif" border="0" width="20" height="20" alt="Go!"></div>
<div class="godate" style="background-color:#fff; color:#000">Text link will be here</div>
<div class="sqa" style="background-color:#ddd; color:#000"><img src="dio.gif" border="0" width="20" height="20" alt=""></div>
<div class="titl" style="background-color:#fff; color:#000">Title will be here</div>
<div class="sqa" style="background-color:#ddd; color:#000"><img src="here.gif" border="0" width="20" height="20" alt="Open"></div>
<div class="sqa" style="background-color:#ddd; color:#000"><img src="here.gif" border="0" width="20" height="20" alt="Open"></div>
<div class="sqa" style="background-color:#ddd; color:#000"><img src="here.gif" border="0" width="20" height="20" alt="Open"></div>
<div class="titl2" style="background-color:#fff; color:#000">Title</div>
<div class="sqa" style="background-color:#ddd; color:#000"><img src="here.gif" border="0" width="20" height="20" alt="Open"></div></div>
<div class="left" style="background-color:#ddd; color:#000">Text will be here</div>
<div class="right" style="background-color:#ddd color:#000"><img src="image2.gif" border="0" width="160" height="160" alt="Image2"></div>
<div class="fulline" style="background-color:#eee; color:#000">Copyright notice will be here</div></div>
<div id="borderright"></div></div>
</body>
</html>
BoR|S
04-17-2003, 08:19 AM
I have two problem with the CSS version:

The border in the CSS version shows only for the first line, and not for the entire page (see attached screenshot).
Instead of showing this part as one line, it shows each component on the next line (FIXED: I just added the float attribute and now it works).
[/list=1]

Attached screenshot:
[list]
Top - The CSS version output in MSIE6.
Bottom - The Tables version output in MSIE6.


Anyone sees the problem?

P.S. Don't mind the "Unregistred" banner, it's because I converted to gif with a trail version of a converter.
P.P.S If you need, I uploaded the border graphics files (_forum_bg_left.gif (http://forums.ort.org.il/files/30/1743768/5870755.gif) and _forum_bg_right.gif (http://forums.ort.org.il/files/30/1743769/2596418.gif)).
DCElliott
04-17-2003, 06:09 PM
Boris

For starters, put a height:480px; in your borderright and borderleft divs for now. They don't "know" how high they are supposed to be. Also, whenever you have a div, put something in it, at least a '&nbsp;' so that the div will assert itself.

That may get you going a bit. It is late here and it has been a long short week, if ya know what I mean.

DE
BoR|S
04-18-2003, 12:40 AM
Originally posted by DCElliott
Boris

For starters, put a height:480px; in your borderright and borderleft divs for now. They don't "know" how high they are supposed to be. Also, whenever you have a div, put something in it, at least a '&nbsp;' so that the div will assert itself.

That may get you going a bit. It is late here and it has been a long short week, if ya know what I mean.

DE

Well, it could be a good solution, for static size webpage...
I plan the page size to be dynamic (clicking on a text will unfold/fold it, clicking on a menu will unfold/fold it)... I don't think I want to mess with a text that will find out the current page height and then will apply the value to the borders height...
Why can't it act like a normal background? I was told that background-repeat:repeat-y will do it, but it seems it doesn't...
DCElliott
04-18-2003, 10:47 AM
Boris, a div will only be as large as its content. In the case of the border divs, they have no content to stretch their height. If you based your page on window height as I did with the ones on my website you can assert div heights as a % of the browser viewport. Otherwise you are left with static heights because the border divs don't get stretched by your content.

DE