Verschachtelte DIV-Container in einer Reihe?

Ich versuche dieses Beispiel wie unten im Bild zu schaffen.

Beispiel - (HTML, CSS, Webdesign)

4 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

18.05.2017, 21:51

Das geht auf verschiedene Varianten.

Früher nutzte man dafür float, siehe:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/float

Heutzutage nutzt man dafür Flexboxen, siehe:
https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/

Auch möglich wäre eine CSS-Tabelle, siehe:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display/Tabelle

Meine Empfehlung wäre Flexboxen zu nehmen, da man dort mehr Kontrolle über die Ansichten z.B. auch auf Mobilgeräten hat. "float" mag einfach aussehen, kann jedoch unbedacht verwendet zu merkwürdigen Ansichten führen - hier sollte man daher auch immer als "clearen" denken.

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

19.05.2017, 09:09

Besser als float ist hier eine Flexbox. Der graue Container kann mit margin: 0 auto zentriert werden und bekommt die Eigenschaften und Werte display: flex, align-items: center und justify-content: space-around.

Die kleinen grünen Container dann nur noch die Größe, z.B. je 25%, dann hat jeder Abstand zwischen den Containern 6,25%.

18.05.2017, 21:45

Sie brauchen eigentlich nur float:left,
dürfen inkl. Abständen die 100% breite nicht überschreiten.

Niklas

18.05.2017, 23:39

Flexbox wäre besser. Ich rate dazu.

1

AlexXxej

19.05.2017, 08:15

ja wohl wahr, oder eben css grid. für den anfang reicht aber sich mit floats auseinander zu setzen denke ich ^^

0

19.05.2017, 00:30

Sende mir per PN bitte mal den Code, den du im Moment hast, vielleicht erkenne ich deinen Fehler.

Wie die anderen User bereits gesagt haben, empfehle ich im allgemeinen die Flexbox zu verwenden.

Ähnliche Fragen

Was ist eigentlich das div genau in html?

Wenn ich zum Beispiel 4 div Container im Code habe, ist der erste div Container dann ganz oben und der letzte div Container ganz unten?

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

Objekte sollen die Div-Box nicht verlassen. (CSS)

Hallo!

Wie schaffe ich es, das es Objekte (Text, Bilder, etc...) nicht ihre Div-Box verlassen (also formatiert bzw. kleiner werden, wenn ich zum Beispiel das Fenster verkleiner, oder die Webseite auf dem Handy öffne.

Schonmal vielen Dank im Vorrau :)

Lg mono

Div Button über andere Div Container legen?

Ich habe eine Webseite erstellt, welche mehrere Div-Container beinhaltet. Nun habe ich einen Button mittels Div erstellt. Jedoch ist der Button nicht sichtbar wenn ich andere Div-Container "aktiviert" habe. Mir ist bewusst das sich dies mit dem z-index regeln lässt, jedoch bei allen Div-Containern, außer bei dem mit dem Button.

Ohne andere Div-Objekte funktioniert er problemlos.

Danke im Vorraus!:)

html/css text dynamisch anpassen?

hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.

Schriftgröße im div container ändern.. Wie?

Ich habe bei HTML einen Div Container... der Befehl sieht so aus:

Wie stelle ich die Größe ein?

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}

Webdesign: Diagonale Linien oder DIV-Container mit diagonalen Kanten mit CSS?

Hallo Leute!

Was wäre eigentlich die eleganteste Lösung per CSS diagonal verlaufende Linien zu zeichnen oder Container mit diagonal verlaufenden Kanten zu erstellen?

Oder müsste ich mir das alles mit extra-DIV-Containern, margins und degrees so zusammenbasteln, bis es passt?

Danke schon mal.

Bild an Div Container anpassen?

Das Bild ist erstmal nur Platzhalter, da kommt später noch ein Timer rein (aber erst mit JavaScript). Nun soll das Bild aber halt in der Mitte des Bildes auf einer bestimmten Höhe sein. Ich hab bis jetzt mit Padding gearbeitet, aber da der Container je nach der Größe der Seite (das ganze soll halbwegs responsive sein) immer größer als das Bild ist, haut das mit dem Padding da nicht komplett hin. Da ich allerding auch das Prinzip mit dem zentrieren eines divs mit 2 weiteren Containern überhaupt nicht kann, ist mein Ansatz jetzt, dass sich das Bild immer dem Container anpasst in dem es ist. Darüber ist bereits so eine 3er Reihe mit Containern, aber da hat mir ein Freund geholfen, der gerade nicht da ist. Wenn ihr wollt, setze ich dann noch n Bild ran, wo ihr euch das nochmal genau ansehen könnt, ansonsten hier die betreffenden Code-Zeilen:

HTML:

<div class="Timer-container">

<img src="http:..." alt="" />

</div>

CSS:

.Timer-container {

display: block;

padding-top: 10%;

padding-left: 25%;

padding-right: 25%;

padding-bottom: 30%;

}

Ich hoffe ihr könnt mir helfen!

Eure Amy

CSS div container neben img in der selben Zeile?

Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

wozu braucht man div? (HTML)

Hallo,

beschäftige mich momentan bisschen mit html. Mir bereiten diese Positions und div container Probleme.

Also meine frage lautet wofür braucht man denn Div container?

man kann eine Webseite doch auch einfach ohne Div container aufbauen. also man setzt für jedes Element die Position absolute und gibt dann mit top und left die genaue Position ein, wo sich ein Element befinden soll.

Hoffe ihr versteht mich.

Danke im voraus

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

Wie macht man eine HTML Webseite responsive?

Ich habe in einem div Container zwei div Container nebeneinander.

Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }