CSS Rahmen um eine Box mit Floating left

1 Markus.w (Gast)

Hallo alle zusammen

Habe eine Testseite unter https://naturalstone.ch/testseite-css/ gmacht zur Veranschaulichung meiner Frage.

Ich habe ein div-Tag mit einem Rahmen drum herum. das geht.

in diesem div-Tag soll ein weiteres div-Tag ebenso mit einem Rahmen sein. Das nächste div Tag soll daneben erscheinen. Also nutze ich float:left: Nun fällt aber das Unter-Tag aus dem oberen Rahmen raus...

Ziel ist es, mehrere dif Tags nebeneinander darzustellen, die alle zusammen einen "übergeordneten" Rahmen besitzen.

Vielen lieben Dank für Hilfestellungen welche dazu führen, dass "meine Boxen" im Rahmen sind.

2 Jörg Kruse

Mit "overflow: auto" oder "overflow: hidden" bringt man die Elternbox dazu, die Kindelemente zu umfassen:

div.mnuContentBox {
    /* ... */
    overflow: auto;
}

Damit die dritte Unterbox floatet / gefloatet wird, benötigt sie eine feste Breitenangabe

Alternativ ließe sich der Aufbau mit einer Flexbox umsetzen:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

Diese neuere Technik eignet sich besser für das Anordnen von Blockelementen und wird inzwischen von gängigen Browsern unterstützt.

3 Salva (Gast)

@Markus.w

Bei deiner Kasse

div.mnuSub

einfach

float: left;

löschen. Ich bin aber, ebenso wie Jörg, auch eher für CSS3 bzw. Flexbox.

4 Salva (Gast)

Ups! Wie peinlich! Da habe ich nicht richtig gelesen! SORRY!

Also nochmal, aber mit der Flexbox:

HTML:


<div class="wrapper">

<div class="row">Box 1</div>

<div class="row">Box 2</div>

<div class="row">Box 3</div>
</div>

CSS:

/* hauptrahmen */
.wrapper {
display: flex;
justify-content: space-around;
padding: 10px;
border: solid 1px #000;
}

/* box */
.row {
width: 33.33333%;
position: relative;
padding: 5px;
border: solid 1px #000;
margin-right: 10px;
margin-left: 10px;
float: left;
}

5 Markus.w (Gast)

Wow, hey, Jörg und Slava, so super. Mega vielen lieben Dank. overflow: auto; funktioniert perfekt. Meine Startseite https://naturalstone.ch/ sieht dank Euch nun genau so aus wie ich es mir vorgestellt habe... Mega Dank.

Ich sehe schon, ich werde wieder "Schüler" spielen und mir die Flexbox versuchen ins Hirn zu schaufeln ;-)

@Slava: Wenn ich float left weg lassen würde, würde denn die Startseite je nach verfügbarer Breite zwei oder ein Bild nebeneinander darstellen? Dennoch werde ich mich mit der FlexBox auseinander setzen...

6 Markus.w (Gast)

Habe gerade die Flexbox gelesen. Das ist ja super. Das erleichtert mein Leben für eine Küntige Seite mit den Tischen... Danke vielmals für den hinweis.
Die Startseite werde ich auch mit der Flex anpassen. Gefällt mir gut.

Viel liebe Grüsse
Markus

7 Salva

Hallo @Markus.w

Dein Link ist heute leider nicht aufrufbar, aber soweit ich beim letzten Mal gesehen habe, arbeitest du an einer Wordpress Seite.
Ich weiß jetzt zwar nicht, wie gut du dich damit auskennst, aber ich wollte dir trotzdem den Tipp mitgeben, dass du deinen eigenen CSS-Code IMMER in die custom.css einbaust. Tust du das in der style.css deines Themes, ist beim nächsten Themen Update alles futsch und deine Arbeit war umsonst.
---

