nicht angemeldet
Immer gleiche margins ohne height angabe
Gutan Abend,
ich würde gerne ein layout basteln, welches auf dem body also im content bereich 4 boxen hatt. Quasi als Vroschau.
Nun sollte der Boxeninhalt (text), sobald das browserfenster kleiner wird sich einfach den platz nehmen. Das klappt auch, da ich kein height angebe, werden die boxen einfach in der höhe grösser und der text bekommt mehr platz.
Nun der "schwierige" teil. Ich hätte gerne dass alle boxxen auf allen 4 seiten ein margin von 10px haben.
Es sind jeweils 2 boxen übereinander angeordnet. Nun kommt das problem:
Sobald ich das heîght weglasse, und das browserfenster die grösse ändert vergrössert oder verkleinert sich auch der rahmen um die boxxen.
Gibt es eine möglichkeit den rahmen zu "forcen"?
Der container ist das ganze, in dem content div befinden sich die 4 boxxe - jeweils 2 übereinander.
#container{
height: 100%;
width: 100%;
padding-bottom: 100px;
background-color: #e1e0e1;
}
#content{
margin-top: 10px;
margin-left: 170px;
margin-right: 160px;
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
}
Boxxen:
#box1{
margin-left: 10px;
padding: 3px;
width: 48%;
height: 120px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
float: left;
}
#box2{
margin-right: 10px;
margin-left: 52%;
height: 120px;
padding: 3px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
#box3{
margin: 10px;
padding: 3px;
height: 500px;
width: 48%;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
float: left;
}
#box4{
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 52%;
padding: 3px;
height: 500px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
Vielen Dank für jegliche Hilfe =)
-
Die Möglichkeiten um dein Vorhaben zu erreichen sind calc, box-sizing oder ::outside
Da du aber wohlkaum nur Browser bedienst, die diese Features auch unterstützen, ist es wohl am sinnvollsten um jede der Kästen noch einen zusätzlichen zu packen - dieser hat dann 50% Breite und eine Minimalbreite von X, der innere Kasten hat eine automatische Breite und den Rahmen sowie die Außen bzw. Innenabstände.
btw: du solltest dringend an deiner Rechtschreibung und Grammatik arbeiten - was soll "boxxen" bitte für ein Wort sein?
-
Ich habe nun meinen content bereich absolute positioniert. Die boxen sind relative positioniert und haben eine min-height. Soweit ist alles wie ich es gerne hätte.
Das Problem ist nur das rechte margin. ich habe "margin-right: 120px" eingestellt. Nun ist der content bereich nur so breit wie er für den inhalt sein müsse, das margin kommt erst zur geltung wenn man das Browserfenster verkleinert.
Woran könnte das liegen?
Das margin-left, margin-top etc funktioniert. Nur das margin-right nicht.
#content{ padding: 10px; margin-top: 10px; margin-left: 170px; margin-right: 160px; border-color: #000000; border-width: 1px; border-style: solid; position: absolute; background-color: #ffffff; }-
Om nah hoo pez nyeetz, Margina!
Ich habe nun meinen content bereich absolute positioniert.
Absolute Positionierung ist für einen Content-Bereich keine gute Idee. Wenn das Fenster zu klein wird, verschwinden die Inhalte.
Dasselbe Problem hast du, wenn du den Scrollbalken mit overflow:hidden entfernst. Du entfernst nämlich nicht nur den Balken sondern auch die Funktionaltät. Inhalte sind nicht erreichbar.
Schau dich mal auf selfhtml um, zum Beispiel bei diesem [ref:self812;css/layouts/mehrspaltige.htm#kopf_fuss@title=Layout-Vorschlag]. Soll der Footer immer sichtbar sein, hilft u.U. position:fixed [Tutorial]
Prüfe, ob
#contentnicht besser<body> ist.Matthias
--
1/z ist kein Blatt Papier.
-
-
Ich habe nun den content bereich nicht mer absolut, und mit min height habe ich es hinbekommen dass auch die margins immer gut bleiben.
Das einzige problem jetzt noch ist, dass dank dem float left, welches ich in der linken box angeben muss damit ich die rechte, rechts daneben platzieren kann diese box einfach aus dem rahmen fliesst, also aus dem content bereich.
Gibt es einen ersatz für float left, damit ich 2 boxen nebeneinander platzieren kann? oder kann ich irgendwie festlegen dass der bottom der box nicht vom content ignoriert wird?
-
Om nah hoo pez nyeetz, Margina!
Gibt es einen ersatz für float left, damit ich 2 boxen nebeneinander platzieren kann? oder kann ich irgendwie festlegen dass der bottom der box nicht vom content ignoriert wird?
Variante 1: display: inline-block; Variante 2: dem umgebenden Element overflow: hidden; geben
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-