[css]flexible layout [Archive] - Flash Kit Community Forums

Click to See Complete Forum and Search --> : [css]flexible layout

skabszo

05-31-2007, 05:04 AM

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;/

<!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;overflo w:hidden;}
#footer {height:25px;width:762px;background:#ffffff;paddin g-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>

sticks464

05-31-2007, 10:13 AM

I think this is something like what you want

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>

<style type="text/css">
*, html {
margin:0;
padding:0;
}

body {
background:#ebdfcf;
width:100%;
margin:0;
font-family:"Tahoma", Arial, Helvetica, sans-serif;
font-size:16px;
}

#leftcol {
float:left;
margin:0;
width:121px;
height:100%;
padding:5px;
}

#rightcol {
float:right;
margin:0;
width:121px;
height:100%;
padding:5px;
}

#wrapper {
margin:0 131px 0 131px;
height:100%;
border-left:20px solid #9cf;
border-right:20px solid #9cf;
}

#header {
width:100%;
background:#ebdfcf;
}

#menu {
width:100%;
height:34px;
font-size:13px;
background:#fff;
}

#menu1 {
width:630px;
padding:0;
margin:0 auto;
list-style-type:none;
margin-top: 2px;
}

#menu1 li {
float:left;
width:100px;
border-right:3px solid #9cf;
}

#menu1 a {
display:block;
width:100px;
color:#336699;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}

#menu1 a:hover {
border-bottom:4px solid #337799;
}

#movie {
width:100%;
background:#ebdfcf;
}

#content {
width:100%;
background:#ebdfcf;
font-family:Times New Roman;
font-weight:bold;
color:#374047;
text-align:left;
padding-top:10px;
padding-bottom:10px;
}

#content p {
padding:0 10px 0 10px;
}

#footer {
font-family:Tahoma;
font-size:13px;
color:#336699;
text-align:center;
height:30px;
background:#fff;
}

#nav {
width:330px;
padding:0;
margin:0 auto;
list-style-type:none;
margin-top: 2px;
}

#nav li {
float:left;
width:100px;
border-right:3px solid #9cf;
}

#nav a {
display:block;
width:100px;
color:#336699;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}

#nav a:hover {
border-bottom:4px solid #337799;
}

.foot {
display:block;
width:100px;
color:#336699;
text-align:center;
padding:4px 0;
float:left;
}
</style>
</head>

<body>

<div id="leftcol"><h4>Left Column</h4></div>


<div id="rightcol"><h4>Right Column</h4></div>


<div id="wrapper">

<div id="header"><h1>Header Goes Here</h1></div>

<div id="menu">
<ul id="menu1">
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Produkty</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Instalacja</a></li>
<li style="border:none"><a href="#">Kontakt</a></li>
</ul>
</div>

<div id="movie"><h2>Flash Movie Goes Here</h2></div>

<div id="content"><p>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.</p><br />
<p>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.</p><br />
<p>Organy piszczałkowe to doskonałe wcielenie kontrastu pomiędzy tradycja a technologią.</p><br />
<p>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.</p>

</div>

<div id="footer">
<ul id="nav">
<li><a href="http://www.ahlbornorgans.com/" target="_blank">Polski</a></li>
<li ><a href="#">English</a></li>
<li class="foot" style="border:none">Ahlborn © 2007</li>
</ul>
</div>
</div>
</body>
</html>

And it validates as html 4.01 strict

skabszo

05-31-2007, 06:06 PM

thx:) 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;/

sticks464

05-31-2007, 06:30 PM

You'll have to put in your images that you used before. I left those blank intentionally so you could do that.

skabszo

06-01-2007, 03:00 AM

i've put background:url(images/BART_03.jpg) repeat-y; in #rightcol and left and it doesnt work;repeated images are only there where is text in the cols - i want those images as much as the border line of footer is

sticks464

06-01-2007, 07:33 AM

Ok, what colors go where? This has to be done differently so all the columns extend evenly.

sticks464

06-01-2007, 09:05 AM

Ok, I have added an image and some css to make this work. If you want a different color in the left and right columns yu will have to put your own images in where I have it highlighted.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">
*, html {
margin:0;
padding:0;
}

body {
background:#ebdfcf;
width:100%;
margin:0;
font-family:"Tahoma", Arial, Helvetica, sans-serif;
font-size:16px;
}

#outer1 {
background:#ebdfcf url(leftcolbg.jpg) repeat-y left top;
width:100%;
/* image for left column and #ebdfcf = centre column colour */
}

/*outer 2 is the right column colour */
#outer2 {background:transparent url(leftcolbg.jpg) repeat-y right top;
}

#leftcol {
float:left;
margin:0;
width:121px;
padding:5px;
}

#rightcol {
float:right;
margin:0;
width:121px;
padding:5px;
}

#wrapper {
margin:0 131px 0 131px;
border-left:10px solid #9cf;
border-right:10px solid #9cf;
}

#header {
width:100%;
background:#ebdfcf;
}

#menu {
width:100%;
height:30px;
font-size:13px;
background:#fff;
}

#menu1 {
width:630px;
padding:0;
margin:0 auto;
list-style-type:none;
margin-top: 2px;
}

#menu1 li {
float:left;
width:100px;
border-right:3px solid #9cf;
}

#menu1 a {
display:block;
width:100px;
color:#336699;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}

#menu1 a:hover {
border-bottom:4px solid #337799;
}

#movie {
width:100%;
background:#ebdfcf;
}

#content {
width:100%;
background:#ebdfcf;
font-family:Times New Roman;
font-weight:bold;
color:#374047;
text-align:left;
padding-top:10px;
padding-bottom:10px;
}

#content p {
padding:0 10px 0 10px;
}

#footer {
font-family:Tahoma;
font-size:13px;
color:#336699;
text-align:center;
height:30px;
background:#fff;
}

#nav {
width:330px;
padding:0;
margin:0 auto;
list-style-type:none;
margin-top: 2px;
}

#nav li {
float:left;
width:100px;
border-right:3px solid #9cf;
}

#nav a {
display:block;
width:100px;
color:#336699;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}

#nav a:hover {
border-bottom:4px solid #337799;
}

.foot {
display:block;
width:100px;
color:#336699;
text-align:center;
padding:4px 0;
float:left;
}
</style>
</head>

<body>
<div id="outer1">
<div id="outer2">


<div id="leftcol"><h4>Left Column</h4></div>


<div id="rightcol"><h4>Right Column</h4></div>

<div id="wrapper">

<div id="header"><h1>Header Goes Here</h1></div>

<div id="menu">
<ul id="menu1">
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Produkty</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Instalacja</a></li>
<li style="border:none"><a href="#">Kontakt</a></li>
</ul>
</div>

<div id="movie"><h2>Flash Movie Goes Here</h2></div>

<div id="content"><p>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.</p><br />
<p>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.</p><br />
<p>Organy piszczałkowe to doskonałe wcielenie kontrastu pomiędzy tradycja a technologią.</p><br />
<p>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.</p>

</div>

<div id="footer">
<ul id="nav">
<li><a href="http://www.ahlbornorgans.com/">Polski</a></li>
<li ><a href="#">English</a></li>
<li class="foot" style="border:none">Ahlborn © 2007</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

skabszo

06-01-2007, 05:42 PM

thx;)