Problem mit div in Verbindung mit a-tag!
0 
Gunnar Bittersmann
0 0 
Der Martin
0 0 0 Gunnar Bittersmann
0 
Jonathan
Problem mit div in Verbindung mit a-tag!
Hallo,
ich möchte einen einfachen Div-Tag mit einem background-image haben, welcher gleichzeitig verlinkt ist! Das Bild hat eine Größe von 100*100 Pixel.
Also kam ich auf folgenden Code:
HTML:
<a href="index.html"><div id="test">test</div></a>
CSS:
div#test {
height:100px;
width:100px;
background-image:url(images/jagger.jpg);
border:1px solid black;
}
Beim Validieren auf xhtml strict kommt dann folgende Fehlermeldung:
document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag .
Sieht also so aus als ist der div-Tag in dem a-Tag verboten!
Welche anderen validen Möglichkeiten habe ich denn, damit ich mein Ziel ganz oben in den ersten beiden Zeilen erreichen kann?
Gruß
RS
-
Hello out there!
Sieht also so aus als ist der div-Tag in dem a-Tag verboten!
Ja, HTML-Inline-Elemente dürfren keine HTML-Blockelemente enthalten.
Welche anderen validen Möglichkeiten habe ich denn, damit ich mein Ziel ganz oben in den ersten beiden Zeilen erreichen kann?
Mache aus dem 'a'-Element ein CSS-Blockelement ('display').
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
hi,
Mache aus dem 'a'-Element ein CSS-Blockelement ('display').
Bevor das missverstanden wird:
Nein, das macht aus dem A kein Block-Element im Sinne von HTML, der Div fliegt also trotzdem raus.Aber dann kannst du das A mit width und height formatieren.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hello out there!
Mache aus dem 'a'-Element ein CSS-Blockelement ('display').
Bevor das missverstanden wird:
Um dem entgegenzuwirken, unterschied ich HTML-Blockelement und CSS-Blockelement. [</archiv/2007/4/t149631/#m972077>, </archiv/2006/6/t132132/#m854853>]
Nein, das macht aus dem A kein Block-Element im Sinne von HTML
s.a. [</archiv/2007/4/t149631/#m972584>]
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
Hi,
ich möchte einen einfachen Div-Tag mit einem background-image haben,
warum enthält Dein Wunsch ein <div>-Element?
welcher gleichzeitig verlinkt ist!
Zur Verlinkung sind <a>-Elemente vorgesehen. Weder dies noch Hintergrundbilder haben mit <div>-Elementen irgend etwas zu tun.
HTML:
<a href="index.html"><div id="test">test</div></a>Das ist kein HTML. In HTML ist es nicht möglich, ein <div> in ein <a> zu schachteln.
Sieht also so aus als ist der div-Tag in dem a-Tag verboten!
Genau.
Welche anderen validen Möglichkeiten habe ich denn, damit ich mein Ziel ganz oben in den ersten beiden Zeilen erreichen kann?
Noch einmal: Was bezweckst Du mit dem <div>?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hi,
<a href="index.html"><div id="test">test</div></a>
och nöö, nicht schon wieder.
Ein Link (a-Element) darf nur Inline- oder Replaced-Inline-Elemente enthalten, ausgenommen weitere a-Elemente.
Ein div (Blockelement) innerhalb eines Links ist also nicht zulässig (selbst wenn einige Browser das wie gewünscht umsetzen).Wenn du nur das Bild als Link haben willst, dann nimm ein img-Element; wenn das div der Gruppierung von mehreren Elementen dient (was sein eigentlicher Zweck ist), dann nimm stattdessen ein span oder ein semantisch passenderes Element und formatiere es per CSS als Blocklevel-Element.
Beim Validieren auf xhtml strict kommt dann folgende Fehlermeldung:
document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag .
Sieht also so aus als ist der div-Tag in dem a-Tag verboten!Eben.
So long,
Martin--
Das Gehirn ist schon eine tolle Sache: Es fängt ganz von allein an zu arbeiten, wenn man morgens aufsteht, und hört erst damit auf, wenn man in der Schule ankommt.
(alte Schülererkenntnis) -
Hallo,
HTML:
<a href="index.html"><div id="test">test</div></a>
CSS:
div#test {
height:100px;
width:100px;
background-image:url(images/jagger.jpg);
border:1px solid black;
}Welche anderen validen Möglichkeiten habe ich denn, damit ich mein Ziel ganz oben in den ersten beiden Zeilen erreichen kann?
HTML
<a href="#" id="test">test</a>
CSS:
#test {display:block; height:100px; width:100px;}mfg nag
-
..da bin ich wieder.
Die Lösung mit display:block funktioniert sehr gut..weiß allerdings nicht wie das bei alten Browsern ist??!
Was ist denn die herkömmliche Methode, um Bilder zu verlinken heutzutage?
Tatsächlich das a mit display:block zu formatieren so wie vorgeschlagen?Gruß
RS-
Hello out there!
Die Lösung mit display:block funktioniert sehr gut..weiß allerdings nicht wie das bei alten Browsern ist??!
Auch sehr gut. Bei uralten Browsern ist es egal.
Was ist denn die herkömmliche Methode, um Bilder zu verlinken heutzutage?
Die Frage ist wegen ihres Oxymorongehaltes unverständlich.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Was ist denn die herkömmliche Methode, um Bilder zu verlinken heutzutage?
Die Frage ist wegen ihres Oxymorongehaltes unverständlich.
Wie sollte ich es denn anders ausdrücken?
Ich habe eine Grafik, welche ich verlinkten möchte. Da gibt es ja mehrere Möglichkeiten wie man das bewerkstelligen kann. (zB. <a><img></a> oder die Methode die ich jetzt kennen gelernt habe mit <a style="display:block"> etc..)
Gruß
RS-
Hello out there!
Ich habe eine Grafik, welche ich verlinkten möchte. Da gibt es ja mehrere Möglichkeiten wie man das bewerkstelligen kann.
Eigentlich nicht. (XHTML 2 ist ja in weiter Ferne.)
(zB. <a><img></a>
(1) Genau das macht eine Grafik (im Vordergrund!!) zum Link.
Aber das willst du ja gar nicht; du willst ja Text im Vordergrund vor einer Hintergrundgrafik.
Du könntest den Text allerdings auch mit den Bildverarbeitungsprogramm deiner Wahl in die Grafik setzen. Dann keinesfalls den Alternativtext vergessen!
oder die Methode die ich jetzt kennen gelernt habe mit <a style="display:block"> etc..)
(2) Das macht das 'a'-Element zu einem CSS-Blockelement, damit empfänglich für Breiten-/Höhenangaben. Wenn dieses Element auch noch eine Hintergrundgrafik hat, sieht es so aus, als sei diese ein Link.
Ist die Grafik essentieller Bestandteil des Inhalts, ist (1) angesagt; ist sie lediglich Verzierung, dann (2).
See ya up the road,
GunnarPS: Hat dir wirklich jemand gesagt, du solltest CSS-Angaben inline in 'style'-Attributen notieren? Tu’s nicht! Mache _alle_ Angaben im zentralen Stylesheet; das macht den Quelltext überichtlicher. Und ein externes Stylesheet kannst du für mehrere HTML-Dokumente nutzen.
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
OK, vielen Dank!
PS: Hat dir wirklich jemand gesagt, du solltest CSS-Angaben inline in 'style'-Attributen notieren? Tu’s nicht! Mache _alle_ Angaben im zentralen Stylesheet; das macht den Quelltext überichtlicher. Und ein externes Stylesheet kannst du für mehrere HTML-Dokumente nutzen.
Nein nein...hatte die styleangabe jetzt nur direkt in den a-Tag gelegt damit ihr wisst was ich meine. Normal mach ich das in die css-datei rein!
Gruß
RS
-
-
-
-
Hallo,
Was ist denn die herkömmliche Methode, um Bilder zu verlinken heutzutage?
Tatsächlich das a mit display:block zu formatieren so wie vorgeschlagen?<a><img></a> natürlich. Hat auch den Vorteil dass du dem Bild einen Alternativtext geben kannst (bzw. musst) und dass du den Link eben auch in Browsern siehst die kein CSS können oder nichtmal Bilder anzeigen.
Jonathan
-