Sponsorenleiste
Marc1997
- css
Hallo zusammen,
ich bin grad an einem Projekt und steh gerade etwas auf dem Schlauch.
Ich würde gerne mit HTML und CSS eine Sponsorenleiste umsetzen.
Screenshot:
http://www.loaditup.de/files/831788_d86bcgrbvg.png
Es geht mir erstmal um den Aufbau. Funktion kommt später hinzu.
Die Leiste soll erst einmal statisch sein.
Ich hoffe, jemand kann mir helfen.
Viele Grüße
Marc
@@Marc1997:
nuqneH
Screenshot:
http://www.loaditup.de/files/831788_d86bcgrbvg.png
Bitte verlinken: per Button „Link“ überm Eingabefeld oder per Texteingabe.
Es geht mir erstmal um den Aufbau.
Es ist eine Liste von Bildern:
<ul>
<li><img src="…" alt="…"/></li>
⋮
</ul>
Mit CSS so formatiert, dass keine Bullets angezeigt werden (list-style: none) und die Items nebeneinander stehen (Flexbox, display: inline-block, float).
* Protip: Verwende SVG, keine Pixelgrafiken!
(Und wenn Pixelgrafiken, dann PNG oder GIF, keinesfalls JPEG. Und in doppelter Auflösung, im Browser runterskaliert, sonst sieht’s auf Retina-Geräten richtig blöd aus. Aber siehe *)
Funktion kommt später hinzu.
Mit „Funktion“ meinst du Karussell? Dann sollten die Pfeile auch erst später hinzukommen. Wenn es nichts zu scrollen gibt, haben die Pfeile da nichts zu suchen.
Für später sind „carousel“ oder auch „slider“ deine Suchbegriffe.
Qapla'
Ich würde gerne mit HTML und CSS eine Sponsorenleiste umsetzen.
Wehowei …
<ul id="sponsoren">
<li><img src="bla" alt="Firma Bla"></li>
<li><img src="blo" alt="Firma Blo"></li>
<li><img src="fasel" alt="Firma Fasel & Co."></li>
</ul>
ul#sponsoren {
text-align:center;
margin:0;
padding:0;
}
ul#sponsoren li {
display:inline-block;
list-style:none
}
@@Pupsi:
nuqneH
<li><img src="fasel" alt="Firma Fasel & Co."></li>
Auch wenn HTML5 das Escapen von '&' vor einem Leerzeichen nicht verlangt, würde ich es doch immer tun: 'Fasel & Co.
'.
ul#sponsoren
Überspezifiziert. '#sponsoren
' als Selektor genügt.
ul#sponsoren li
Dito. Und i.A. ist es robuster, die li-Kindelemente der Liste zu stylen, nicht alle li-Nachfahren (falls aus einer einfachen Liste mal eine verschachtelte wird): #sponsoren > li
list-style:none
Das würde ich auch gleich für die Liste (d.h. für '#sponsoren
') angeben, nicht für jedes Item.
Qapla'
Lieber Pupsi,
<ul id="sponsoren">
<li><img src="bla" alt="Firma Bla"></li>
<li><img src="blo" alt="Firma Blo"></li>
<li><img src="fasel" alt="Firma Fasel & Co."></li>
</ul>
gehe ich recht in der Annahme, dass diese "Bilder" einmal anklickbare Links sein sollen? Dann wären da noch <a>-Elemente um die <img>-Elemente zu spannen:
~~~html
<ul id="sponsoren">
<li>
<a href="http://example.com/?bla">
<img src="bla" alt="Firma Bla">
</a>
</li>
<li>
<a href="http://example.com/?blo">
<img src="blo" alt="Firma Blo">
</a>
</li>
<li>
<a href="http://example.com/?fasel">
<img src="fasel" alt="Firma Fasel & Co.">
</a>
</li>
</ul>
Liebe Grüße,
Felix Riesterer.