Zentrieren mit Mindestabstand beim Floaten

[Tini]

Hallo,

ich habe ein fixiertes Navi links und daneben eine zentrierte Div-box, die aber beim verkleinern der Seite unter das Navi rutscht. Ich wollte fragen ob es die Möglichkeit gibt, dort einen Mindestabstand einzubauen.

Schon mal vielen Dank im voraus.

[Gunnar Bittersmann]

@@Tini

ich habe ein fixiertes Navi links und daneben eine zentrierte Div-box, die aber beim verkleinern der Seite unter das Navi rutscht. Ich wollte fragen ob es die Möglichkeit gibt, dort einen Mindestabstand einzubauen.

Um deiner Frage zuvozukommen: Ja, die Möglichkeit gibt es.

Schon mal vielen Dank im voraus.

Gerngeschehn.

LLAP 🖖

PS: Für weitere Auskünfte stehen wir natürlich gern zur Verfügung. Nur solltest du vorher überlegen, welche Informationen wir dafür von dir bräuchten.

[Tini]

Ach so ja, super. Danke. Aber wie mache ich das denn? Ich hoffe ich habe alle notwendigen Informationen getroffen.

Liebe Grüße Tini

#body {
	background-repeat: no-repeat;
	color: #F8F8F8;
	width: auto;
	height: auto;
	padding-left: 6%;
	position: relative;

#navi {
	height: 305px;
	width: 18%;
	float: left;
	font-style: normal;
	font-weight: 100;
	margin-right: 6%;
	min-width: 210px;
	position: fixed;
}

#text {
	height: auto;
	width: 30%;
	float: left;
	margin-right: 4%;
	margin-bottom: 25%;
	min-width: 200px;
	margin-left: 25%;
	min-margin: 300px;

#textcl {
	clear: left;
}

<div id="body">

<header id="header">
 
  <div id="logo"></div>
  <div id="headertext">.....</div>
  
  <div id="headercl"></div>
  </header>
  
  
  
<nav id="navi">
.....
</nav>

<div id="text">....
</div>
<div id="textcl"></div>

 </div>

[Gunnar Bittersmann]

@@Tini

Wie du durchs Syntax-Highlighting erkennst, ist der CSS-Code fehlerhaft. (Es fehlen Klammern.)

#navi { height: 305px } ist überhaupt keine gute Idee. Was bei dir in 305 Pixel Höhe passt, braucht bei anderen womöglich mehr Platz.

Und float ist auch überhaupt keine gute Idee. Mit Flexbox (unten auf der Seite gibt’s Beispiele) und Grid stehen vernünftige Werkzeuge zum Layouten zur Verfügung. Das mit Floats hinzufrickeln, ist Schnee von vorgestern.

LLAP 🖖

[Rolf B]

Hallo Tini,

grundsätzlich lautet die Antwort heute eigentlich: Benutze float dafür nicht mehr, sondern Flexbox oder Grid. Mit Flexbox brauchst Du für eine Seite mit Header, Navigationsleite links und Footer diese Grundstruktur:

<header>
</header>
<div class="mainPart">
<nav>
</nav>
<main>
</main>
</div>
<footer>
</footer>

Und diese CSS Eigenschaften:

.mainPart { display: flex; }

nav { flex: 0 0 10em; }
main { flex: 1 0 auto; }

display:flex aktiviert das Flexbox-Layout. Die flex-Eigenschaft vereint flex-grow, flex-shrink und flex-basis; das liest Du Dir besser im Wiki genauer durch. Hier nur so viel: flex: 0 0 10em macht das nav Element 10em breit und verändert die Breite nicht, wenn sich die Breite des Browserfensters ändert. flex: 1 0 auto als Partner dazu lässt das main Element den Rest füllen. In den meisten Fällen reicht diese Struktur aus. Dein zentriertes DIV kannst Du dann ins main Element hineinlegen (du machst das mit margin:auto, gelle?)

Willst Du rechts von main noch eine Info-Box unterbringen, füge ins .mainPart div noch ein aside-Element hinzu und gib ihm ebenfalls flex: 1 0 xxx (xxx=benötigte Breite). Willst Du main und aside in einem bestimmten Breitenverhältnis haben, z.B. 3:1, dann setze diese Zahlenwerte bei flex-grow (also dem ersten Wert der flex-Eigenschaft) ein.

