Marc1997: Sponsorenleiste

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

  1. @@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'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. 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  
    }  
    
    
    1. @@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 &amp; 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'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. 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 &amp; Co.">  
              </a>  
          </li>  
      </ul>
      

      Liebe Grüße,

      Felix Riesterer.

      --
      "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)