|
|||
Was hier noch zu sagen ist: Wird die Sidebar nur dafür verwendet ein Hintergrundbild anzuzeigen dann ist das auch nicht sinnvoll und zielführend, dann kann das Hintergrundbild gleich auf eine große Seite gesetzt werden.
|
Sponsored Links |
|
|||
Richtig. Mir ist halt nicht klar ob das aside-Element noch mit Inhalt gefüllt wird oder nicht. Falls nicht wäre es richtig das Hintergrundbild in den body einzufügen und auf das aside-Element komplett zu verzichten. Wie schon geschrieben sind überflüssige Elemente nach den HTML5-Regeln zu vermeiden. Und leere Elemente sind immer überflüssig.
|
Sponsored Links |
|
||||
Zitat:
Zitat:
Alles ist so, wie ich es haben möchte. Vielen Dank! ich kenne mich zwar ein bisschen mit CSS aus, aber ein Experte bin ich leider nicht. Daher verstehe ich ein paar Sachen nicht. Code:
@media all { .sidebar { background-image: url(https://picsum.photos/900/450); background-repeat: no-repeat; background-size: contain; width: 100%; height: calc(100vw * 0.485); } } Code:
height: calc(100vw * 0.485); Code:
@media only screen and (min-width: 901px) { .sidebar { background-image: url(https://picsum.photos/800/1200); position: fixed; top: 0; right: 0; width: calc(100vh * 0.668); height: 100vh; } } Code:
width: calc(100vh * 0.668); Auch die folgenden Zeilen verstehe ich nicht so recht. Wieso wird in der Breite auch noch 1rem abgezogen? Wieso wird da ein Außenabstand gesetzt? Code:
@media only screen and (min-width: 901px) { .content { width: calc(100% - 100vh * 0.67 - 1rem); margin: 0.5rem; } } Zitat:
Zitat:
|
|
|||
habe mich jetzt noch einmal intensiv mit deinem Beispiel beschäftigt. Nun verstehe ich schon deutlich mehr.
Eine Frage habe ich aber noch zum folgenden: Zitat:
Was ist denn daran besser im Vergleich zur breiten Angabe in Prozent? |
|
|||
Das zu erklären füllt ganze Kapitel in Büchern, damit ist der Beitrag in einem Forum schlicht überfordert.
Deshalb als Denkanstoß und Beginn der Einarbeitung. In HTML und CSS hat die Einheit % (Prozent) ganz unterschiedliche Grundlagen. Und zwar häufig solche, die ohne Hintergrundwissen nicht erwartet werden. Siehe zum Beispiel: Cascading Style Sheets { Grundlegendes : Prozentangaben in CSS } Zudem sind viele %-Angaben nicht fest, heißt: Sie können keinen Raum schaffen. Das gilt speziell für height-Angaben. Das muss man schlicht lernen, ansonsten wird man immer wieder mit unerwarteten Größen und Abständen bei %-Angaben überrascht werden. Um dem abzuhelfen wurden die Einheiten vw und vh eingeführt. Die verhalten sich leider wieder etwas anders als vergleichbare %-Angaben. Ein gedankliches Gleichsetzen von % mit vw oder vh führt deshalb in der Regel zu neuen Problemen. Der große Vorteil ist aber, das vw und vh Größe und Platz schaffen können. Im Gegensatz zu % sind vw direkt einer Breite und vh direkt einer Höhe zugeordnet. Deshalb ist Zitat:
Zitat:
Code:
height: calc(100vw * 0.485); Die Höhe von .sidebar muss sich proportional zum Bild anpassen. Das geht nicht im %-Angaben, da die keine Höhe schaffen können. Rechnerisch wäre der Wert 0.5, da vw aber anders als % funktioniert bin ich durch ausprobieren auf 0.485 gekommen. Code:
width: calc(100vh * 0.668); Code:
width: calc(100% - 100vh * 0.67 - 1rem); Deshalb muss die Breite vom main-Element (.content) begrenzt werden. Also 100 % minus die Breite von .sidebar: Code:
width: calc(100% - 100vh * 0.67); Code:
width: calc(100% - 100vh * 0.67 - 1rem); |
|
|||
wenn ich beispielsweise ein Hintergrundbild über die ganze Webseite verwenden möchte, dann wird ein Bild mit 1920 × 1080 Pixel wohl nicht reichen, nehme ich an. Reicht ein Bild mit den Ausmaßen 2560 × 1440 oder brauche ich das noch größer?
|
Sponsored Links |
|
|||
Dann musst du ein Bild wählen welches auch auf großen Auflösungen gut ausschaut. Bei welchen Bildern das der Fall ist musst du für dich (und deine Website) entscheiden.
In der Regel bist du mit HD-Auflösung noch gut bedient. Du kannst natürlich auch zB eine maximale Breite für Bilder vorgeben. Oder eben auf den Einsatz von pixel-Bildern (jpg, etc.) verzichten und statt dessen SVG nehmen. https://developer.mozilla.org/de/doc...lement/picture Eine weitere Möglichkeit ist, für unterschiedliche Auflösungen unterschiedliche Bilder auszuliefern, dafür müssen aber die Bilder natürlich schon vorhanden sein. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 Spalten Layout INKL. 1 Spalten Layout | miedsegadse | CSS | 20 | 14.04.2011 00:02 |
Layout: 2 Spalten gleich langer Höhe | Boof | CSS | 1 | 05.03.2010 10:50 |
Layout mit bis zu 7 Spalten (DIV) | michael-r | CSS | 3 | 23.06.2009 18:26 |
3 Spalten Layout, mal anders | Sushimeister | CSS | 2 | 05.03.2007 11:15 |
3 Spalten Layout in CSS | sisa | CSS | 1 | 22.09.2006 09:28 |