nicht angemeldet
Hey, ich bin momentan dabei ein simples Layout zu entwerfen, dass aus drei DIVs besteht, die vertikal nebeneinander gefloatet werden. Die beiden äußeren DIVs weisen lediglich einen Hintergrund auf und umschließen das mittlere DIV, welches den Content enthält. Leider bekomme ich es nicht richtig hin, dass beim Skalieren die äußeren DIVs zuerst verschwinden und der Content möglich lange sichtbar bleibt. Habe leider nichts passendes gefunden. Bin mir schon die Finger am wundgooglen.
Hier mein Code:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title> Testpage </title>
<style>
body {
margin: 0;
padding: 0 0 0 0;
width: 800px;
}#left { float: left; width: 30px; height: 100%; background: #2989d8; background: -moz-linear-gradient(left, #2989d8 0%, #2989d8 31%, #2989d8 62%, #1e5799 96%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2989d8), color-stop(31%,#2989d8), color-stop(62%,#2989d8), color-stop(96%,#1e5799)); background: -webkit-linear-gradient(left, #2989d8 0%,#2989d8 31%,#2989d8 62%,#1e5799 96%); background: -o-linear-gradient(left, #2989d8 0%,#2989d8 31%,#2989d8 62%,#1e5799 96%); background: -ms-linear-gradient(left, #2989d8 0%,#2989d8 31%,#2989d8 62%,#1e5799 96%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#1e5799',GradientType=1 ); background: linear-gradient(left, #2989d8 0%,#2989d8 31%,#2989d8 62%,#1e5799 96%); } #right { float: right; width: 30px; height: 100%; background: #1e5799; background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 31%, #2989d8 62%, #2989d8 94%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(31%,#2989d8), color-stop(62%,#2989d8), color-stop(94%,#2989d8)); background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 31%,#2989d8 62%,#2989d8 94%); background: -o-linear-gradient(left, #1e5799 0%,#2989d8 31%,#2989d8 62%,#2989d8 94%); background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 31%,#2989d8 62%,#2989d8 94%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#2989d8',GradientType=1 ); background: linear-gradient(left, #1e5799 0%,#2989d8 31%,#2989d8 62%,#2989d8 94%); } #content { heigth: 100%; width: 740px; margin: 0 0 0 0; background-color: white; position: relative; } nav { margin-top: 20px; padding-color: black; } header nav li { list-style: none; float: left; padding: 5px; background-color: blue; text-align: center; margin: 1px; } header nav li a:link, header nav li a:visited { color: white; font-size: 14px; font-family: sans-serif; padding: 30px; text-decoration: none; padding: 20px; } header nav li a:hover { color: #00BFFF; text-decoration: none; }</style>
</head><body>
<div id="left"> </div>
<div id="right"> </div>
<div id="content">
<header>
<nav>
<ul>
<li> <a href="Home.html"> Home </a> </li>
<li> <a href="Aktuelles.html"> Aktuelles </a> </li>
<li> <a href="Unternehmen.html"> Unternehmen </a> </li>
<li> <a href="Impressum.html"> Impressum </a> </li>
<li> <a href="Kontakt.html"> Kontakt </a> </li>
</ul>
</nav>
</header>
<br>
<h1> Content </h1>
</div></body>
</html>
>
>
>
> Gruß Sebastian
Gunnar Bittersmann