Rolf

[marctrix]

Hej Rolf,

Und diese CSS Eigenschaften:

.mainPart { display: flex; }

nav { flex: 0 0 10em; }
main { flex: 1 0 auto; }

Gegenvorschlag:

.mainPart {
 display: grid;
 grid-template-columns: 10em 1fr;
}

display:flex […]

Klingt kompliziert.

Wenn du in Grid eine Spalte mehr möchtest, kannst du die in der Zeile

grid-template-columns: 10em 1fr;

eine weitere Spalte leicht hinzufügen.

So (wenn die 20em breit sein soll):

grid-template-columns: 10em 1fr 20em;

Finde ich ich einfacher.

Zur Erklärung: 1fr verteilt den verfügbaren Platz gleichmäßig an alle Spalten, die 1fr zugeordnet bekommen.

Verhältnisse stellt man so dar

1:2

grid-template-columns: 1fr 2fr;

2:3

grid-template-columns: 2fr 3fr;

2:3:1:100

grid-template-columns: 2fr 3fr 1fr 100fr;

Ich glaube nicht, dass es noch einfacher geht 😉

Marc

[marctrix]

Hej marctrix,

ach so: zentrieren kann man in grid mit justify-items und align-items sowohl horizontal, als auch vertikal.

Einzelne Elemente richtet man mit justify-self und align-self aus.

Damit kann die Krücke 'margin: autoentsorgt werden (mitdisplay: flex` ist dasselbe zugegebenermaßen ebenfalls möglich - der der Rest ist mit Grid einfacher umsetzbar und man hat mehr und genauere Möglichkeiten zum Positionieren auf dem Raster - man kann sogar mehrere Elemente auf demselben Grid-Bereich einander überlagern lassen (so wie mit position) und sich später noch mit dem Positionieren in Zeilen des Rasters beschäftigen, statt nur eindimensional in Spalten).

Anschaulich wird das ganze in den vielen Beispielen von Rachel Andrews. Da gibt es auch ein paar fertige Lösungen — die mir aber nicht gefallen, weil mir da viele zu viele Angaben in Pixeln sind, daher kein Link von mir auf die entsprechende Unterseite - als Beispiele Ding die ok, für den produktiven Einsatz in responsiven Seiten eher nicht. Jedenfalls nicht ohne eigene Anpassungen.

Marc

[marctrix]

Hej Tini,

ich habe ein fixiertes Navi links und daneben eine zentrierte Div-box, die aber beim verkleinern der Seite unter das Navi rutscht. Ich wollte fragen ob es die Möglichkeit gibt, dort einen Mindestabstand einzubauen.

Dafür gibt es margin - besser (und einfacher) wird es aber mit css grid.

Wenn du magst, können wir uns dein HTML auch mal vornehmen.

Was das CSS betrifft: es wird empfohlen Klassen statt IDs zu verwenden, wenn es um Layout-Zwecke geht. Das macht es leichter später Dinge zu überschreiben. Das liegt an der hohen Spezifität der IDs…

Marc

[Gunnar Bittersmann]

@@marctrix

Was das CSS betrifft: es wird empfohlen Klassen statt IDs zu verwenden, wenn es um Layout-Zwecke geht.

Von wem?

Das macht es leichter später Dinge zu überschreiben. Das liegt an der hohen Spezifität der IDs…

Das sagen meist diejenigen, die das C in CSS noch nie verstanden haben.

Wenn ein Element einmalig ist (bspw. "navi"), dann ist eine ID dafür völlig in Ordnung. Auch zum Stylen. Man will ja gerade diesem einen Element die Stile geben. Da ist die höhere Spezifität von ID-Selektoren dein Freund, nicht dein Feind.

Ein <div id="body"> allerdings macht keinen Sinn. Man sollte einem Ding keine ID verpassen, die schon anderweitig für ein anderes Ding (<body>) vergeben ist.

Und vermutlich ist dieses Ding sowieso überflüssig, „bedauerlich bis ärgerlich“.

LLAP 🖖