News:

Click here for Toll-Free Service for your business starting at $2.00 per month

Main Menu

Div/table layout trouble...

Started by Paris, April 22, 2006, 10:53:44 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Paris

April 22, 2006, 10:53:44 PM Last Edit: April 23, 2006, 12:44:48 AM by Paris
okay, this is my first time trying a div/table layout(first attempt at divs actually) and im having some trouble with the images being cut off too early and some padding issues.

heres the screenshot of the problems im having(highlighted in red):


Now, as you can see, the headers of the content boxes and the navigation boxes are being cut off partially.....and if they dont have text in them...they are not even being shown, i have no idea how to get around that.

Other than that, i am trying to use padding so i can position the header text, navigation links, and content text correctly in each div/image and am not able to make it work...im not sure what im doing wrong and why its not working.

Also, i am having a problem where the content box background is expanding to much to the right....and it doesnt really need to seeing as the text inside that div is fitting whithout any more expansion needed, from the right or left i mean.
EDITED= took care of this using the "background-repeat: repeat-y;" value.

Also, the divs are positioned a bit off when i look at the layout in IE instead of FF, how can i make this layout IE compatible?

Here's the code:
Code Select

<HTML>
<HEAD>
<TITLE>Charmed-Designs Inc.</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<BODY bgcolor="#7a7979" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<TABLE id="Table_01" width="800" height="900" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD background="Header.jpg" width="800" height="207">
</TD>
</TR>
<TR>
<TD background="background.jpg" width="800" height="100%">

<div style="position: absolute; left: 316px; top: 300px; width: 137px">
<div style="background: url(CDINCV5/l_nav_head.jpg) repeat;" "padding-bottom: 100px;">
<b>WELCOME</b>
</div>
<div style="background: url(CDINCV5/l_nav_bg.jpg) repeat;">
LINK here<BR>
LINK<BR>
LINK<BR>
LINK<BR>
LINK<BR>
LINK<BR>
</div>
<div style="background: url(CDINCV5/l_nav_foot.jpg) repeat;"></div>
</div>
<!----END LEFT NAVI-----></div><!----END LEFT NAVI---->

<div style="position: absolute; left: 454px; top: 400px; width: 351px">
<div height="46" style="background: url(CDINCV5/cont_head.jpg) no-repeat;">
<b>Welcome<br><br></b>
</div>
<div style="background: url(CDINCV5/cont_bg.jpg) repeat;" width="344" "padding-left: 30px;">

Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>
Write your text and content here.<br>

</div>
<div height="45" style="background: url(CDINCV5/cont_foot.jpg) no-repeat;"><BR><BR></div>
</div>

<div style="position: absolute; left: 799px; top: 300px; width: 134px">
<div style="background: url(CDINCV5/r_nav_head.jpg) no-repeat;">
<b>WELCOME</b>
</div>
<div style="background: url(CDINCV5/r_nav_bg.jpg) repeat;">
LINK here<BR>
LINK<BR>
LINK<BR>
LINK<BR>
LINK<BR>
LINK<BR>
</div>
<div style="background: url(CDINCV5/r_nav_foot.jpg) no-repeat;"></div>
</div>
</TD>
</TR>
<TR>
<TD background="footer.jpg" width="800" height="44">
</TD>
</TR>
</TABLE>
</center>
</BODY>
</HTML>


So if anyone can tell me how to get around these issues...and use divs properly to make this layout work that would be nice....ill be waiting...checking and rechecking this topic for new posts.....:D

Thanx, Paris.

hypnoticvibe

#1
April 23, 2006, 10:27:50 PM
http://forum.freepgs.com/index.php?topic=1086.0
Set up your entire page using the concept I posted in that thread.
Use
Code Select
top: NUMBERpx; instead for the vertical alignment of each table.

Paris

#2
April 26, 2006, 06:55:12 AM
wow....css is really faulty.....it think ill stick with tables, cause doing it the div way isnt ecaxtly cross browser safe you know, maybe when css is a little bit more reliable ill look into it, but for now tables looks the same on all browsers, as far as i know, so ill stick to that. :D

hypnoticvibe

#3
April 27, 2006, 01:40:40 AM Last Edit: April 27, 2006, 01:43:13 AM by hypnoticvibe
That code absolutely works in the main 3 browsers perfectly. I garuntee you. That's why I use it. I can't say which is better (tables vs. CSS) but I can tell you that code I posted is a godsend if you want it to customize your page for all 3. I'm no expert. I'm your average user with 3 browsers.
Print
Go Up Pages1
User actions