Frage Zu <Table>,<td> und <tr>

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Ich wollte nur wissen, ob GRID die CSS gleich in die HTML reinschreibt - so sieht das bis jetzt für mich aus - oder ob das auch wie früher ist.
Das ist genau wie früher, bei Grid hast Du die selben Möglichkeiten, das CSS zu notieren oder auszulagern.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Grid kommt darin aber fast nur am Rande vor, und auch nicht so penibel genau, wie beim HTML und CSS-Thema vorher im Buch.
OK, dann ist dieses Buch keine Hilfe.

Was deinen Link betrifft:

Du hast da drei Container mit jeweils unterschiedlichem Inhalt. Da macht es wenig Sinn, allen das selbe Grid-CSS zuzuweisen. Der mittlere ist ja nur fortlaufender Text und da braucht es gar kein Grid.

Die Navigation oben geht sehr in die Breite, so dass man scrollen muss. Ich sehe zwei Möglichkeiten, das zu lösen:
  1. Die Schrift etwas kleiner machen, natürlich nicht zu stark, so dass sie immer noch gut lesbar ist.
  2. Zeilenumbruch zu erlauben mit folgendem Grid-CSS:
Code:
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
PS: Du kannst die drei Container schon sehr gut auseinander halten, wenn Du semantische Tag verwendest, also <nav> für den oberen, <main> für den mittleren und <footer> für den unteren.
 
Werbung:

Alois

Mitglied
23 Januar 2021
96
0
6
Das ist genau wie früher, bei Grid hast Du die selben Möglichkeiten, das CSS zu notieren oder auszulagern.
Aber hier ist das doch in der HTML-Datei mit drinnen:
<!DOCTYPE html> <html> <head> <style> body { background: none; } </style> <meta charset="utf-8" /> <style> html { background-image: url(../Bilder/neons.jpg); } .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 1px; justify-items: center; align-items: center; }
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Schon, das muss aber nicht so sein, Du kannst es genau so gut heraus lösen und in eine externe Datei legen.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Die alte Website sieht doch sehr gut aus, nur mit der Einschränkung, dass sie Tabellenlayout verwendet. IMO ist der Footer so völlig OK. Die Navigation oben kannst Du auf Grid oder Flex umstellen, wie Du es schon begonnen hast.
Und bei dem mittleren Hauptbereich ist weniger mehr: Du willst die Elemente ja nur untereinander anordnen und dazu brauchst Du weder eine Tabelle noch unbedingt Grid oder Flex.
 

Alois

Mitglied
23 Januar 2021
96
0
6
Du willst die Elemente ja nur untereinander anordnen und dazu brauchst Du weder eine Tabelle noch unbedingt Grid oder Flex.
Und da komme ich einfach nicht weiter. Die oberen "Kästen" kriege ich z.B. nicht ohne Zwischenraum hin. Den Text in der Mitte auch nicht ohne Grid.....muss wohl noch viel üben!
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Für Zwischenräume musst Du dich über Margin und Padding informieren. Das ist "klassisches" CSS und müsste in deinem Buch beschrieben sein. Oder Du siehst es dir bei Selfhtml an:

Und für horizontale Zentrierung gibt es das klassische text-align: center; oder mit Flex geht es auch sehr gut:
Code:
display: flex;
flex-direction: column;
align-items: center;
oder auch mit margin: 0 auto;
 

Alois

Mitglied
23 Januar 2021
96
0
6
Und für horizontale Zentrierung gibt es das klassische text-align: center; oder mit Flex geht es auch sehr gut:
Code:
display: flex;
flex-direction: column;
align-items: center;
oder auch mit margin: 0 auto;
Hm....das funktioniert aber mit <img src="Bilder...."> leider nicht, und wenn ich nur das <center> davor setze geht es zwar, aber dann meckert W3C.
Jetzt habe ich es aber doch hingekriegt.
Ein paar Dinge sind mir aber noch unklar:
Muss jeder Bestandteil der Website-Seite in einen Container?
Ich dachte HEAD, BODY und FOOTER können jeweils unterschiedlich "konstruiert" werden. Als footer hätte ich nämlich gerne den ursprünglichen....naja, ich übe noch
 
Zuletzt bearbeitet:
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Das ist ja erfreulich, dass Du dich nicht mit einem "funktioniert irgend wie" zufrieden gibst, sondern bemerkt hast, dass das <center> veraltet und nicht mehr valide ist.

Das Zentrieren von Bildern mit Flex funktioniert jedoch einwandfrei, wie Du hier sehen kannst:

Möglicher Weise hast Du die Flex-Regeln auf das img-Tag selber angewendet. Du musst diese beim umgebenden Container notieren, in diesem Fall dem main-Element.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Ein paar Dinge sind mir aber noch unklar:
Muss jeder Bestandteil der Website-Seite in einen Container?
Ich dachte HEAD, BODY und FOOTER können jeweils unterschiedlich "konstruiert" werden.
Letzteres trifft zu und eine Inflation von Containern erschwert nur den Überblick und macht die Struktur unnötig kompliziert.

Als footer hätte ich nämlich gerne den ursprünglichen
Das ist kein Problem, Du kannst das HTML und CSS des Footer von deiner ursprünglichen Seite übernehmen.
 
Werbung:

Alois

Mitglied
23 Januar 2021
96
0
6
Letzteres trifft zu und eine Inflation von Containern erschwert nur den Überblick und macht die Struktur unnötig kompliziert.


Das ist kein Problem, Du kannst das HTML und CSS des Footer von deiner ursprünglichen Seite übernehmen.
Stimmt. Hat geklappt. Merci! ;-)
 

Alois

Mitglied
23 Januar 2021
96
0
6
Die alte Website sieht doch sehr gut aus, nur mit der Einschränkung, dass sie Tabellenlayout verwendet. IMO ist der Footer so völlig OK. Die Navigation oben kannst Du auf Grid oder Flex umstellen, wie Du es schon begonnen hast.
Und bei dem mittleren Hauptbereich ist weniger mehr: Du willst die Elemente ja nur untereinander anordnen und dazu brauchst Du weder eine Tabelle noch unbedingt Grid oder Flex.
Ich habe inzwischen die Startseite erfolgreich (?) umgeschrieben. Was mich jetzt aber stört, ist dass man beim Aufrufen der Seite, oder auch beim neu laden, kurz ein Hintergrundflackern sieht mit dem Abbild dieser Seite. Wie kann ich das denn beseitigen?
https://welse.net/1 HTML-Test/Grid/grid 13.html
Inzwischen passiert das beim Start nicht mehr, "nur" noch beim neu laden...
 
Zuletzt bearbeitet:
Werbung:
Werbung: