nicht angemeldet
Gunnar Bittersmann
Auge
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Rolf B
Moin,
ich sitze jetzt schon ein paar Stunden vor den Flexboxen. Ich will im Header 3 Boxen haben die nach Anteilen 1 | 3 | 1 aufgeteilt sind und das ganze zwei mal untereinander. Also das Ganze soll dann wie folgt aussehen:
1 | 3 | 1 1 | 3 | 1
Mein Problem: ich komme bis zu
1 | 3 | 1
1
die nächste 3 wird dann entweder zwischen 1 3 1 und 1 geschoben, ganz ans Ende der Seite verschoben, oder ganz nach oben.. Ich weiß nicht mehr was ich tun soll. Ich habe für die jeweils 1. 1 die gleiche Box benutzt, das funzt super. Will ich aber für die 3en die gleiche Box benutzen eben nicht mehr. Allerdings auch nicht mit einer eigenen Box. Könnt ihr mir da helfen? Die Flex sind als row.
Antworten an meine Mailadresse wären super.
[Edit 20180710_1219: TS]
hallo
ich sitze jetzt schon ein paar Stunden vor den Flexboxen. Ich will im Header 3 Boxen haben die nach Anteilen 1 | 3 | 1 aufgeteilt sind und das ganze zwei mal untereinander. Also das Ganze soll dann wie folgt aussehen:
1 | 3 | 1 1 | 3 | 1
Mein Problem: ich komme bis zu
1 | 3 | 1
1
Du stellst sehr unflexible Anforderungen. Gridboxen sind dafür zuständig.
@@Bubi
ich sitze jetzt schon ein paar Stunden vor den Flexboxen. Ich will im Header 3 Boxen haben die nach Anteilen 1 | 3 | 1 aufgeteilt sind und das ganze zwei mal untereinander. Also das Ganze soll dann wie folgt aussehen:
1 | 3 | 1 1 | 3 | 1
Ein zweidimensionales Raster. Dafür ist Flexbox nicht gemacht. Verwende Grid.
display: grid; grid-template-columns: 1fr 3fr 1fr — fertig.
Antworten an meine Mailadresse wären super.
Nein. Andere wollen von den Antworten auch was haben.
LLAP 🖖
Vielen Dank für eure Hilfe! :)
Bin neu, deswegen dachte ich mit Flex geht das. Gut, dann schreibe ich das neu in Grid.
Und sorry, hab nicht gewusst ob ich die Antwort danach hier finde oder sie irgendwo verschwinden, deswegen die bitte mit der Mailadresse.
Hallo
Und sorry, hab nicht gewusst ob ich die Antwort danach hier finde oder sie irgendwo verschwinden, deswegen die bitte mit der Mailadresse.
Wie du siehst, sind die Antworten tatsächlich hier zu finden. Das hier ist schließlich ein Forum. Allerdings verschwindet dieser Thread irgendwann im Archiv. Aber auch dort ist er, die richtigen Suchbegriffe und Schalter vorausgesetzt, über unsere Suche auffindbar. Über die Suchmaschine deiner Wahl ist er es sowieso.
Tschö, Auge
Noch eine Frage.
Erstmal hat das echt schnell und einfach soweit geklappt, nur wenn ich jetzt die zweite Zeile eintragen möchte dann nimmt er zwar auch hier wieder den 1. Eintrag, aber den 2. schmeißt er ihn nach ganz rechts. Ich habe den ersten container geschlossen und dann wieder einen "aufgemacht" um die zweite Zeile zu beginnen. Was mache ich dort falsch? bzw. wie beginnt man die zweile Zeile, so dass es dann auch wirklich funktioniert?
@@Bubi
Was mache ich dort falsch?
Keine Ahnung.
Was du hier falsch machst: Du zeigst nicht, was du dort überhaupt machst.
LLAP 🖖
also im CSS sieht mein Grid so aus:
.grid-container {
display: grid;
grid-template-columns: 1fr 5fr 1fr;
padding: 1px;
}
.grid-item {
padding: 1px;
text-align: center;
}
im HTML dann so:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<div class="grid-container">
<div class="grid-item">4</div>
bis hier hin klappt es wie ich es will, aber ab item 5 dann nicht mehr. da haut es mir das item nach ganz rechts.
Muss ich einen .grid-container_2 {} einsetzen? Laut w3schools sollte er das sogar alles automatsich machen, ohne dass ich den grid zwischendrin schließe, aber das tut er nicht.
zusätzlich habe ich folgendes (da muss irgendwo der fehler liegen)
#logo {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
width: 150px;
float: left;
}
a {
text-decoration: none;
color: #7fb962;
font-size: 150%;
font-weight: bold;
font-family: arial;
}
a:hover {
text-decoration: underline;
}
#topbar-sec {
float: left;
margin-top: 20px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 30px;
}
.topbar-section {
float: left;
border-left: 1px #827458 solid;
margin-top: 20px;
margin-bottom: 10px;
margin-right: 10px;
padding-left: 5px;
height: 23px;
}
#kategorie {
float: left;
width:150px;
margin:0 auto;
margin-right: 1010px;
margin-top: 50px;
height: 500px;
background-color:
}
#kat_allg {
list-style-type: none;
margin: 0;
padding: 0;
width: 150px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #7fb962;
padding: 8px 6px;
text-decoration: none;
font-size: 100%;
}
li a:hover {
background-color: #7fb962;
color: white;
text-decoration: none;
}
#choose {
background-color: #827458;
color: white;
text-decoration: none;
}
<div class="grid-container">
<div class="grid-item"><a href="https://www.-----.de" target="_blank"><img id="logo" src="images/PM_logo.png"></a></div>
<div class="grid-item">
<div id="topbar-sec"><a href="#"> A </a></div>
<div class="topbar-section"><a href="#"> B </a></div>
<div class="topbar-section"><a href="#"> C </a></div>
<div class="topbar-section"><a href="#"> D </a></div>
<div class="topbar-section"><a href="#"> E </a></div>
<div class="topbar-section"><a href="#"> F </a></div>
<div class="topbar-section"><a href="#"> G </a></div>
<div class="topbar-section"><a href="#"> H </a></div>
<div class="topbar-section"><a href="#"> I </a></div>
<div class="topbar-section"><a href="#"> J </a></div>
<div class="topbar-section"><a href="#"> K </a></div>
<div class="topbar-section"><a href="#"> L </a></div>
<div class="topbar-section"><a href="#"> M </a></div>
<div class="topbar-section"><a href="#"> N </a></div>
<div class="topbar-section"><a href="#"> O </a></div>
<div class="topbar-section"><a href="#"> P </a></div>
<div class="topbar-section"><a href="#"> Q </a></div>
<div class="topbar-section"><a href="#"> R </a></div>
<div class="topbar-section"><a href="#"> S </a></div>
<div class="topbar-section"><a href="#"> T </a></div>
<div class="topbar-section"><a href="#"> U </a></div>
<div class="topbar-section"><a href="#"> V </a></div>
<div class="topbar-section"><a href="#"> W </a></div>
<div class="topbar-section"><a href="#"> X </a></div>
<div class="topbar-section"><a href="#"> Y </a></div>
<div class="topbar-section"><a href="#"> Z </a></div>
</div>
<div class="grid-item">
Searchbar!
</div>
</div>
<div class="grid-container">
<div class="grid-item">
<div id="kategorie">
<ul id="kat_allg">
<li><a href="#">Kategorie 1</a></li>
<li><a href="#">Kategorie 2</a></li>
<li><a href="#">Kategorie 3</a></li>
<li><a href="#">Kategorie 4</a></li>
</ul>
</div>
</div>
<div class="grid-item">
</div>
</div>
dass es nicht perfekt geschrieben ist ist mir klar, mir geht es erstmal nur um den fehler.
@@Bubi
<div class="grid-item"><a href="https://www.-----.de" target="_blank"><img id="logo" src="images/PM_logo.png"></a></div>
Fehler: Der zwingend notwendige Alternativtext fehlt. Der sollte hier wohl „zur Startseite“ lauten.
Ansonsten: Online-Beispiel, bitte.
LLAP 🖖
@@Bubi
im HTML dann so:
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div> <div class="grid-container"> <div class="grid-item">4</div>
Warum 2 Grid-Container? (Abgesehen davon, dass präsentationsbezogene Klassen – also Inline-Styles – keine gute Idee sind.)
Ein Grid ist ein 2D-Raster, nicht nur eine Zeile.
Eine Klasse „grid-item“ ist völlig überflüssig.
bis hier hin klappt es wie ich es will, aber ab item 5 dann nicht mehr. da haut es mir das item nach ganz rechts.
Es steht immer noch die Frage: Wo kann man sich das ansehen?
LLAP 🖖
Hallo Bubi,
möglicherweise liegt das am Umfeld des Grid-Containers.
In einem JSFiddle funktioniert
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 5fr 1fr;
padding: 1px;
}
.grid-container div {
padding: 1px;
text-align: center;
border: 1px solid black; /* Hinzugefügt um die Zellgrenzen zu visualisieren */
}
tadellos, abgesehen von einem falschen Klassennamen (Klassen sollen kein Layout beschreiben, sondern Fachinhalte) und der akuten Divitis (möglicherweise bieten sich für dein Vorhaben semantisch passendere HTML Elementtypen als <div> an).
Rolf
danke, ich hab mal den zusatz mit den rahmen eingefügt. frag mich nicht warum, aber jetzt klappt es mit der zweiten reihe. ;D
Hallo Bubi,
was sich auf keinen Fall gut verträgt ist Grid- und Float-Technik.
Deine Buchstabennavigation ist da nicht das Problem, die einzelnen Einträge sind klein und du hast keine großen Margins drin, aber viele andere Elemente haben Margins und Floats, die mit Grid einfach nicht mehr nötig sind und dir das Grid zerreißen.
Deine Buchstabenkette oben kannst Du als Flexbox im Grid gestalten, mit einer Folge von a Elementen, ohne weitere Strukturierung.
Rolf