Ich würde gerne das Icon (grüner Haken) mittig vor dem Text ausrichten, aber ich bekomme das leider nicht hin...
Ich hoffe hier kann mir jemand weiterhelfen.
Hier der Link zur Seite
Icon vor Text mittig ausrichten
-
-
Versuch' es mal mit list-style-image oder als background-image mit padding-Wert.
-
-
Würde hier gerne noch was hinzufügen:
Der Ansatz von wolf ist natürlich korrekt, bei dem Icon handelt es sich aber im weiteren Sinn um ein "Dekoelement",
welches meiner Meinung nach nicht unbedingt als durchsuchbarer Inhalt (img) ausgegeben werden muss/sollte.Die Lösung per list-style-image wirft meist Probleme bei der vertikalen Zentrierung auf, daher rate ich dazu,
das Bild als <li> Hintergrundgrafik einzubetten. Das Listenelement erhält zusätzlich in height sowie line-height die Höhe des Bildes (Zentrierung).
Durch einen padding-Wert kann der Text beliebig nach rechts verschoben werden.Code.checkpoints { list-style: none; } .checkpoints li { background: url(check-icon_30px.png) no-repeat left center; height: 30px; line-height: 30px; margin: 0 0 5px; padding: 0 0 0 40px; }
//editing Rechtschreibgrütze
-
Ja, allerdings wäre es die korrekte Sache, es über list-style-image zu machen... um mal klugzuscheißen
-
Danke Danke Danke Danke!
Es klappt. Ich habe die Seite nun mal etwas verbessert (nach euren Vorschlägen :P), aber wie bekomme ich nun die ganze Auflistung etwas weiter nach links? Und noch eine kleine Frage (... ) gibt es im Internet eine Seite wo ich mir Icons runterladen kann, und diese benutzen darf?
Weil ich selber schaffe es nicht einen schönen grünen Haken zu erstellen oder sonstiges.Gruß
-
... aber wie bekomme ich nun die ganze Auflistung etwas weiter nach links?
Setz den Innenabstand des entsprechenden <ul>-Elements auf 0, dann kannst du das Listenelement beliebig steuern.Zitat von Skeptar... gibt es im Internet eine Seite wo ich mir Icons runterladen kann, und diese benutzen darf?
Ja, gibt es. -
Êine solche Seite http://www.flaticon.com/
-
Danke an euch beiden!
Ich will euch ja nicht nerven aber ich finde die Seite sieht so ein wenig langweilig aus...
Habt ihr vielleicht ein paar Ideen wie ich ein bischen mehr Farbe reinbekomme?Ich hoffe das ist in Ordnung das ich das nun hier reingeschrieben habe und nicht einen neuen Thread aufgemacht habe.
-
-
Das ist dann die Erfahrung & die Zielgruppe ...
Ich finde:
Borders- nicht schön, nur in Maßen gut
Kleine Bereiche - brauchen pfiffiges design, passt so nicht..
Farben - sind gut (grün ist bisschen zu grell)Wenn du mal bisschen flat design u.ä. sehen möchtest (und Formulardesign) --> http://jdav-wuerzburg.de
Joa wenn du jemanden für dich arbeiten lassen willst... Sprich mich an, aber selbermachen ist cooler
-
Danke. Also ich bin auch der Meinung selbermachen ist cooler.
Danke für die vielen Links aber ich als "neuling" kann davon eh die meisten Sachen
nicht erstellen kann da ich keine Zeit habe um Js oder Php zu lernen. Ich wollte ein einfaches und schönes
Design mit Html hinbekommen.Ich hatte auf einer Seite einen box-shadow gesehen den wollte ich auch machen nur mein Problem ist
ich habe 3 div elemente (Überschrift, Tabelle, Text) und die habe ich getrennt. Jedzt muss ich für jeden einzelnt einen Schatten machen
dabei ist der Schatten von dem div Element über dem anderen div Element. Und mit dem Border bin ich auch nicht ganz zufrieden.
Kann ich die 3 Teile zu einem ganzen machen und dem ganzen dann einen Rahmen und Box-Shadow geben? -
Du hättest einfach alle Inhaltsbezogenen Elemente in einen <div>-Container verschachteln können.
Du solltest dringend darauf achten, dass du HTML-Elemente nutzt, die für den entsprechenden Inhalt gedacht sind.
Warum hast du für die Überschrift ein <a>-Element erstellt, welches du sogar nochmals in einen Container verschachtelst? - wenn daraus ein Link entsteht OK, trotzdem wäre dann die korrekte Syntax -
Vorallem frage ich mich wieso du mit html 1 arbeitest?
Benutze 5 und du hast schon automatisch eine gute Struktur..
Mein Tipp-- Alles über den haufen schmeißen, neu anfangen..
Hier eine Strathilfe: http://jsfiddle.net/wolfwortmann/DaKxX/embedded/result/HTML
Alles anzeigen<!doctype html> <html> <head> <title>xxx</title> <!-- text utf-8 darstellen --> <meta charset="utf-8"> <!-- link zum stylesheet --> <link src="style.css" rel='stylesheet' type='text/css'> </head> <body> <header> <nav> <ul> <!-- Die elemente stehen EXTRA nicht unterienander um blöde umbruch-abstände zu vermeiden.. :( --> <li><a href="#">Home</a></li><li><a href="#">Bilder</a></li><li><a href="#">Downloads</a></li> </ul> </nav> </header> <section> <h1>Downloads</h1> <article> <table> <thead> <tr> <th>Programm</th> <th>Sprache</th> <th>Datum</th> <th>Größe</th> <th>Download</th> </tr> </thead> <tbody> <tr> <td>Hello World <td>C++ <td>01.05.2014 <td>56KB <td><a href="#">Klick hier.</a> </tr> <tr> <td>Hello World <td>C++ <td>01.05.2014 <td>56KB <td><a href="#">Klick hier.</a></td> </tr> <tr> <td>Hello World</td> <td>C++</td> <td>01.05.2014</td> <td>56KB</td> <td><a href="#">Klick hier.</a></td> </tr> <tr> <td>Hello World</td> <td>C++</td> <td>01.05.2014</td> <td>56KB</td> <td><a href="#">Klick hier.</a></td> </tr> </tbody> </table> </article> <article> <ul class="check_list"> <li>Programm aussuchen</li> <li>Auf klick hier klicken</li> <li>Downloaden</li> </ul> </article> </section> </body> </html>
CSS
Alles anzeigen*{ margin: 0; padding: 0; } html{ } a{ text-decoration: none; } a:hover{ } nav{ background-color: #343434; } /* Alle li-tags im Navi */ nav li{ display: inline-block; list-style-type: none; border-left: 2px solid #A9E3FF; /* Verzögerung */ transition: all 0.5s; } /* Erstes li-Tag im Navi */ nav li:nth-child(1){ border-left: none; } nav li:hover{ background-color: rgba(255,255,255, 0.1); } /* Alle a-Tags im Navigationsbereich */ nav a{ text-align: center; display: block; color: #A9E3FF; padding: 10px; width: 150px; } .check_list { padding-left: 40px; } .check_list li{ list-style-image: url(http://xluxsx.bplaced.net/images.png); line-height: 25px; }
Hoffe du kannst damit was anfangen.
-Mensch hast du Glück das ich Langeweile hatte
-
Okay danke. Als ich das gesehen hab habe ich erstmal gedacht WOW!
Also ich gucke immer auf Selfhtml (ist das so veraltet?).
Und wo liegt der Unterschied zwischen Html1 und 5? Weil ich sehe da eig. keinen. -
-
Nix veraltet.
Da steht aber XHTML1 welches genau wie HTML4 noch heute weit verbreitet genutzt wird, auch wenn es über 10 Jahre alt ist.Bitte beide einmal Wiki anschmeißen
Lohnend ist die neueste Version natürlich heute schon, und sobald Suchmaschinen die neue Semantik besser werten hat es sich wirklich gelohnt. HTML5 release war erst vor Kurzem.
-
Also selfhtml ist nunam (unter dem Standpunkt das es html5 gibt) durchaus veraltet in irgendeiner Hinsicht.
Mit html5 hat sich so vieles geändert/vereinfacht, das man meiner Meinung nach darauf setzen sollte.
Natürlich wird es viel verwendet, aber wenn man schon am neumachen ist.... -
Also selfhtml ist nunam (unter dem Standpunkt das es html5 gibt) durchaus veraltet ...
Ach, das war mit veraltet gemeint, ss las sich als ginge es um die Doctypes.
Veraltet kann man trotzdem nicht unbedingt sagen, die Tatsache dass wie in einer Bibliothek noch alles korrekt beschrieben wird
und lediglich die neue Versionierung versäumt wurde, macht es trotzdem zu einer soliden Grundlage.Aber ja, warum sollte man neue Technologie nicht nutzen
-
Ja das meinte ich
Neues nutzen erleichtert vieles
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!