nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
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
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
@@Sebastian:
nuqneH
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.
Die beiden haben also nichts im Markup zu suchen. Weg damit! Wenn man Elemente zum Layouten braucht, schafft man sich welche – mit CSS!
Und dann ist auch das dritte 'div' überflüssig, 'body' als Container reicht.
body { width: 800px; }
#content { width: 740px; }
Das ist keine gute Idee.
Wenn’s denn auch zentriert sein darf:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TEST</title>
<style type="text/css">
[code lang=css]body
{
margin: auto;
max-width: 740px;
padding: 0 30px;
position: relative;
}
body::before, body::after
{
content: '\A0';
height: 100%;
position: absolute;
top: 0;
width: 30px;
}
body::before
{
background: -moz-linear-gradient(left, #2989d8 0%, #2989d8 31%, #2989d8 62%, #1e5799 96%);
left: -30px;
}
body::after
{
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 31%, #2989d8 62%, #2989d8 94%);
right: -30px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>[/code]
Die Angabe der Gradienten mit allen Präfixen spar ich mir mal.
Eigentlich wäre das auch ein Fall für 'border-image', aber da warten wir mal auf Browserunterstützung …
Qapla'
Hey Gunnar, vielen Dank für deine schnelle Antwort, leider funktioniert das Layout nicht wie ich es mir vorgestellt habe. Das Layout weißt sowohl auf der rechten und linken Seite sowie im Head-Bereich einen weißen Rand auf, den ich nicht weg bekomme.
Hier nochmal der gesamte Code mit deinen Veränderungen:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> Test </title>
<style type="text/css">
body
{
margin: auto;
max-width: 1024px;
padding: 0 30px;
position: relative;
}
body::before, body::after
{
content: '\A0';
height: 100%;
position: absolute;
top: 0;
width: 50px;
}
body::before
{
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%);
left: -30px;
}
body::after
{
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%);
right: -30px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
~~~<!DOCTYPE html>
Gruß Sebastian
@@Sebastian:
nuqneH
Das Layout weißt sowohl auf der rechten und linken Seite sowie im Head-Bereich einen weißen Rand auf, den ich nicht weg bekomme.
Rechts und links? Ich dachte, das soll so.
Oben ist es der Außenabstand des ersten Kindelements (bzw. eines seiner Nachfahren).
Fürs erste Kindelement wäre er bspw. wegzubekommen mit
body>*:first-child
{
margin-top: 0;
padding-top: 1em;
}
Vorzugsweiswe aber: Im Allgemeinen bekommt man den Abstand auch weg, wenn man dem Body noch oben einen Rahmen gibt und diesen aus dem Viewport schiebt:
body
{
border-top: 1px solid;
top: -1px;
}
(Relativ positioniert ist der Body ja schon.)
Hier nochmal der gesamte Code mit deinen Veränderungen:
body::before, body::after
{
width: 50px;
}body::before
{
left: -30px;
}body::after
{
right: -30px;
}
Hey, die Zahlenwerte sollten schon übereinstimmen.
Ich hatte glatt übersehen, dass bei schmalen Viewport wegen des rechten Gradienten ein horizontaler Scrollbalken erscheint, den gilt es natürlich zu vermeiden.
Ich glaube, dein Vorhaben verlangt nach Media-Queries: Die Gradienten links und rechts werden nur dann erzeugt, wenn der Viepowrt breit genug ist.
Qapla'
Das Layout soll ähnlich dem der Seite von www.meister.com entsprechnen bezüglich den Rändern und der Skalierung. Bloß die momentanen Ränder haben eine fixe Position durch die Pixel-Angaben und Skalieren leider komplett mit und werden nicht ausgeblendet, wenn das Fenster zu klein wird. Der Content soll eine feste Breite haben.
Gruß Sebi
@@Sebastian:
nuqneH
Bloß die momentanen Ränder […] werden nicht ausgeblendet, wenn das Fenster zu klein wird.
Wie das (in modernen Browsern) zu beheben ist, hatte ich schon gesagt.
Der Content soll eine feste Breite haben.
Dass das nicht die beste Idee ist, hatte ich auch schon gesagt.
Qapla'
Hey Gunnar,
so habe mich in media querys nun eingelesen und die ersten Test gemacht. Ganz geiles Feature. Jedoch habe ich mein Problem noch nicht ganz gelöst, da ich es irgendwie hinbekommen, will dass die Ränder schneller kleiner werden als der Contentbereich (<-- momentanes Problem) und ab einer bestimmten Auflösung z.B. 1024px Breite nur noch den Content sichtbar ist (<-- soweit gelöst).
Gruß Sebi
@@Sebastian:
nuqneH
Jedoch habe ich mein Problem noch nicht ganz gelöst, da ich es irgendwie hinbekommen, will dass die Ränder schneller kleiner werden als der Contentbereich (<-- momentanes Problem) und ab einer bestimmten Auflösung z.B. 1024px Breite nur noch den Content sichtbar ist (<-- soweit gelöst).
Ich verstehe deine Frage nicht. Woran nicht die etwas verkorkste Grammatik schuld ist.
Qapla'
Der Tipp für die media querys war schon nicht schlecht, bringt mich jedoch nicht ans Ziel, weil ich mir schon mehrere Websites beguckt habe, die das gewünschte Skalierung aufweisen ohne media querys. Ich verweise nochmal auf die Website von www.meister.com, jedoch soll bei mir die Skalierung mit nicht einem Hintergrund erfolgen, sondern das Layout ist in drei divs eingeteilt, linker div, Content div, rechter div. Beim Kleiner-Skalieren sollen die Ränder gleichmäßig kleiner werden bis sie ganz verschwinden und nur noch der Content sichtbar ist. Ich hoffe das ist für dich verständlich.
Gruß Sebastian
So ich habe es nun fast hinbekommen, der Problem ist nur noch, wie ich die Elemente nebeneinander ausgerichtet bekomme. Ich blicke voll nicht dahinter, was es mit den Positionen auf sich hat, d.h. relative, absolute, static etc. Ich probiers immer aus ohne Erfolg. Der Content soll schließlich zwischen den äußeren Divs stehen und left und right sollen sich verkleinern, wie momentan.
Hier mein Code:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
body {
margin: 0;
}
#content {
position: relative;
padding: 0;
border: none;
margin: 0 0 0 0;
width: 100%;
top: 0;
rigth: 0px;
heigth: 100%;
background: #f0f0ff;
font-size: 1.3em;
}
#left {
padding: 0;
border: none;
margin: 0 1024px 0 0;
height: 100%;
background: #2989d8;
}
#right {
padding: 0;
border: none;
margin: 0 1024px 0 0;
height: 100%;
right: 0px;
background: #1e5799;
}
</style>
</head>
<body>
<div id="left"> Left </div>
<div id="content"> Content </div>
<div id="right"> Right </div>
</body>
</html>
@@Sebastian:
nuqneH
jedoch soll bei mir die Skalierung mit nicht einem Hintergrund erfolgen, sondern das Layout ist in drei divs eingeteilt, linker div, Content div, rechter div.
??
Beim Kleiner-Skalieren sollen die Ränder gleichmäßig kleiner werden bis sie ganz verschwinden und nur noch der Content sichtbar ist. Ich hoffe das ist für dich verständlich.
Nein. Erst waren es links und rechts Gradienten (erst 30 Pixel breit, dann 50), nun haben die Elemente Textinhalt.
Und wenn sie Inhalt haben, warum soll dieser bei schmalem Viewport nicht zu sehen sein?
Vielleicht kannst du es ja besser aufmalen als mit Worten beschreiben?
Qapla'
Der linke und rechte Div bekommen keinen Inhalt nur Hintergrund. Der Inhalt ist nur im Content enthalten. Sorry, wenn dich das Left und Right im Div irritiert hat.
Gruß Sebastian
@@Sebastian:
nuqneH
Der linke und rechte Div bekommen keinen Inhalt nur Hintergrund.
Damit sind wir wieder am Anfang: Diese beiden 'div' haben im HTML-Code nichts zu suchen.
Wie soll der Hintergrund links und rechts vom Seiteninhalt aussehen? Soll er eine feste Breite haben (wie du eingangs mit deinen 30px andeutetest) oder soll er bis zum Rand des Viewports reichen?
Qapla'
Der Content soll eine feste Breite besitzen und die Ränder sollen sich flexibel der Fenstergröße anpassen, d.h. auch wenn nötig auf "Null" laufen, um nur den Content darzustellen.
Gruß Sebastian
@@Sebastian:
nuqneH
Der Content soll eine feste Breite besitzen
Hatte ich schon erwähnt, dass das keine gute Idee ist?
und die Ränder sollen sich flexibel der Fenstergröße anpassen, d.h. auch wenn nötig auf "Null" laufen, um nur den Content darzustellen.
Und wie genau sollen denn die Farben in den Rändern aussehen?
Willst du vielleicht einfach nur sowas:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>TEST</title>
<style>
[code lang=css]html
{
background: darkblue;
height: 100%;
}
body
{
background: white;
height: 100%;
margin: auto;
max-width: 666px;
padding: 0 1em;
}
body>:first-child
{
margin-top: 0;
padding-top: 1em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>[/code]
Qapla'
Ja genau Gunnar, bloß dann mit zwei verschiedenen Seitenrändern, weil links und rechts ein anderer Farbverlauf hereinkommt. Aber sonst genau so, wie du es gepostet hast.
Gruß Sebastian