Herzlich willkommen im Archiv vom ABAKUS Online Marketing Forum
Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.
Eben nicht, die Spalten sind ja unterschiedlich hoch. Das kenne ich schon.tingting hat geschrieben:schau mal hier, da gibst genau was du suchst
https://de.selfhtml.org/css/layouts/meh ... #kopf_fuss
Das isses auch nicht, die Spalten sind ja nicht gleich hoch. Gleich hoch heisst, dass der Hintergrund einer jeden Spalte bis zum Footer durchgehen muss. Trotzdem danke.nerd hat geschrieben:https://www.alistapart.com/articles/holygrail
Das sieht doch sehr gut aus.mark hat geschrieben:oder doch alles
https://www.ssi-developer.net/main/temp ... t-flex.htm
Spitze! Genau das habe ich gesucht. Vielen Dank.mark hat geschrieben:Alle gefunden, aber nicht getestet über https://css-discuss.incutio.com/?page=T ... umnLayouts
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#header {
height: 40px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
#wrapper {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
background-color: yellow;
}
#leftcolumn {
float: left;
width: 10em;
background-color: lightgreen;
}
#rightcolumn {
float: right;
width: 10em;
background-color: lightgreen;
}
#clear {
clear: both;
}
#content {
margin: 0px 10em 0px 10em;
background-color: magenta;
}
#footer {
height: 40px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<div id="leftcolumn">
<ul>
<li><a href="#">Menue 1</a></li>
<li><a href="#">Menue 2</a></li>
<li><a href="#">Menue 3</a></li>
</ul>
</div>
<div id="rightcolumn">
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<div id="content">
<h1>Überschrift</h1>
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<div id="clear">
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>Um den geht es ja gar nicht, es geht darum, dass oberhalb des Contents noch ein gelber "Rand" erscheint, der ja in Wirklichkeit der Wrapper-Hintergrund ist.tingeltangeltill hat geschrieben:der blaue wrapper rand hat schon seine richtigkeit, denn er umfasst ja die right, left und content.
Dann sind wir ja schon zu zweit.tingeltangeltill hat geschrieben:aber vor der eigentlichen problematik das right und left runtergezogen angezeigt werden sollen stehe ich auch.
Mache ich doch. Ich entwickle mit Seamonkey, der hat die Gecko-Engine und damit die gleiche Engine, wie Firefox.tingeltangeltill hat geschrieben:btw: du solltest css immer auf firefox und opera entwickeln, denn das sind die standardtreusten browser.
Code: Alles auswählen
* {
margin: 0;
padding; 0;
}
Das kann's ja wohl nicht sein, oder? Ich will die Ränder nicht auf 0 haben, sonst könnte ich die Block-Elemente ja auch gleich ganz weglassen und alles würde ohne Abstände zusammengeklebt auf einem Haufen rumgammeln. Nein, die Überschrift soll ja einen kleinen Abstand nach oben haben, und zwischen den Absätzen soll es auch einen Abstand geben!tingeltangeltill hat geschrieben:ach das ist dein problem, dass habe ich dann völlig falsch verstanden.
das sind die auswirkungen der block-elemente <h> und <p>.
mach die mal im content weg und du siehst, kein leer mehr.
das solltest du am anfang der css-datei notieren, damit werden alle margin und padding auf 0 gesetzt (einheit nicht benötigt). das hat sich so eingebürgert --> vermeidet viele probleme, spart unnötigen code (muss nicht überall auf 0 gesetzt werden)Code: Alles auswählen
* { margin: 0; padding; 0; }
Das was du willst, ist aber ein padding und kein margin.Das kann's ja wohl nicht sein, oder? Ich will die Ränder nicht auf 0 haben, sonst könnte ich die Block-Elemente ja auch gleich ganz weglassen und alles würde ohne Abstände zusammengeklebt auf einem Haufen rumgammeln.
Code: Alles auswählen
h1 {margin: 0; padding: 10px 0px;}