Die Flexbox ist eine super Sache, dennoch musst du zur Steuerung deines Layouts noch Media Queries einsetzen. Wordpress Themes tun das auch.
Nachfolgendes CSS steuert deine Boxen so, dass die bis zu einer Monitorauflösung von z.B. 600px eine Breite von 100% annehmen und untereinander angeordnet werden:

/* media queries */
@media only screen and (max-width: 600px) {

.wrapper {
display: block; /* hebt die flexbox aus */
}

.row {
width: calc(100% - 12px); /* 12px ergeben sich aus dem padding von 5px *2 + die rahmenbreite von 1px *2 */
margin: 10px 0; /* der oben/unten abstand der boxen zueinander */
float: none;
}

}

Wenn dein Theme in der style.css "box-sizing: border-box" anwendet, kannst du bei der Breite der .row statt calc(...) einfach 100% eingeben. Werte für padding, border usw. werden dann automatisch berücksichtigt.

Testen kannst du dein Layout u.a. unter http://www.responsive.cc/index und mehr zum Thema "Media Queries", einschl. der Möglichkeit der Echtzeit-Bearbeitung, findest du hier: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

8 Markus.w (Gast)

Hallo Slava,

Bin heute mal wieder am Webseiten basteln und merke, dass es immer komplexer wird (oder ich immer älter).

Und ich habe Deine Ergänzung gesehen für welche ich mich ganz herzlich bedanke.

>>Dein Link ist heute leider nicht aufrufbar,
komisch, habe nichts gelöscht... bei mir geht er. Aber ist eigentlich nicht so wichtig, die Hauptseite mit meiner Ursprungsfrage https://naturalstone.ch/ scheint mir sehr gut zu sein. Jedenfalls macht er auf einem Mobilgerät eine Spalte und auf dem PC zwei. Obwohl ich auf dem PC eigentlich drei wollen würde, das liegt aber vermutlich am Template welches nicht mehr Platz zur Verfügung stellt. Aber ist im Moment nicht so wichtig. Danke Dir dass Du mir zu diesem für den Moment guten Layout verholfen hast.

>> aber soweit ich beim letzten Mal gesehen habe, arbeitest du an einer Wordpress Seite.

Ja, genau, richtig erkannt.

>>Ich weiß jetzt zwar nicht, wie gut du dich damit auskennst,
Mässig. Ich dachte, CSS und HTML hätte ich im Griff. Aber das muss wohl vor 20 Jahren gewesen sein ;-)

>>aber ich wollte dir trotzdem den Tipp mitgeben, dass du deinen eigenen CSS-Code IMMER in die custom.css einbaust.
Ja, vielen lieben Dank. Ich werde es in ein Child-Theme einbauen. Es ist mir auf einer anderen Seite (Bodenplatten.center) passiert, dass meine Einstellungen bei einem Update verloren gegangen sind weil ich kein Child gemacht habe. Damle für Dein Mitdanken.

>>Die Flexbox ist eine super Sache, dennoch musst du zur Steuerung deines Layouts noch Media Queries einsetzen.

Nachfolgendes CSS steuert deine Boxen so, dass die bis zu einer Monitorauflösung von z.B. 600px eine Breite von 100% annehmen und untereinander angeordnet werden:

Ich vermute mal, dass ich mich hier noch intensiver einlesem muss. Vermutlich zuerst das Seitenlayout ändern... aber ich habe noch eine andere, für mich im Moment vordringlichere Frage die ich noch nicht einordnen kann und im CSS Kompendium nicht herausfinde:

Ich arbeite an der Seite https://naturalstone.ch/granittisch/

Ich habe dieses Posting heute um 14 Uhr angefangen. Jetzt ist es 19 Uhr. Und ich habe viel gelernt Dank Deinem Hinweis @Media.
Um 14 Uhr hatte ich noch 1000 fragen. Jetzt bin ich müde... und mache einen Unterbruch. Denn im Moment weiss ich gar nicht, was ich fragen will oder was mir nicht gefällt. Aber eines weiss ich ganz sicher: Vielen Dank Dir.

