mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 22:58 Benutzername: Passwort: Auto-Login

Thema: [html/css] <span> im <a> vom 08.04.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [html/css] <span> im <a>
Seite: 1, 2  Weiter
Autor Nachricht
stry
Threadersteller

Dabei seit: 24.02.2006
Ort: Minden
Alter: 36
Geschlecht: Männlich
Verfasst Di 08.04.2008 14:23
Titel

[html/css] <span> im <a>

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
misprintedtype

Dabei seit: 08.08.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 08.04.2008 14:47
Titel

Antworten mit Zitat Zum Seitenanfang

post ma den code
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Queron

Dabei seit: 28.08.2005
Ort: Hannover
Alter: 42
Geschlecht: Männlich
Verfasst Mi 09.04.2008 07:14
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Mi 09.04.2008 07:28
Titel

Antworten mit Zitat Zum Seitenanfang

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.

Zitat:
post ma den code

Ja. Und dazu schreiben, ob das genannte Verhalten in jedem Browser auftritt oder nur in einem bestimmten.
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mi 09.04.2008 08:16
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
stry
Threadersteller

Dabei seit: 24.02.2006
Ort: Minden
Alter: 36
Geschlecht: Männlich
Verfasst Mi 09.04.2008 08:47
Titel

Antworten mit Zitat Zum Seitenanfang

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]
  View user's profile Private Nachricht senden
Queron

Dabei seit: 28.08.2005
Ort: Hannover
Alter: 42
Geschlecht: Männlich
Verfasst Mi 09.04.2008 09:08
Titel

Antworten mit Zitat Zum Seitenanfang

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 *zwinker*
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mi 09.04.2008 10:16
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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 ;-)
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.