Hi i want to make flexible css layout - it should look like this img
http://img388.imageshack.us/img388/2708/99572997te6.jpg
And as You see - first div is top ( some jpg's ), bellow is menu and some flash div. The most important div is called content. I want to have layout which will fill to content - I am using 1280x1024 but I know that some people are still using 1024x768 so i need to make site which will work and look fine on each resolution. There is also a footer - I want to have footer on the bottom of the site - always. There are some blue divs on the left and right side. These are some graphics which will repeat in vertical ( repeat-y ) but i can't make site which will work properly :/ and the worst is I dont know where i have taken mistakes. :/ please help me
I have also some code but it is for nothing;/
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="generator" content="Notepad" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Ahlborn Polska</title> <style type="text/css"> body {margin:0;padding:0;background:#e9dcbf;text-align:center;} html, body {height: 100%;} #menu A:link {color:#336699;text-decoration: none; } #menu A:Visited {color:#336699;text-decoration: none; } #menu A:Hover {color:#336699;border-bottom:4px solid #337799;} #footer A:link {color:#336699;text-decoration: none; } #footer A:Visited {color:#336699;text-decoration: none; } #footer A:Hover {color:#336699;text-decoration: underline; } #all {text-align:center;margin-left:auto;margin-right:auto;width:1024px;height:100%;} #left_bar {width:131px;height:100%;background:url(images/BART_01.jpg) repeat-y;float:left;} #right_bar {width:131px;height:100%;background:url(images/BART_03.jpg) repeat-y;float:left;} #center {width:762px;height:100%;background:#ebdfcf;float:left;overflow:hidden;} #logo {width:762px;height:122px;background:url(images/BART_02.jpg) no-repeat;overflow:hidden;} #menu {width:762px;height:30px;background:#ffffff;text-align:center;overflow:hidden;font-weight:bold;color:#336699;font-family:tahoma;font-size:13px;} #top {width:762px;height:184px;background:url(images/BART_07.jpg) no-repeat;overflow:hidden;} #content {width:762px;height:402px;background:#ebdfcf;font-family:Times New Roman;font-size:16px;font-weight:bold;color:#374047;text-align:left;} #border {height:5px;width:762px;background:#cab68b;overflow:hidden;} #footer {height:25px;width:762px;background:#ffffff;padding-top:3px;overflow:hidden;} #menu td {padding-left:10px;} </style> </head> <body> <div id="all"> <div id="left_bar"></div> <div id="center"> <div id="logo"></div> <div id="menu"> <table style="border:0;padding:0;margin:0;height:30px;margin-left:auto;margin-right:auto;text-align:center;"> <tr> <td><a href="#">Strona Główna</a></td> <td><a href="#">Historia</a></td> <td><a href="#">Produkty</a></td> <td><a href="#">News</a></td> <td><a href="#">Instalacja</a></td> <td><a href="#">Kontakt</a></td> </tr> </table> </div> <div id="top"></div> <div id="content"> <table> <tr><td> Rzadko wewnętrzna sprzeczność pomiędzy tradycyjnymi wartościami oraz technologicznym postępem była tak nieznaczna jak w osiągnięciach naszej nowoczesnej epoki.</td></tr> <tr><td> Bez względu na różnice decydujące o współdziałaniu lub konflikcie, dostarczaja one głównego impulsu dla wewnętrznej ewolucji każdego artysty.</td></tr> <tr><td> Organy piszczałkowe to doskonałe wcielenie kontrastu pomiędzy tradycja a technologią.</td></tr> <tr><td> AHLBORN reprezentuje punkt, w którym historyczny dźwięk starych organ piszczałkowych spotyka się ze światem dźwięków cyfrowych technologi, w tym samym czasie nieustanne dążenie do doskonałości oraz postęp technologiczny pozwoliły nam dorównać dawnym tradycyjnym technologiom bez zaprzepaszczenia ich wyjątkowych niepowtarzalnych wartości.</td></tr> </table> </div> <div id="border"></div> <div id="footer"> <table style="border:0;font-family:Tahoma;font-size:13px;color:#336699;text-align:center;padding:0;margin:0;"> <tr> <td style="width:120px;"><b>Polski</b> | <a href="http://www.ahlbornorgans.com/" target="_blank">English</a></td> <td style="text-align:center;width:522px;"></td> <td style="width:120px;">Ahlborn © 2007</td> </tr> </table> </div> </div> <div id="right_bar"></div> </div> </body> </html>
A Flash Developer Resource Site
Reply With Quote
but there are some problems with repeat-y background in the left and right cols - they are not repeating the background ;/ so their height is not as big as i want;/
