zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe bei Flexiblen Boxen gewünscht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.05.2021, 16:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.05.2021, 16:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

display grid ist keine Option? https://developer.mozilla.org/de/docs/Web/CSS/grid
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.05.2021, 19:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

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 Zitat antworten
  #4 (permalink)  
Alt 27.05.2021, 09:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 27.05.2021, 11:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

Die Sortierung ergab sich sich einfach von Links nach Rechts und Oben nach unten und sollte keine wertung nur eine nummer sein.
Mit Zitat antworten
  #6 (permalink)  
Alt 27.05.2021, 12:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

So habe es hinbekommen.

Danke für die Hilfe.
Mit Zitat antworten
  #7 (permalink)  
Alt 27.05.2021, 14:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von StandBy1 Beitrag anzeigen
Die Sortierung ergab sich sich einfach von Links nach Rechts und Oben nach unten und sollte keine wertung nur eine nummer sein.
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 27.05.2021, 20:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

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;
}
das geht bis 24

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 28.05.2021, 09:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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';
}
Zu deiner eigentlichen Frage:
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}
Alle divs mit Klasse important bekommen einen fett gedruckten Text.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.05.2021, 10:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

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ß
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:57 Uhr.