DIV zum Anklicken
0 0 0 0 
Patrick Andrieu
0 basti_p
0
DIV zum Anklicken
Hallo!
Beachtet man auf folgender Seite auf der echten Seite das Review-Menü und fährt mit der Maus über die einzelenen Reviews, ist zu sehen, dass sich der Hintergrund dabei ändert. Es ist auch möglich, irgendwo in den Raum zu klicken und man wird zum betreffenden Artikel weitergeleitet. Sehr benutzerfreundlich, wie ich finde. Allerdings mit den ganzen Tabellen nicht wirklich sauber gemacht.
Ich möchte diesen Effekt nun auch verwirklichen, allerdings mit CSS und XHTML.
Konkret: Ich möchte ein anklickbares DIV hinbekommen.
Überlegt habe ich mir z.B. , dass ich einfach einen großflächigen Link in das DIV schreibe:
<div id="div1">
<a class="klickbox" href="[...]">
<p>Inhalt1</p>
<p>Inhalt1</p>
</a>
</div>
Mein CSS-Code dazu:
.klickbox
{
display: block;
width: 100%;
height: 100%;
}
Damit dachte ich, wird dann das gesamte DIV mit dem Link ausgefüllt. Leider klappt das nicht. Setze ich statt Pronzentwerten Pixel-Werte, ist die Box zwar da, aber verdrängt den Text...
Kann mir jemand helfen? Ist vielleicht mein ganzer Ansatz nicht gut?
-
Oh, jetzt habe ich denk Link ganz vergessen. Das ist folgender: http://www.metalnews.de
-
Hallo,
wenn du das ganze DIV anklickbar machen willst, muss das DIV auch zwischen <a...> und </a> stehen.
#test{ height:100px; width:250px; background-color:#CCCCCC; border:1px solid;}<a href="http://www.foo.de"><div id="test">ganz viel Text<br /> mit Zeilenumbruch<br /> und dem ganzen Kram.</div></a>Grüße, Matze
-
Nun, ich hatte mir gedacht, dass das eher die Holzhammermethode ist und es noch Alternativen gibt, die sauberer sind. Oder liege ich da falsch?
-
Tut mir Leid, ich komme mir schon wie ein Spammer vor. Aber ich wollte noch eben sagen, dass es mit dem Link um das DIV nicht funktioniert... Es ist so, als wäre überhauptkein Link da.
-
-
Hallo Matze!
wenn du das ganze DIV anklickbar machen willst, muss das DIV auch zwischen <a...> und </a> stehen.
In diesem Forum sollte versucht werden, den Besuchern zwar weiter zu helfen aber auch zu sauberen Code zu verhelfen.
document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag.
<a href="http://www.foo.de"><div id="test">ganz viel Text<br />Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?-
Hallo Patrick,
In diesem Forum sollte versucht werden, den Besuchern zwar weiter zu helfen aber auch zu sauberen Code zu verhelfen.
Entschuldigung, ich war wohl zu übereifrig und habe dabei meine Fehler übersehen!
document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag.
<a href="http://www.foo.de"><div id="test">ganz viel Text<br />Mein vorgeschlagener Code bezieht sich auf <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> und wurde kurz unter Firefox 2.0.0.6 getestet.
Beim zweiten Test habe ich gerade bemerkt, dass der Link, wenn nicht umschlossen, über die gesamte Bildschirmbreite geht, und der Code somit unbrauchbar scheint.Sorry, wenn ich das oben genannte Zitat verfehlt habe, die gute Absicht war da!
Grüße, Matze
-
Hi,
In diesem Forum sollte versucht werden, den Besuchern zwar weiter zu helfen aber auch zu sauberen Code zu verhelfen.
Entschuldigung, ich war wohl zu übereifrig und habe dabei meine Fehler übersehen!
Beim zweiten Test habe ich gerade bemerkt, dass der Link, wenn nicht umschlossen, über die gesamte Bildschirmbreite geht, und der Code somit unbrauchbar scheint.
Er meinte wohl eher, dass - so wie es hier steht - im a-Element nur Inline-Elemente (außer a) und #PCDATA (Text) stehen dürfen. Darum war der von dir empfohlene Code nicht valide (oder heißt das invalide? ;).
mfG,
steckl-
Hallo,
danke für den Hinweis!
Beim zweiten Test habe ich gerade bemerkt, dass der Link, wenn nicht umschlossen, über die gesamte Bildschirmbreite geht, und der Code somit unbrauchbar scheint.
Er meinte wohl eher, dass - so wie es hier steht - im a-Element nur Inline-Elemente (außer a) und #PCDATA (Text) stehen dürfen. Darum war der von dir empfohlene Code nicht valide (oder heißt das invalide? ;).
Naja, ich schreib eigentlich schon ganz gern "valide" ^^
Daher dachte ich auch eigentlich, dass mein Lösungsvorschlag ganz gut wäre.
Gut, geben wir dem <a...> </a>display:block und alles wird gut. Da hab ich nicht mitgedacht. Oder schon wieder nicht? Ach ich sollte langsam ins Bett...
Wie gesagt, die gute Absicht war da und von Berichtigungen hat sicher auch der OP was :)
Ich fühl mich heut leider etwas desolat.Grüße, Matze
-
-
-
-
-
Hi Anna,
wenn Du dem DIV Höhe und Breite zugewiesen hast, sollte es mit den Prozentangaben funktionieren. Aber wozu brauchst Du den umschliessenden DIV überhaupt? Du kannst den Link doch direkt formatieren.
Grüße Basti
-
Hallo anna,
Beachtet man auf folgender Seite auf der echten Seite das Review-Menü und fährt mit der Maus über die einzelenen Reviews, ist zu sehen, dass sich der Hintergrund dabei ändert. Es ist auch möglich, irgendwo in den Raum zu klicken und man wird zum betreffenden Artikel weitergeleitet.
Ich möchte diesen Effekt nun auch verwirklichen, allerdings mit CSS und XHTML.
[HTML + CSS]
Kann mir jemand helfen? Ist vielleicht mein ganzer Ansatz nicht gut?
Der Ansatz ist schon mal nicht schlecht. Aber wäre es nicht besser, nur ein Linkelement zu verwenden, dieses per CSS auf
display: blockzu setzen, darin den Inhalt zu verfassen und das ganze in eine (un)geordnete Liste zu packen, als ein Div-Element zu verwenden? IMHO wäre das noch sauberer.Mit freundlichen Grüßen,
Steffen Bruchmann--
Mein Selfcode: ie:{ fl:( br:> va:) ls:& fo:| rl:( n4:& ss:| de:> js:| ch:{ mo:} zu:}