Danke übrigens vielmals für den Link von Responsive Check. Der hilft sehr gut.

Viele liebe Grüsse
Markus

9 Salva

Hallo Markus.w

Stimmt schon: spätestens mit der rasanten Verbreitung der mobilen Geräten wurde Webdesign komplexer. Aber auch besser. Ich persönlich finde HTML 5 und CSS3 genial! Alleine schon die Effekte, die früher mit Javascript realisiert werden mussten, lassen sich inzwischen sehr gut umsetzen. Alles nur eine Frage der Übung :)

Da deine Seite wieder aufrufbar ist, habe ich die mal intensiv durchforstet. Richtig geil, was du da alles anbietest! Damit lässt sich was schönes basteln :) Auch für deinen neuen Internetauftritt!

Zum Thema:

Ich will dir natürlich nichts einreden. Das vorweg. Da ich aber selbst gerne und viel mit Wordpress arbeite, aktuell an http://www.allcrime.watch/crimetime/ - bin ich der Meinung, dass du dein Projekt von der falschen Seite aus angehst bzw. anders vorgehen solltest.

Zunächst solltest du dir die Frage stellen, ob deine LeserInnen zu den Granittischen, Bodenplatten, Pergolen usw. Kommentare abgeben dürfen bzw. sollen. Sprich: interagieren. Falls ja, dann nutze Wordpress als das, für das es ursprünglich gedacht war: als Blog. Das heißt, dass du für jedes deiner Themen (Granittische, Bodenplatten, Pergolen usw.) einen eigenen Beitrag schreibst. Die aktuellen Bilder kannst du ganz einfach als "Beitragsbild" einfügen und die Kommentarfunktion aktivieren.

Falls keine Kommis abgegeben werden sollen/dürfen, dann baue Wordpress zum CMS (Content Management System) um. In diesem Fall legst du für jedes Thema eine SEITE an, in der du dann auch dein eigenes HTML einfügen kannst (z.B. die HTML für die Flexboxen). Dieses "Custom HTML" stylst du dann über den "Customizer" -> "Zusätzliches CSS". Bei einem Theme-Update gehen dann nämlich weder dein HTML, noch dein CSS verloren.

Aber grundsätzlich bzw. vorweg:
Warum das Rad neu erfinden? Es gibt eine ganze Menge Wordpress Themes und die sind sogar schon responsiv bzw. adaptiv! Suche dir also eines aus, dass deinen Vorstellungen am nähesten kommt und das stylst du dann über den Customizer im Detail per CSS um. Speziell die Sidebar, Widgets, Plugins usw. Das spart dir eine Menge Entwicklungszeit, die du besser für deinen Inhalt nutzen kannst.

Auf meinem oben verlinkten Blog kannst du sehen, wie ich das umgesetzt habe. Bin aber noch nicht fertig :)

Was die Media Queries betrifft:
Gucke im style.css des Themes nach, welche dort eingetragen sind. Die Blöcke, wie z.B.

/* media queries */
@media only screen and (max-width: 600px) {
Dein CSS
}

kopierst du in den Customizer und passt dann dein eigenes HTML per CSS an. Mit dem Responsive Checker kannst du dein Layout zwischendurch ganz gut überprüfen. Dabei gilt: Gehe immer vom kleinsten Layout (Handy) zum größten (Tablet, Laptop, Widescreen Monitore), denn grundsätzlich bestimmt der Inhalt (Texte, Bilder usw.) das Layout und nicht umgekehrt. Was also auf dem Handy wunderbar zu lesen ist, funktioniert am Tablet & Co. sowieso. Aber wie gesagt: wenn du dich nach den Media Queries des Themes richtest, kannst du nichts falsch machen.

So. Ich denke, dass du erst mal einiges zum grübeln hast! Melde dich einfach, wenn du Fragen hast. Okay?

Bis dann also und viel Spaß beim tüfteln ;)

LG, Salva

nach oben

CSS Rahmen um eine Box mit Floating left

Beitrag schreiben (als Gast)