[css]flexible layout

**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>

Thread: [css]flexible layout

Thread Tools

Display

Hybrid View

Posting Permissions