Autor |
Nachricht |
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 36
Geschlecht:
|
Verfasst Di 08.04.2008 14:23
Titel [html/css] <span> im <a> |
|
|
hallo,
mein problem sieht folgendermaßen aus:
ich habe ein <a>-tag mit einem text+einem bild. da ich das bild als block anzeigen lasse, lege ich den text in ein <span> (inline-elemente darf ich ja in ein <a>-tag schachteln) und gebe ihm float: left.
soweit so gut... es wird auf den ersten blick auch alles korrekt angezeigt, jedoch geht a:hover an der stelle nun nicht mehr und außerdem zeigen einige browser nun ein eingabezeichen anstatt des hand als cursor an.
ich hoffe ihr könnt mir helfen,
mfg stry
|
|
|
|
|
misprintedtype
Dabei seit: 08.08.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 08.04.2008 14:47
Titel
|
|
|
post ma den code
|
|
|
|
|
Anzeige
|
|
|
Queron
Dabei seit: 28.08.2005
Ort: Hannover
Alter: 42
Geschlecht:
|
Verfasst Mi 09.04.2008 07:14
Titel
|
|
|
Wenn das Bild innerhalb des Links steht und du es als block anzeigen lässt, dann machst du genau das, was nicht sein darf: ein Block-Element innerhalb eines Inline-Elements stellen. Versuch doch mal, aus dem Link auch ein Block-Element zu machen.
Oder noch ne Sache: warum muss das Bild überhaupt als block angezeigt werden? Wenn du dem img-Tag einfach ein float: right zuweist, müsste der Text doch automatisch links um das Bild fließen, da brauchst du dann auch kein span mehr.
|
|
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Mi 09.04.2008 07:28
Titel
|
|
|
Zitat: | Wenn das Bild innerhalb des Links steht und du es als block anzeigen lässt, dann machst du genau das, was nicht sein darf: ein Block-Element innerhalb eines Inline-Elements stellen. |
Nein, syntaktisch wäre das korrekt. span ist innerhalb von a erlaubt. Hier hat man ein Inline-Element innerhalb eines anderen Inline-Elementes. Auch wenn man mit CSS die Darstellung ändert, so daß das wie ein Block-Element angezeigt wird, bleibt es ein Inline-Element. Das CSS ist unabhängig vom HTML-Code zu betrachten. Mit einem Stylesheet kann man keinen HTML-Code (in)valide machen.
Ja. Und dazu schreiben, ob das genannte Verhalten in jedem Browser auftritt oder nur in einem bestimmten.
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 09.04.2008 08:16
Titel
|
|
|
ich würde mal stark vermuten das problem ist folgendes: du mußt den float innerhalb des a tags aufheben, sonst wird es nicht mit seinem inhalt skalieren, sondern die höhe des enthaltenen textes haben.
das ginge ohne zusätzliches markup zum beispiel wunderbar mit dieser methode:
http://www.positioniseverything.net/easyclearing.html
Zuletzt bearbeitet von sahnemuh am Mi 09.04.2008 08:17, insgesamt 1-mal bearbeitet
|
|
|
|
|
stry
Threadersteller
Dabei seit: 24.02.2006
Ort: Minden
Alter: 36
Geschlecht:
|
Verfasst Mi 09.04.2008 08:47
Titel
|
|
|
html:
Code: |
<a href='#' title='nach Oben'>
<span class='totop'>nach Oben</span>
<img class='topimg' src='fileadmin/templates/gfx/top.gif' title='nach Oben' alt='nach Oben' />
</a>
|
css:
Code: |
img
{
border-style: none;
display: block;
}
span.totop
{
float: left;
}
img.topimg
{
float: left;
margin: 2px 0px 0px 3px;
}
|
iexp v6 -> kein a:hover / falscher cursor
ffox v2 -> kein a:hover / richtiger cursor
opera v9 -> kein a:hover / richtiger cursor
safari v3 -> korrekter a:hover / richtiger cursor[/code]
|
|
|
|
|
Queron
Dabei seit: 28.08.2005
Ort: Hannover
Alter: 42
Geschlecht:
|
Verfasst Mi 09.04.2008 09:08
Titel
|
|
|
Versuchs mal hiermit:
Code: |
<a href="#" title="nach Oben" class="top">nach Oben</a>
|
Code: |
a.top
{
display: block;
width: 60px; /* Wert anpassen
height: 20px; /* Wert anpassen
background: url(fileadmin/templates/gfx/top.gif) no-repeat right;
}
|
Ist schlanker und einfacher
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 09.04.2008 10:16
Titel
|
|
|
ich würd auch zu nem hintergrundbild raten, wenn es nur um einen "nach oben" link geht und das bild immer das selbe ist. allerdings musst du dazu den link nicht so "vergewaltigen" (blocklevel, feste dimensionen) imo:
Code: |
<a href="#top" class="top">nach oben</a>
a.top {
padding-right: breite der grafik;
line-height: höhe der grafik;
background: url(fileadmin/templates/gfx/top.gif) right center no-repeat;
} |
Zuletzt bearbeitet von sahnemuh am Mi 09.04.2008 10:17, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
<span> positionieren
span unter firefox
<span> inkl <p> oder exkl
[CSS] span mit transparentem gif-Bild überlagert Links !
HTML/CSS Problem mit <html><body> komischer Abstand unten
Anzeige in HTML aber ohne html ;-)
|
|