Mehrere Color Gradient DIVs auf einer Seite, wie?

...komplette Frage anzeigen

2 Antworten

  1. Verzichte wenn möglich auf absolut positionierte Elemente, da es mit solchen gerade bei der responsiven Umsetzung Probleme geben kann.
  2. Markup und CSS sinnvoll strukturieren
  3. Überschriften nach ihrer Wertigkeit auszeichnen
  4. CSS normalisieren oder zurücksetzen (CSS-Reset)
  5. IDs und Klassen wohlüberlegt einsetzen, respektive wiederverwenden
  6. Globale Eigenschaften zusammenfassen

Leider zeigt man Code aber immer nur einen Block an, alle anderen werden ignoriert.

Beide Divs wurden an selber Stelle absolute positioniert. Daher wird das eine Element vom anderen bedeckt. Wenn du beiden Divs unterschiedliche Positionsangaben zuweist, auch beide sehen kannst. Aber wie schon anfangs erwähnt, mit absolute positionierten Elementen eher sparsam umgehen solltest. Ebenso Markup und CSS strikt voneinander trennen, überflüssige Elemente wie Umbrüche (br-tag) entfernen und in deinem CSS gleiche Eigenschaften zusammenfassen. 

<div class="prime prime-1">...</div>
<div class="prime prime-2">...</div>
<div class="prime prime-3">...</div>
.prime {
 width: 100%;
 font-family: Raleway;
 text-align: center;
}
.prime-1 {
 background: #CEF6F5;
 background: linear-gradient(left, #58ACFA, #58D3F7, #CEF6F5); 
}
.prime-2 {
 background: #CED8F6;
 background: linear-gradient(left, #642EFE, #8181F7, #CED8F6);
}
...

Da ein Div ein Block-Element ist, dir eigentlich auch die Breitenangabe von 100% sparen kannst. Auch ein clear:both wird nicht benötigt, da die Divs ja nicht gefloatet werden. Falls doch, dann direkt in deinem CSS festlegen. Sprich im Markup keine überflüssigen Elemente dafür verwenden. 

LG medmonk

Du positionierst beide absolute. Deswegen liegt der eine über dem anderen. Setz Position:relative;

Achja und es reicht wenn du entweder die id oder die class im CSS angibst und stylst, du brauchst es nicht doppelt machen.

0

Was möchtest Du wissen?