Icon in DIV einfügen komplett ausgefüllt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstellen
befehl
bestimmte eigenschaften
bild
browser
code
container
ding
element
funktion
grafik
hallen
hintergrund
klassische wege
tag
text
url
vergessen
weglassen
werkzeug
-
Hall Leute,
Ich hätte da noch mal eine kleine Frage?
Wenn ich einen Link zu einem icon mache reicht es dann wen ich dem tag/ding">ding eine gewisse größe zuteile im Div oder füllt das Bild den container automatisch aus?
Wenn nicht dann stellt sich mir die Frage ob ich dann das bild mit ICON img ansprechen soll oder a.Link?
MfG
Nightmare2407 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Um eine Grafik anzuzeigen (egal ob man sie Icon nennt oder sonstwie) gibt es zwei klassische Wege
- mit img-Tag
- als Hintergrund-Bild (css: background-image) zu einem anderen Tag
Eine besondere Variante sind die in Font-Dateien eingebundenen Icons.
Ein Link-Tag (<a...) allein zeigt keine Grafik an.
Eine Variante könnte so aussehen
<div style="width:100px;height:100px;"> <a href="http://google.de"><img src="link-adresse-icon.jpg" style="width:100%" /></a> </div>
Innerhalb eines div-Elements mit fester Größe von 100x100px wird ein Link eingefügt, der als Grafik erscheint. Diese Grafik ist genauso breit, wie das übergeordnete (div-)Element.
-
Ich würde das ganz einfach folgendermassen lösen:
<a href="#"> <img src="http://lorempixel.com/400/200/" /> </a>
So ist es für Suchmaschinen und Screenreader am lesbarsten. Wenn du möchtest, kannst du den Link-tag mit css zusätzlich stylen, indem du eine class, id oder einfach einen style vergibst.
Du kannst mit title="Dies ist ein Icon" im Link-tag auch einen Text anzeigen lassen, der erscheint, wenn der Mauaszeiger über das Bild gehalten wird. Dies ist insbesondere bei Icons eine gute Möglichkeit, die Funktion zu erklären. Zusätzlich ebenfalls gut für Screen-Reader.
Wen du das Icon als Hintergrund-Bild haben möchtest, dann must du beim Link-Tag einfach den entsprechenden Style anfügen und nicht vergessen, die Breite und Höhe anzugeben. Anschliessend background-repeat abstellen. Diese Methode empfehle ich aber nicht, da sie für Suchmaschinen und Screen-Reader nicht gut lesbar ist. -
Wegen des Bildaufbaus im Browser sollte die Höhen und Breitenangaben immer im IMG Tag sein und nicht in den Containern darum. Braucht ein Bild mal länger zum Laden, als der Text darum, wird der Platz gleich für das Bild freigelassen. So verschiebt sich das Layout nicht während des Ladevorgangs. Und korrekter Weise gibt man im IMG Tag auch immer ein alt Attribut an.
Du könntest das Icon sogar mit javascript anklickbar machen mit onklick. So könntest du das a Tag weglassen. Setzt aber voraus, dass deine Zielgruppe javascript im Browser aktiviert hat. -
Ich habe ein CSS Style Sheet verendet und habe es in meine HTML eingebunden . Mein Div wird angesprochen und meine Grafik + Link, soweit so gut aber jetzt ist das nächste Problem aufgetaucht: Das Bild wird ungefähr auf die hälfte des Divs versetzt und reagiert auf gar keinen Befehl mehr richtig?
Float, position selbst wenn ich ein clear davor stelle passiert nichts.
-
Ohne das Beispiel live zu sehen dürfte es schwer sein, etwas dazu zu sagen.
-
Ich bin gerade schon auf der Suche nach img codes die vielleicht das Bild beeinflussen aber finde leider nichts ich habe alle Bilder auskommentiert und habe den rest mal unter die Lupe genommen ich versuche jetzt auszuschließen ob es an den img liegt oder an den div Raster. es ist einfach komisch wie als ob ich irgendwo ein margin left drin habe oder ein padding oder border was ich bis jetzt noch nicht gefunden habe
-
nightmare2407 schrieb:
...es ist einfach komisch wie als ob ich irgendwo ein margin left drin habe oder ein padding oder border was ich bis jetzt
noch nicht gefunden habe
Alle aktuellen Desktop-Browser haben einen Entwickler-Modus (beim Firefox über Extras). Mit solchen Werkzeugen bekommt man das heraus.
Ja, auch ohne Zuweisung haben alle HTML-Elemente schon bestimmte Eigenschaften, in manchen Fällen eben auch padding, margin. -
Ok alles klar mach ich dann mal danke für den Tipp :)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
