Jump to content

flexible css layout

Recommended Posts

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 post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...