|
|||
Hilfe bei Flexiblen Boxen gewünscht
Hallo Leute,
Ich verzweifle seit 2 Tagen an diesem Konstrukt: ____________________ ____________________ |Box 1____||Box 2____| |Box 3____||Box 4____| |Box 5 ______________| |Box 6 ______________| _________________________________________ |Box 7__|Box 8____________________________| |Box 9 ___________________________________| Bildschirm anzeige kleiner als 60em ____________________ |Box 1____|Box 2_____| |Box 5 ______________| ____________________ |Box 3____|Box 4_____| |Box 6 ______________| ____________________ |Box 7__|Box 8_______| |Box 9 ______________| kann mir zufällig jemand sagen wie ich das hinbekomme oder geht das erst gar nicht? |
Sponsored Links |
|
|||
display grid ist keine Option? https://developer.mozilla.org/de/docs/Web/CSS/grid
|
Sponsored Links |
|
|||
display grid kannte ich bis jetzt noch nicht.
Aber ich sehe auch gerade keine möglichkeit das es so wird wie ich es brauche. Zumal das was ich vorhabe ein Formular sein soll. Box 1 soll ein Bild werden Box 2 das input Box 5 Fehlermeldung usw... |
|
|||
Mit grid-areas und media queries ist das sehr wohl möglich. https://www.smashingmagazine.com/und...emplate-areas/
Aber du schreibst das soll ein Formular sein, wieso ist dann das HTML so komisch aufgebaut. Das müsste dann doch ____________________ ____________________ |Box 1____||Box 2____| |Box 4____||Box 5____| |Box 3 ______________| |Box 6 ______________| usw. sein? Das ist doch die schönste Lösung, dann sind deine Elemente auch korrekt im Quelltext geordnet. |
|
|||
Dann solltest du die Inhalte nicht nur danach gruppieren, sondern auch nach ihren logischen Zusammenhängen. Und die "großen Boxen" (mit bild, form-control und text) im gesamten Ordnen.
|
|
|||
Jetzt habe ich doch noch eine Frage zu den Grids,
Ich habe nun einige grids gebaut in etwa so: HTML-Code:
.div1 { grid-area: 1 / 1 / 2 / 2; background: #CCCCCC; } .div2 { grid-area: 1 / 2 / 2 / 3; background: #00529b; } .div3 { grid-area: 1 / 3 / 2 / 4; background: #CCCCCC; } .div4 { grid-area: 1 / 4 / 2 / 5; background: #00529b; } wie kann ich denn nun am einfachsten z.B. div1 und div3 .... die gleichen css anweisungen geben? ALso z.B. die selbe Hintergrundfarbe oder breite etc... x mal grid-area: x / x / x / x geht nicht. |
|
|||
Warum verwendest du keine named areas? Das würde das doch einfacher machen?
https://developer.mozilla.org/de/doc...template-areas Code:
.item1 { grid-area: header; } .item2 { grid-area: menu; } .item3 { grid-area: main; } .item4 { grid-area: right; } .item5 { grid-area: footer; } .grid-container { display: grid; grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; } Dafür ist CSS da. Die elemente, die das gleiche Aussehen haben sollen bekommen die gleiche Klasse. Code:
<div class="important"> Das ist text </div> <div> Das ist text </div> <div class="important"> Das ist text </div> .important {font-weight: bold} |
Sponsored Links |
|
|||
Danke für die Hilfe aber ich habe es so eben an den Nagel gehängt.
Ich bekomme es nicht so hin wie ich es haben möchte also kommt was fertiges rein und gut ist. Gruß |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Drei Boxen mit gleicher Höhe in allen Browsern | felicesinger | CSS | 22 | 09.04.2016 05:35 |
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! | Web4Live | CSS | 2 | 13.07.2011 17:01 |
Mitwachsende Container: 4 Boxen | Cu Chullain | CSS | 1 | 08.09.2010 19:57 |
Boxen beim Seitenladen zuklappen (ohne "Flackern") | Plasm | Javascript & Ajax | 5 | 08.01.2010 17:42 |
css 2 boxen in einer box brauche hilfe !! | beavis-2005 | CSS | 9 | 13.01.2006 20:06 |