Icon vor Text mittig ausrichten

Skeptar · 5. Mai 2014

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

http://xluxsx.bplaced.net/

dekonstruktiv · 5. Mai 2014

Versuch' es mal mit list-style-image oder als background-image mit padding-Wert.

wolf · 5. Mai 2014

Dem Bild sagen das es sich an der Zeile ausrichten soll

CSS

li img{
    vertical-align: middle;
    /* Empfehlung: */ 
    margin-right: 5px;
}

Hoffe das ist das was du suchst..
Es macht aufjedenfall das richtige

dekonstruktiv · 6. Mai 2014

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

wolf · 6. Mai 2014

Ja, allerdings wäre es die korrekte Sache, es über list-style-image zu machen... um mal klugzuscheißen

Skeptar · 6. Mai 2014

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ß

dekonstruktiv · 6. Mai 2014

Zitat von Skeptar

... 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.

wolf · 6. Mai 2014

Êine solche Seite http://www.flaticon.com/

Skeptar · 6. Mai 2014

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.

dekonstruktiv · 6. Mai 2014

... guck doch mal hier, hier, hier, hier, hier oder geh spazieren.
Alternativ könntest du auch einen Freelancer beauftragen.

wolf · 6. Mai 2014

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

Skeptar · 7. Mai 2014

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?

dekonstruktiv · 7. Mai 2014

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

Code

<h1><a href="#" title="Linktitel">Überschrift</a></h1>

wolf · 7. Mai 2014

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

<!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&ouml;&szlig;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>

Alles anzeigen

CSS

*{
    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;
}

Alles anzeigen

Hoffe du kannst damit was anfangen.

-Mensch hast du Glück das ich Langeweile hatte

Skeptar · 7. Mai 2014

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.

wolf · 7. Mai 2014

Ja ist teilweise "veraltet"... leider.

schau mal...

HTML: 10

<body>
    <header>
        <nav>

Du hast mehr funktionen,
sematische funktion
schön benannte tags
eine übersichtlicherer Struktur für den Browser
....
Es ist einfach besser

dekonstruktiv · 7. Mai 2014

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.

wolf · 7. Mai 2014

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....

dekonstruktiv · 8. Mai 2014

Zitat von wolf

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

wolf · 8. Mai 2014

Ja das meinte ich
Neues nutzen erleichtert vieles

Icon vor Text mittig ausrichten

Jetzt mitmachen!

Teilen