Block-Link (a / display:block) wird nicht richtig umrandet
0 
Beat
0 0 
MudGuard
0 0 MudGuard
0 0 Beat
0
0
0 
Gunnar Bittersmann
Block-Link (a / display:block) wird nicht richtig umrandet
Hallo,
ich möchte umrandete Blöcke darstellen, die als Link funktionieren.
Links in dem Block soll ein Bild angezeigt werden und rechts (oben beginnend) davon soll der Text beginnen.
Ich mache aber irgend einen (Denk-?)Fehler, denn die Umrandung des Links endet unter dem Text, obwohl das Bild (und damit der ganze Link-Block) weiter nach unten reicht. Es wird also nicht der vollständige Block schwarz umrandet.
Wenn man zum Beispiel auf dem Bing-Bild die Maustaste gedrückt hält, zeigt der gepunktete Rand (der üblicherweise beim Klicken Links umrandet) genau den Bereich, den ich umrandet haben will, und in dem man klicken können soll.
Hier mal ein Beispielcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;">
<style type="text/css">
.blocklink { display:block; border-width:1px; border-style:solid; border-color:black; }
.blocklink img { float:left; }
</style>
</head>
<body>
<a href="#" class="blocklink">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="">
<h2>test</h2>
Dieser Text soll rechts neben dem Bild stehen.
</a>
<br>
<a href="#" class="blocklink">
<img src="http://www.underconsideration.com/brandnew/archives/bing_scaling.gif" alt="">
<h2>ein weiterer test</h2>
Dies ist eine zweite Box.
</a>
</body>
</html>
-
ich möchte umrandete Blöcke darstellen, die als Link funktionieren.
Links in dem Block soll ein Bild angezeigt werden und rechts (oben beginnend) davon soll der Text beginnen.Ich mache aber irgend einen (Denk-?)Fehler, denn die Umrandung des Links endet unter dem Text, obwohl das Bild (und damit der ganze Link-Block) weiter nach unten reicht. Es wird also nicht der vollständige Block schwarz umrandet.
Validieren hilft.
<a href="#" class="blocklink">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt=""><h2>test</h2>
Dieser Text soll rechts neben dem Bild stehen.
</a>a darf in HTML4 keine Blockelemente enthalten
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo!
a darf in HTML4 keine Blockelemente enthalten
Optional kannst du einen Div-Container (oder was für deinen Verwendungszweck am gebräuchlichsten ist) und ein onClick-Event einfügen. Dann kannst du zusätlich die wichtigen Elemente (wie zum Beispiel das Bild) verlinken, um diejenigen, welche JS ausgeschaltet haben, nicht gänzlich auszuschließen.
Liebe Grüße aus Norddeutschland.
--
ie:{ fl:( br:> va:} ls:[ fo:| rl:? n4:~ ss:) de:> js:| ch:? sh:( mo:) zu:)-
Hi,
a darf in HTML4 keine Blockelemente enthalten
Optional kannst du einen Div-Container (oder was für deinen Verwendungszweck am gebräuchlichsten ist) und ein onClick-Event einfügen.div ist ebenfalls ein Blockelement, darf also genausowenig in den Link eingefügt werden.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hallo!
div ist ebenfalls ein Blockelement, darf also genausowenig in den Link eingefügt werden.
Lesen, verstehen, antworten. Ich spreche von einem onClick-Event - nicht von einem Link.
Liebe Grüße aus Norddeutschland.
--
ie:{ fl:( br:> va:} ls:[ fo:| rl:? n4:~ ss:) de:> js:| ch:? sh:( mo:) zu:)-
Hi,
div ist ebenfalls ein Blockelement, darf also genausowenig in den Link eingefügt werden.
Lesen, verstehen, antworten. Ich spreche von einem onClick-Event - nicht von einem Link.
Du schreibst von Einfügen, meinst aber Ersetzen? Dann schreib das auch so.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Okay, also hier jetzt mal ein leicht angepasstes Beispiel.
Doctype ist jetzt Strict.
Das h2-Element war falsch wie unnötig und hat von meiner Frage abgelenkt, entschuldigung.
Auf JS würde ich gerne verzichten, soweit möglich.
Noch mal meine Frage:
Es soll der gesamte Blockbereich eingerahmt (border / 1px) werden - genauso wie der gepunktete Rand (zumindest zeigt der FF einen gepunkteten Rand), solange man die linke Maustaste auf einem der Bilder gedrückt hält.
Stattdessen sorgt das "float:left" dafür, dass nur der Text selbst umrandet wird und das Bild aus dem Block (nach unten hin) hinausragt.
Wie bringe ich das Bild wieder in den Block hinein?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;"> <style type="text/css"> .blocklink { display:block; border-width:1px; border-style:solid; border-color:black; } .blocklink img { float:left; } </style> </head> <body> <p> <a href="#" class="blocklink"> <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt=""> test Dieser Text soll rechts neben dem Bild stehen. </a> <br><br><br><br><br><br><br><br><br> </p> <p> <a href="#" class="blocklink"> <img src="http://www.underconsideration.com/brandnew/archives/bing_scaling.gif" alt=""> ein weiterer test Dies ist eine zweite Box. </a> </p> </body> </html>-
Es soll der gesamte Blockbereich eingerahmt (border / 1px) werden - genauso wie der gepunktete Rand (zumindest zeigt der FF einen gepunkteten Rand), solange man die linke Maustaste auf einem der Bilder gedrückt hält.
Stattdessen sorgt das "float:left" dafür, dass nur der Text selbst umrandet wird und das Bild aus dem Block (nach unten hin) hinausragt.
Wie bringe ich das Bild wieder in den Block hinein?Ich nehme den folgenden Psyeudocode, der dein Anliegen verdeutlicht.
<block>
<float> ... </float>
<content> ... </content>
<block>Es gibt nun zwei Möglichkeiten.
a) zusätzliches Markup:<block>
<float> ... </float>
<content> ... </content>
<br class="clear">
<block>br.clear{clear:both; display:block; height:0;}b) mit Pseudoelement
block:after{display:block; clear:both; content:' '; height:0;}mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
@@Beat:
nuqneH
Ich nehme den folgenden Psyeudocode, der dein Anliegen verdeutlicht.
<block>
<float> ... </float>
<content> ... </content>
<block>Es gibt nun zwei Möglichkeiten.
a) zusätzliches Markup:Pfui bäh!
b) mit Pseudoelement
Erzähl dem IE was vom Pferd!
Du hast eine dritte Möglichkeit (die einfachste!) vergessen:
block { overflow: hidden }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
block { overflow: hidden }Das war's - danke!
-
Du hast eine dritte Möglichkeit (die einfachste!) vergessen:
block { overflow: hidden }»overflow:hidden ist ... zwar eine sehr einfache und elegante, aber nicht unproblematische Lösung zum Einschließen von Floats.«
http://molily.de/weblog/css-floats-einschliessen#probleme-overflow-hiddenMathias
-
-
Hi,
a) zusätzliches Markup:
b) mit Pseudoelementoder
block {
overflow: hidden;
zoom: 1; /* freut ie6 */
}Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
Hi,
Stattdessen sorgt das "float:left" dafür, dass nur der Text selbst umrandet wird und das Bild aus dem Block (nach unten hin) hinausragt.
Wie bringe ich das Bild wieder in den Block hinein?Grundlagenwissen, das du dir wenigstens zulegen solltest: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
MfG ChrisB
--
The most exciting phrase to hear in science, the one that heralds new discoveries, is not “Eureka!” but “That's funny...” [Isaac Asimov]
-
-
-
Hi,
Lesen, verstehen, antworten.
Ob du noch bei Schritt eins oder zwei zurück hängst, kann ich nicht sagen - aber Schritt drei sollte auf jeden Fall noch etwas warten, weil du hier momentan suboptimale Ratschläge gibst.
Ich spreche von einem onClick-Event - nicht von einem Link.
Es geht aber um Verlinkung - und nicht um etwas, das überhaupt keinen Effekt hat, wenn die falschen Voraussetzungen herrschen sollten.
MfG ChrisB
--
The most exciting phrase to hear in science, the one that heralds new discoveries, is not “Eureka!” but “That's funny...” [Isaac Asimov]
-
-
-
-
-
@@c--:
nuqneH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Warum schickst du Browser in den Quirksmodus?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)