• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bereiche in Bereiche Verschachteln

MadMax777

Neues Mitglied
Hallo, (siehe auch Quellcode unten)

ich hab mal eine Frage, wie kann ich in einem CSS Layout (bzw. Box) in einander Verschachteln?

Ich möchte in "toplinkframe" 5 mal neben einander "linkframe" drinhaben. Was muss ich machen das ich es hinbekommen? Bislang ist "linkframe" immer untereinander. Und geht aus "toplinkframe" raus. Nach dem CSS-Code folgt der HTML-Code.

Vielen Dank für eure Hilfe

Code:
/* Main.css (Bereiche festlegen) */

#toplinkframe {
  width:660px; /* Weite des Bereichs insgesamt*/
  height:180px; /* Höhe des Bereichs insgesamt */
  border-width:0px; /* Stärke des Rahmens */
  border-style:none; /* Stiel des Rahmens */
  border-color:000000; /* Frabe des Rahmens */
  background-color:#003300; /* Hintergrundfarbe für den Bereich */
  background-repeat:no-repeat;
  background-position:center;
  text-align:center; /* Textausrichtung */
  padding-top: 20px; /* Innenabstand zu dem Rahmen */
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

#linkframe {
  display: inline;
  width:120px; /* Weite des Bereichs insgesamt*/
  height:160px; /* Höhe des Bereichs insgesamt */
  border-width:0px; /* Stärke des Rahmens */
  border-style:none; /* Stiel des Rahmens */
  border-color:000000; /* Frabe des Rahmens */
  background-color:#000000; /* Hintergrundfarbe für den Bereich */
  /* background-image:url(backgrounds/background_top_chrome.jpg); /* Hintergrundbild für den Bereich */
  background-repeat:repeat-x;
  text-align:center; /* Textausrichtung */
  margin: 0px; /* Abstand zu obenlinks und obenrechts (top, left, right sind auch möglich (z.B. margin-top)) */
  padding: 0px;
}

HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body text="#FFFFFF" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
         <div id="toplinkframe">
              <div id="linkframe">Link 1</div>
              <div id="linkframe">Link 2</div>
              <div id="linkframe">Link 3</div>
              <div id="linkframe">Link 4</div>
              <div id="linkframe">Link 5</div>
         </div>
</body>
</html>
 
Ist hier die Frage nach Verschachtelung oder die Frage danach, wie man Block-Elemente nebeneinander bekommt?

Verschachteln kannst u soviel Du willst, unter den üblichen Regeln (z.B. keine Block-Elemente innerhalb von Inline-Elementen).
Block-Elemente haben automatisch eine Breite von 100%, um so mehrere nebenainder zu bekommen, bietet es sich an, mit "float" zu arbeiten.
 
Besten Dank!

Schon funktionierts :-)

Ist hier die Frage nach Verschachtelung oder die Frage danach, wie
man Block-Elemente nebeneinander bekommt?

Verschachteln kannst u soviel Du willst, unter den üblichen Regeln (z.B. keine Block-Elemente innerhalb von Inline-Elementen).
Block-Elemente haben automatisch eine Breite von 100%, um so mehrere nebenainder zu bekommen, bietet es sich an, mit "float" zu arbeiten.
 
Aber es tauscht gleich das nächste Problem auf :-(

"toplinkframe" ist 660px*180px und "linkframe" ist 120px*160px.
Wir haben "linkframe" 5mal das ergibt 600px*160px insgesamt.
"toplinkframe" hat nach recht und links einen Innenabstand von jeweils 30px und oben 20px und unten 0px.

Das heißt das später im Browser links und rechts ein Rand mit der Selben breite sein müsste. Sowie oben ein Rand und unten kein Rand.

Nun ist aber der Rand rechts breite als links.
Und unten ist denoch ein Rand obwohl da keiner sein dürfte.

Nochmals Vielen Dank für eure Hilfe.

mfg
Markus
 
Ist mir grad zu kompliziert, zu rechnen :-)

Du nutzt das richtige Box Model? Internet Explorer im Standards statt im Quirks Mode?

Die Größe eines Elements setzt sich zusammen aus
Außenabstand (margin) + Rahmen (border) + Innenabstand (padding) + Größe (width/height)
Die Abstände und Rahmen jeweils links + rechts bzw. oben + unten.

Wenn das nicht hilft, bitte einen Link zur Seite. Und kein "Die Seite ist noch nicht online".
 
Zurück
Oben