Wie schreibt sich auf HTML ein einfaches "Hintergrund Streifen"?
Würde gerne auf einer Homepage einen einfachen HTML Script einfügen welcher einen Streifen (Beispiel) in Farbe #000000 die gesamte hintere flache bedeckt (Dynamisch je nach Bildschirm Größe)
- etwa 30px höhe
- Breite bekanntlich dynamisch
- Farbe #000000
Siehe Bild als Beispiel
Könnte eventuell jemand einen HTML Script posten?
4 Antworten
Es gibt mehrere Möglichkeiten dafür. Am besten fügst du ein div Element hinzu:
<div id="blackStripe"></div>
Dieses positionierst du und stylst du mit CSS:
#blackStripe {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background-color: #000;
}
Live-Beispiel: https://jsfiddle.net/thwf0f88/
Eine weitere Möglichkeit ist die Nutzung von CSS Gradients:
body {
background: linear-gradient(to bottom, #fff, #fff calc(100vh - 30px), #000 calc(100vh - 30px)) fixed;
}
Live-Beispiel: https://jsfiddle.net/b5qvdxst/
Ich bevorzuge aus diversen Gründen die erste Variante.
"Aus diversen Gründen"
Welche wären das beispielsweise?
Ich würde eher die zweite Variante empfehlen. Das ist die aktuell gebräuchlichere. Absolute Positionierung ist nicht mehr state of the art und absolut positionierte Elemente brechen aus dem Layout aus, was nicht immer hilfreich ist. Außerdem vermeidest du so auch, ein Element nur des Stylings wegen in den DOM zu packen, wo es keinen inhaltlichen Zweck erfüllt und leer ist.
Ich würde ein Bild mit der gewünschten Farbe und Höhe erstellen und dann mit
background-repeat: repeat-xwaagrecht eine Zeile ausfüllen.
repeat- , Voreinstellung, das Hintergrundbild wird in x- und y-Richtung wiederholt
repeat-x- , das Hintergrundbild wird nur horizontal wiederholt
repeat-y- , das Hintergrundbild wird nur vertikal wiederholt
no-repeat- , keine Wiederholung des Hintergrundbildes
Diese Angaben entstammen https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-repeat
Ich hoffe dir damit geholfen zu haben
Klaus
auch wenn sie aus der mode kommen, ich würde das einfach mit einer tabelle machen. in dem fall einer einzelligen. setz den zellenrand auf 0 und die hintergrundfarbe auf schwarz. breite und höhe kannst du unabhänig von einander auf eine genaue pixelzahl oder einen prozentualen wert einstellen.
möchtest du, dass der streifen links und rechts einen festen abstand zum seitenrand hat, der um x pixel größer ist, als der eigendliche seitenrand, legst du einfach eine dreizellige tabelle an ebenfalls ohne rahmenbreite, text und zellenabstand und machst eben nur die mittlere zelle schwarz.
lg, Anna
auch wenn sie aus der mode kommen, ich würde das einfach mit einer tabelle machen.Nein, auf keinen Fall eine Tabelle benutzen!
CSS ist für das Layout zuständig und nicht HTML. Außerdem bekommt man damit erhebliche Accessibility-Probleme. Tabellen sollten wirklich nur für tabellarische Daten verwendet werden und niemals fürs Layout!
Wenn schon Tabelle, dann besser display: table, nicht das html table element!
Nur mit HTML geht das garnicht, du brauchst dazu noch css.
Erstelle z.B. einen div-Block der die entsprechende hintergundfarbe haben soll. Diesem weist du dann mit css die entsprechenden Atribute zu, z.B. so:
div{
background-color: #000000;
weight: 100%;
height: 30px;
}
Verstehe, also rein mit HTML bekommt man das quasi nicht hin?
Hier ein kleines Beispiel was css ausmacht: https://youtu.be/sjL4Na_S-mQ
Wood das ist eine geniale Lösung, gefällt mir sehr gut, könnte man eventuell einen Script dazu verlinken? Dem dürfte ich sehr dankbar sein