reflecta |
15.12.2010 00:44 |
Problem mit 3 Spalten Layout
Hallo liebe xhtml Forum-Mitglieder,
folgendes Problem habe ich mit einem 3 Spalten Layout. Ich möchte gern in der CSS-Datei definieren das die Länge der beiden äußeren Container mit dem erstellen Inhalt des mittleren Containers automatisch erweitern.
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Campus Tuning</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="seite">
<ul id="Navigation">
<li><a href="...">Projekt</a></li>
<li><a href="...">Team</a></li>
<li><a href="...">Konzepte</a></li>
<li><a href="...">Umfragen</a></li>
<li><a href="...">Ergebnisse</a></li>
<li><a href="...">Kontakt</a></li>
</ul>
<div id="Info">
<p>Infobox-Container</p>
</div>
<div id="Inhalt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed
ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et
ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit
cursus nunc.Nam eget dui. Etiam rhoncus. Maecenas tempus. tellus eget condimentum rhoncus,
sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel,
luctus pulvinar.</p>
<div id="deco">
</div>
</div>
</div>
</body>
</html>
HTML-Code:
body {
color: black; background-color: white;
font-family: Helvetica,Arial,sans-serif;
padding:0 10%;
background-color:black;
min-width: 41em; /* verhindert Anzeigefehler in modernen Browsern */
}
#seite {
background-color: white;
border-color: #48A7C5;
height: 100%;
margin: auto;
padding: 5px 0;
width: 1024px;
}
ul#Navigation {
width: 674px; height:36px;
background-image:url(images/banner.jpg);
padding-left: 350px; padding-top:23px;
font-size: 13px;
}
ul#Navigation li {
list-style: none;
display: inline;
padding: 27px;
}
ul#Navigation a {
display: inline;
text-decoration:none;
}
ul#Navigation a:link {
color: white;
}
ul#Navigation a:hover {
color: red;
}
ul#Navigation a:active {
color: red;
}
ul#Navigation a:visit {
color: white;
}
div#Info {
position:relative; left:15px;
width: 300px;
height: 100%;
padding: 5px 0;
background-image:url(images/karo.jpg);
border:2px solid red;
}
div#Info p {
font-size: 12px;
padding: 20px;
}
div#Inhalt {
position:relative; top:-93px; left:335px;
width: 530px;
border:2px solid red;
}
div#Inhalt p {
font-size: 12px;
padding: 10px;
}
div#deco {
float: left;
position:relative; top:-316px; left:547px;
width: 119px;
height: 100%;
padding: 5px 0;
background-image:url(images/karo.jpg);
border:2px solid red;
}
h1 {
font-size: 1.5em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge silver;
}
Ich hoffe ihr könnt mir weiterhelfen. Vielen Dank.
|