Ich sehe, dass du gerade erst anfängst und noch so gut wie kein CSS geschrieben hast. Da würde ich dir gerne direkt ein paar Tipps geben. Eigentlich kannst du dein komplettes CSS direkt wieder löschen, du brauchst davon keine einzige Angabe (außer der Hintergrundfarbe).
Code:
headerbild {
width:980;
height:250;
position:relative;
float:left;
z-index:9999
}
titelback {
width:980px;
height:150;
overflow:hidden;
clear:both;
margin-top:-100px;
z-index:-1
}
body {
width:980px;
height:auto;
min-width:1200px;
min-height:100vh;
margin:0 auto;
vertical-align:top;
text-align:left;
background-color:rgba(255,0,0,1)
}
Breiten und Höhenangaben sind eine schlechte Idee, du versperrst dir damit den Weg zur responsiven Website.
ID-Selektoren haben eine Raute davor - #headerbild
Fast alle Größenangaben in CSS benötigen eine Einheit - width:980; wäre falsch.
z-index benötigst du dort nicht. Wenn du mal einen benötigst, dann setze ihn nur so hoch, wie du ihn benötigst, z.B. auf 1 oder 2.
vertical-align greift nicht auf Block-Elemente - hier body.
Die Höhe des Headers im Layout kannst du weglassen, dann passt er sich an den Inhalt an.
clear benötigst du nur, wenn das voherige Element gefloatet ist.
Die Breite und Zentrierung wird über den #wrapper gesteuert, BODY benötigt also keine Breite usw.
Du kannst das hier in dein CSS einfügen.
Code:
.image_container img {
display: block;
}
Alle Bilder in Contao Bildelementen sind dann Block-Elemente, d.h. sie verhalten sich nicht mehr wie Text, welcher u.a. auch immer einen kleinen Abstand nach unten hat.
Und dies hier.
Code:
html {
overflow-y: scroll;
}
Damit verhinderst du später mal ein "Menüspringen". Der Platz für eine Scrollleiste wird dabei freigehalten, sodass dein Inhalt immer an der gleichen horizontalen Position sitzt, ob du eine Scrollleiste hast oder auch nicht.
Bilder werden nicht dargestellt und keine Zentrierung
Zitieren
.
Zitat von das Kreativ-Dezernat
Lesezeichen