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

Frage "Box in Box" nebeneinander

B

buntewelt

Neues Mitglied
Hallo,

ich habe ein kleines Problem mit ineinander verschachtelten Boxen, welche ich nebeneinander platzieren möchte.

Mein Code sieht folgendermassen aus:

HTML: 
<div id="alle_boxen">

    <p class="auswahlbox-oben">
    &Uuml;berschrift 1. Box
    <p class="auswahlbox-oben2">
    Inhalt 1. Box
    </p>
    </p>
   
    <p class="auswahlbox-oben">
    &Uuml;berschrift 2. Box
    <p class="auswahlbox-oben2">
    Inhalt 2. Box
    <p>
    </p>
   
</div>

Und die passende CSS:

Code: 
body {
    max-width: 90%;
    margin: 0 auto;
}

#alle_boxen {
width: 700px;
margin: auto;
}

.auswahlbox-oben {
    background-color: orange;
    float: left;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 280px;
    border: 2px solid;
    padding: 15px;
    margin-left: 15px;
}

.auswahlbox-oben2 {
    background-color: lightgrey;
    width: 280px;
    height: 500px;
    border-radius: 15px;
    padding: 15px;
    border: 2px solid;
    margin: 15px;
}

Das Ergebnis sieht dann so aus:


Mein Problem ist, dass ich gerne die beiden Boxen nebeneinander hätte.
Da ich aber für die Darstellung eine Box in der Box benutze (auswahlbox-oben in auswahlbox-oben2) kriege ich das irgendwie nicht hin.

Wenn ich bei auswahlbox-oben2 nen Float benutze, dann erscheint die Box ja auch neben der "Hauptbox", IN der sie eigentlich erscheinen soll. Gibt es da irgendne andere Möglichkeit, dass ich das ungefähr so beibehalten kann, dass ganze aber nebeneinander dargestellt wird? Oder bin ich komplett "auf dem falschen Dampfer"??

Habe das letzte Mal vor 15 Jahren oder so etwas mit HTML gemacht und muss mich erst in CSS ein wenig reinfuchsen. Habe zwar schon viel gegoogelt, leider fand ich aber nix, was ich direkt auf mein Problem transferieren konnte. Deswegen bin ich für jede Hilfe dankbar.

Gruss,
Björn
 
buntewelt schrieb:
Hallo,

ich habe ein kleines Problem mit ineinander verschachtelten Boxen, welche ich nebeneinander platzieren möchte.

Mein Code sieht folgendermassen aus:

HTML: 
<div id="alle_boxen">

    <p class="auswahlbox-oben">
    &Uuml;berschrift 1. Box
    <p class="auswahlbox-oben2">
    Inhalt 1. Box
    </p>
    </p>
 
    <p class="auswahlbox-oben">
    &Uuml;berschrift 2. Box
    <p class="auswahlbox-oben2">
    Inhalt 2. Box
    <p>
    </p>
 
</div>

Und die passende CSS:

Code: 
body {
    max-width: 90%;
    margin: 0 auto;
}

#alle_boxen {
width: 700px;
margin: auto;
}

.auswahlbox-oben {
    background-color: orange;
    float: left;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 280px;
    border: 2px solid;
    padding: 15px;
    margin-left: 15px;
}

.auswahlbox-oben2 {
    background-color: lightgrey;
    width: 280px;
    height: 500px;
    border-radius: 15px;
    padding: 15px;
    border: 2px solid;
    margin: 15px;
}

Das Ergebnis sieht dann so aus:


Mein Problem ist, dass ich gerne die beiden Boxen nebeneinander hätte.
Da ich aber für die Darstellung eine Box in der Box benutze (auswahlbox-oben in auswahlbox-oben2) kriege ich das irgendwie nicht hin.

Wenn ich bei auswahlbox-oben2 nen Float benutze, dann erscheint die Box ja auch neben der "Hauptbox", IN der sie eigentlich erscheinen soll. Gibt es da irgendne andere Möglichkeit, dass ich das ungefähr so beibehalten kann, dass ganze aber nebeneinander dargestellt wird? Oder bin ich komplett "auf dem falschen Dampfer"??

Habe das letzte Mal vor 15 Jahren oder so etwas mit HTML gemacht und muss mich erst in CSS ein wenig reinfuchsen. Habe zwar schon viel gegoogelt, leider fand ich aber nix, was ich direkt auf mein Problem transferieren konnte. Deswegen bin ich für jede Hilfe dankbar.

Gruss,
Björn
Zum Vergrößern anklicken....

<p> in <p> ist nicht erlaubt! Unbedingt korrigieren.

Ansonsten denke ich du musst auch noch .auswahlbox-oben2 floaten.
Und natürlich anschließend clearen.
 
Hallo,

wie scbawic bereits geschrieben hat dürfen p-Elementen keine weiteren p-Elemente enthalten.

Hintergrundinfo:

Wenn du dir die Seite mit den Entwicklerwerkzeugen anschaust (bei den meisten Browsern die F12-Taste) wirst du feststellen, das die Browser den vermeintlich fehlerhaften Quelltext korrigieren.

