• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Icons liste mit html

HtmlNoob13

Neues Mitglied
  1. Hallo,
    Ich möchte eine Liste erstellen,wobei die aus Icons besteht,mit der Möglichkeit zu scrollen wenn es nötig wäre.

    Hat jemand Ahnung davon wie kann ich sowas erstellen??
    Ich habe versucht das mit
  2. HTML:
    <ul><li><image/><image/>......</li></ul>

    Da gibt es aber zwei Probleme:
  3. 1)Ich kann nicht scrollen.
  4. 2)wie kann ich die Punkte löschen da dem Tag <li> gehören??

    Vielen Dank für eure Hilfe :)
 
Die Liste hast Du schon so korrekt gemacht. Nur das <image>-Element, das gibt es gar nicht. Korrekt wäre:

HTML:
<ul>
 <li><img src="icon1.jpg" alt=""></li>
 <li><img src="icon2.jpg" alt=""></li>
 <li><img src="icon3.jpg" alt=""></li>
</ul>

Die Gestaltung der Liste lässt sich per CSS verändern. Interessant für dich sind:
SELFHTML: Stylesheets / CSS-Eigenschaften / Listenformatierung
sowie die Innen- und Außenabstände padding bzw. margin.
 
  1. Hallo,
    Ich möchte eine Liste erstellen,wobei die aus Icons besteht,mit der Möglichkeit zu scrollen wenn es nötig wäre.

    Hat jemand Ahnung davon wie kann ich sowas erstellen??
    Ich habe versucht das mit
  2. HTML:
    <ul><li><image/><image/>......</li></ul>

    Da gibt es aber zwei Probleme:
  3. 1)Ich kann nicht scrollen.
  4. 2)wie kann ich die Punkte löschen da dem Tag <li> gehören??

    Vielen Dank für eure Hilfe :)

1. erledigt (siehe theadis Beitrag)
2.
3. 1) jetzt schon.
4. 2) mit CSS:

zu 3:
da es nun ausgerichtet ist, ist alles untereinander und du hast (wenn die Bilder groß genug sind) nun einen Scrollbereich

zu 4:
HTML:
<ul>
 <li><img src="icon1.jpg" height="" width="" alt=""></li> 
 <li><img src="icon2.jpg" height="" width="" alt=""></li> 
 <li><img src="icon3.jpg" height="" width="" alt=""></li>
 </ul>
(ich würde aber noch height und width hinzufügen)
(das geht zwar auch mit CSS, dann einfach eine id, class o.Ä. verpassen)

Zum Code:
CSS-Code
PHP:
ul{
margin:0;
padding:0;
}

li{
padding:0;
margin:0;
list-style:none;
}

ich hoffe ich konnte dir helfen ;)
 
Zuletzt bearbeitet:
Zurück
Oben