pawciak Posted May 31, 2007 Share Posted May 31, 2007 Hi i want to make flexible css layout - it should look like this imghttp://img388.imageshack.us/img388/2708/99572997te6.jpgAnd 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 meI have also some code but it is for nothing;/ <!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> Link to comment Share on other sites More sharing options...
S@m Posted June 4, 2007 Share Posted June 4, 2007 Maybe you can find something useful here.http://blog.html.it/layoutgala/ Link to comment Share on other sites More sharing options...
BenC Posted June 4, 2007 Share Posted June 4, 2007 I am using 1280x1024 but I know that some people are still using 1024x768This may shock you, but people are still using 800x600 Link to comment Share on other sites More sharing options...
psypent81 Posted June 5, 2007 Share Posted June 5, 2007 This may shock you, but people are still using 800x600 I agree. I did a site for a friend of mine for that resolution, but when viewed at higher resolutions, the "bleed" from the top and bottom didnt go all the way to the top. Is it possible to make the CSS work for ANY type of resolution?Any help would be appreciated:)Thanks_psypent Link to comment Share on other sites More sharing options...
ScottR Posted June 5, 2007 Share Posted June 5, 2007 To make a layout fit any resolution...... use percentages Link to comment Share on other sites More sharing options...
henryhenry Posted June 12, 2007 Share Posted June 12, 2007 I have to say I've never found using height:100% will actually work very well. What do you want it 100% of? And I think it's treated quite differently in different browsers. Agree with the 800x600 statement. My solution is to fix the width at a minimum to the width of the leftbar and the content then you get similar proportions to the 1024x800.Also I'm a bit confused as to why you use overflow:hidden on almost every tag. I think that's going to make your layout less fluid because if the content is more than the size of the div (as you define in your css) then the extra content will be hidden. So your page will be fixed to the size in the css which means if you change the content you have to manually find the sizes in your css and change them to ensure the content is displayed.I would set #all to min-height: XXXpx; then all the divs within can be relative to that.Widths, you just use % like ScottR says. Easy, just play around. If you're trying to centre, make sure that the margins on left and right are the same (or auto) and you get it centred. Use text-align:center for IE.Does that help?ps check out www.cssplay.co.uk and www.positioniseverything.net for great examples - some really great layouts on both. The first one has some great tricks too. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.