Aus deinem Quelltext

Code: 
<div id="alle_boxen">
   <p class="auswahlbox-oben">
   &Uuml;berschrift 1. Box
   <p class="auswahlbox-oben2">
   Inhalt 1. Box
   </p>
   </p>
   <p class="auswahlbox-oben">
   &Uuml;berschrift 2. Box
   <p class="auswahlbox-oben2">
   Inhalt 2. Box
   </p>
   </p>
</div>

machen die Browser

Code: 
<div id="alle_boxen">
   <p class="auswahlbox-oben">
   &Uuml;berschrift 1. Box
   </p>
   <p class="auswahlbox-oben2">
   Inhalt 1. Box
   </p>
   <p>
   </p>
   <p class="auswahlbox-oben">
   &Uuml;berschrift 2. Box
   </p>
   <p class="auswahlbox-oben2">
   Inhalt 2. Box
   </p>
   <p>
   </p>
</div>

Also 6 Absätze, die nicht ineinander verschachtet sind. Entsprechend funktioniert das float korrekt, hat aber nur Auswirkungen auf zwei Absätze.

Habe zwar schon viel gegoogelt, leider fand ich aber nix, was ich direkt auf mein Problem transferieren konnte.
Zum Vergrößern anklicken....

Wonach hast du denn gegoogelt? Wenn ich nach

css box nebeneinander
Zum Vergrößern anklicken....

google werde ich von Informationen erschlagen, zum Beispiel

http://www.mediaevent.de/tutorial/css-positionieren-float.html

Zum Testen sollte man bei solchen Problemen die zickigen Elemente (hier div und p) mit Hintergrundfarbe oder Rahmen versehen. Dann kann man die Probleme häufig einfacher erkennen. Ich habe mal eine Beispieldatei mit deinem Quelltext ohne das Float erstellt:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Boxen nebeneinander</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      #alle_boxen {
         padding: 1rem;
         border: 10px solid silver;
         margin: 1rem;
      }
      p {
         border: 1px solid orange;
         min-height: 1rem;
      }
   </style>
</head>
<body>
   <div id="alle_boxen">
      <p class="auswahlbox-oben">
      &Uuml;berschrift 1. Box
      <p class="auswahlbox-oben2">
      Inhalt 1. Box
      </p>
      </p>
      <p class="auswahlbox-oben">
      &Uuml;berschrift 2. Box
      <p class="auswahlbox-oben2">
      Inhalt 2. Box
      </p>
      </p>
   </div>
</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Danke schonmal für eure Antworten.

Das mit dem p-Element wusste ich nicht. Das erklärt aber schonmal viele Probleme. Mit Div sieht es jetzt doch schon ne ganze Ecke besser aus :)

Ich habs jetzt folgendermaßen geändert:

HTML: 
<div id="alle_boxen">

    <div class="auswahlbox-oben">
    &Uuml;berschrift 1. Box
    <div class="auswahlbox-oben2">
    Inhalt 1. Box
    </div>
    </div>
  
    <div class="auswahlbox-oben">
    &Uuml;berschrift 2. Box
    <div class="auswahlbox-oben2">
    Inhalt 2. Box
    </div>
    </div>
  
</div>

Code: 
#alle_boxen {
width: 700px;
margin: auto;
}

.auswahlbox-oben {
    background-color: orange;
    float: left;
    border-radius: 15px;
    border: 2px solid;
    width: 280px;
    margin: 15px;
    padding-top: 15px;
}

.auswahlbox-oben2 {
    background-color: lightgrey;
    width: 250px;
    height: 500px;
    border-radius: 15px;
    border: 2px solid;
    padding: 15px;
}

Das sieht dann folgendermaßen aus:



Also eigentlich schon ziemlich, was ich will.

Das einzige Probleme welches noch besteht, dass sich die innere Box anhand der äußeren positioniert.
Da wird ja jetzt aber dummerweise der Border (2px) mit reingerechnet.

Wie kriege ich denn den Rand der inneren Box über den Rand der äusseren geschoben? Geht das auf nem einfachen Weg, oder muss ich mit Position arbeiten?
Hatte auf einigen Seiten gelesen, dass man Position eigentlich nicht mehr benutzen sollte. Aber wie gehts sonst?

Mit dem Google ist halt immer so eine Sache, manchmal sieht man den Wald vor lauter Bäumen nicht ;)

Danke schonmal.

Edit: Okay, margin-left: -2px hilft. Oder ist das keine gute Lösung?

Gruss,
Björn
 
buntewelt schrieb:
Das einzige Probleme welches noch besteht, dass sich die innere Box anhand der äußeren positioniert.
Da wird ja jetzt aber dummerweise der Border (2px) mit reingerechnet.
Zum Vergrößern anklicken....

Ich weiß nicht, was du mit innerer Box meinst, aber für Außenabstände gibt es margin, für Innenabstände padding und je nachdem, ob padding und border in der width inbegriffen sein sollen, das Attribut box-sizing.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben