5 replies to this topic

[chriggi]

Hello!

I converted the tables of my website to XHTML valid tags and CSS DIVS (with this tut: http://www.pixel2life.com/twodded/t_conver..._layout/page8/) . Now that I don't have any tables anymore...how can I get the nav to stretch to the content?
Here's the site: http://www.aisolutio...sites/index.htm

BTW: In Internet Explorer the footer of the right box isn't right :S Why is it like that?

Thanks for your help in advance !

peace


((I made the template my self and I also coded it my self....the text is taken form a template of zymic.com....))

Edited by chriggi, 02 March 2006 - 03:08 PM.

[raenef]

Hello chriggi,
First of all lemme say thank you for enjoying my tutorial
Secondly I do believe I've come up witha quick-fix for this situation:

#1 Save this image as barbg.png and upload it to your images/ folder.
That image is a background-image and will be used to make it look like all 3 of your content boxes.

#2: Save this image as bottom.png and upload it to your images/ folder.
That image is the bottom borders of all 3 of your content boxes.

Now then now that you have your images uploaded to your server. Delete all 3 images from your source-code, the images that are in the nav_btm, content_btm, and news_btm divs. (Because we no longer need these bottom borders as we're about to use new ones.) Now, add <img src="images/bottom.png" width="702" height="1" alt="Bottom Borders" /> in your footer div. Just before your copyright image. This will add the bottom borders for your content boxes to your page.
Save and upload your new index.html

Now heres your new CSS I've made a few changes to such as adding the new background-image to your container div, and adding defninitions to your footer div. Telling it to clear: both, and giving it a width, and height attribute:

body{
background-image: url(images/bg.jpg) !important;
background-repeat: repeat;
text-align: center; /*centers our layout in some browsers*/
}
#container{
width: 702px; /*The width of our layout*/
height: auto;
background-image: url(images/barbg.png) !important;
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
/*Margin left and right set to auto center's our layout*/
text-align: left; /*Resets the text alignment*/
}
#banner{
width: 702px;
height: 166px;
}
#left{
width: 195px;
float: left;
}
#nav_mid{
background-image: url(images/index_10.jpg) !important;
background-repeat: repeat-y
font-family: Verdana, arial, sans-serif;
font-size: 12px;
color: #000000;
padding: 10px;
}
#center{
width: 311px;
float: left;
}
#content_mid{
background-image: url(images/index_11.jpg) !important;
background-repeat: repeat-y
font-family: Verdana, arial, sans-serif;
font-size: 12px;
color: #000000;
padding: 10px;
}
#right{
width: 196px;
float: right;
}
#news_mid{
background-image: url(images/index_12.jpg) !important;
background-repeat: repeat-y
font-family: Verdana, arial, sans-serif;
font-size: 12px;
color: #000000;
padding: 10px;
}
#footer{
width: 702px;
height: 19px;
clear: both;
}

Note: that the clear: both in your footer should fix your IE problem as well.
Tested In: Firefox, Opera, IE7, Netscape and Flock
Now then I hope that was understandable. If you have any further questions please feel free to ask. Good luck

[rc69]

Once again, raenef wrote to much for me to voluntarily read. So, let me redirect you to another topic that, if i'm not mistaken, covers your problem.
http://www.pixel2life.com/forums/index.php...ndpost&p=126869

[chriggi]

Hey!

Thanks you both very much!


I used raenefs version and it's works perfect...but there's still some problem in IE..:S how to fix that? (the colors are a bit wrong :S)...?

[raenef]

Oh my apologies, it is probably due to a difference in image-quality. (using jpg for the background of your columns and I used png for the background of the container)
So since it would probably be better to work from the original, just do what I did in your graphic program of choice, and replace the two images I came up with.
1: create a 702px x 2px background image containing the background for all 3 of your content areas (save as .jpg)
2: create a 702 x 1px background image containing the bottom borders (save as .jpg)
Good luck

[chriggi]

Hi!

Ok the problem is now fixed!

Thanks again for all the help and especially for your superb tutorial!

peace