nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Hallo,
ich möchte, dass der link über beide Zellen der Tabellenzeile (über CSS definiert) geht.
Folgendes funktioniert auch, aber HTML-Tidy meldet, dass </a> fehlt vor dem <div ..>.
Wie kann ich diesen Fehler umgehen, wobei ich bei der Tabellendarstellung bleiben möchte?
<a href="http://www........de">
<div class="table">
<div class="tr">
<div class="td">
<img src="http://www.......de/images/bild1.jpg">
</div>
<div class="td">zu meiner Fotosammlung
</div>
</div>
</div>
</a>
Hello out there!
<a href="http://www........de">
<div class="table">
<div class="tr">
<div class="td">
Was soll dieser Unsinn? http://de.wikipedia.org/wiki/Divitis
Du möchtest eine Tabelle? Dann benutze die dafür vorgesehenen Elemente 'table', 'tbody', 'tr', 'th'/'td'.
Und ein 'a'-Element darf keine Blockelemente enthalten. 'div' ist ein solches, 'table', 'tbody', 'tr', 'th'/'td' auch.
See ya up the road,
Gunnar
Hello out there!
<a href="http://www........de">
<div class="table">
<div class="tr">
<div class="td">Was soll dieser Unsinn? http://de.wikipedia.org/wiki/Divitis
Diesen Unsinn (nämlich die Empfehlung: Ersetzen von <table>,<tr>... u.a. durch entsprechendes CSS) habe ich aus dem SELFHTML-Forum entnommen.
<a href="http://www........de">
<div class="table">
<div class="tr">
<div class="td">Was soll dieser Unsinn? http://de.wikipedia.org/wiki/Divitis
Diesen Unsinn (nämlich die Empfehlung: Ersetzen von <table>,<tr>... u.a. durch entsprechendes CSS) habe ich aus dem SELFHTML-Forum entnommen.
CSS-Layouts sind keine Tabellen-Nachbauten. Sie funktionieren gänzlich anders, da man keine Tabellen nachbaut. Was die meisten allerdings irgendwie machen. Wer in Spalten und Zellen denkt, hat CSS ohnehin noch nicht verinnerlicht.
Lies am besten die <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Einführung in CSS-basierte Layouts>.
Alternativ ersetze div durch http://de.selfhtml.org/html/text/bereiche.htm#inline@title=span. Das ist im a-Element erlaubt und treibt Gunnar garantiert in den Wahnsinn.
Roland
Hello out there!
[…] und treibt Gunnar garantiert in den Wahnsinn.
„ich hasse Dich ;-)“*
See ya up the road,
Gunnar
* [Cheatah]
„ich hasse Dich ;-)“*
Warum?
Weil er eine gute Lösung hat oder weil die Lösung auch Unsinn ist?
Hello out there!
Weil er eine gute Lösung hat oder weil die Lösung auch Unsinn ist?
Die Antwort darauf hatte dir Orlando schon gegeben. Schon vor deiner Frage.
See ya up the road,
Gunnar
Die Antwort darauf hatte dir Orlando schon gegeben. Schon vor deiner Frage.
Das kann ich daraus nicht erkennen:
Alternativ ersetze div durch span. Das ist im a-Element erlaubt und treibt Gunnar garantiert in den Wahnsinn.
Er macht einen Vorschlag, der erlaubt ist, und er sagt aber nicht, warum du wahnsinnig wirst!
Hello out there!
Die Antwort darauf hatte dir Orlando schon gegeben. Schon vor deiner Frage.
Das kann ich daraus nicht erkennen:
Alternativ […]
Es stand ja auch davor.
See ya up the road,
Gunnar
Widerspruch!
Der Hinweis auf den Wahnsinn befand sich in dem von mir zitierten Satz, der die Alternative beschrieb. Alternative heißt für mich nicht "unerlaubt" oder ähnliches, sonst wäre es keine Alternative.
Hello out there!
Der Hinweis auf den Wahnsinn befand sich in dem von mir zitierten Satz, der die Alternative beschrieb.
Der Hinweis auf den Wahnsinn sollte die Ernsthaftigkeit* der Alternative beschreiben.
See ya up the road,
Gunnar
* lies: deren Nichtvorhandenheit (falls du das wieder missverstanden haben solltest)
Au weih!
* lies: deren Nichtvorhandenheit (falls du das wieder missverstanden haben solltest)
das muss man aber wissen.
Mir war nicht bekannt, dass Du so ein Guru bist, dessen Meinung Gesetz ist. Ich hatte eher angenommen, Du hast Deine Präferenzen und magst die Alternative nicht, während aber Orlando und andere Selfhtml-er vielleicht anderer Ansicht sind.
Hello out there!
Mir war nicht bekannt, dass Du so ein Guru bist, dessen Meinung Gesetz ist.
Jetzt, wo es dir bekannt ist, wirst du mich sicher verehren. Damit du deiner Verehrung Ausdruck verleihen kannst, <http://de.selfhtml.org/editorial/unterstuetzung.htm#privat_spenden@title=spende auf dieses Konto>.
See ya up the road,
Gunnar
Jetzt, wo es dir bekannt ist, wirst du mich sicher verehren. Damit du deiner Verehrung Ausdruck verleihen kannst, <http://de.selfhtml.org/editorial/unterstuetzung.htm#privat_spenden@title=spende auf dieses Konto>.
Gerne, aber erst wenn Du mir weitergeholfen hast.
Jetzt muss ich aber in die Heia,
Mami schimpft schon!
See/read/write you tomorrow
Hello out there!
Diesen Unsinn (nämlich die Empfehlung: Ersetzen von <table>,<tr>... u.a. durch entsprechendes CSS) habe ich aus dem SELFHTML-Forum entnommen.
Die „Empfehlung“, '<foo>' zu ersetzen durch '<div class="foo">', hast du ganz bestimmt nicht aus dem SELFHTML-Forum. Oder du hättest die bissigen Kommentare zu einer solchen „Empfehlung“ übersehen.
Die Empfehlung lautet, keine Tabellen zum Layouten einzusetzen, sondern das Dokument sinnvoll zu strukturieren und dementsprechend auszuzeichnen: Überschriften mit 'h1', 'h2', ...; Textabsätze mit 'p'; Listen mit 'ul'/'ol' und 'li'; tabellarische Daten mit 'table', 'tbody', 'tr', 'th'/'td'. Und das völlig unabhängig von der gewünschten Darstellung.
Danach geht’s ans Layouten mit CSS – Formatierung der vorhandenen Elemente. In Idealfall ändert sich dann am HTML-Code gar nichts mehr.
See ya up the road,
Gunnar
Wie erreiche ich dann am besten den gewünschten Link über ein Bild und den danebenstehenden Text?
Hello out there!
Wie erreiche ich dann am besten den gewünschten Link über ein Bild und den danebenstehenden Text?
Evtl. <a href="http://example.net/"><img src="http://example.net/images/bild1.jpg" alt=""> zu meiner Fotosammlung</a>
Da das Bild offenbar nur Verzierung ist und nicht zum Inhalt gehört (andernfalls hättest du ihm ja einen Alternativtext spendiert!), bietet es sich auch an, es nicht per 'img', sondern als Hintergrundbild (CSS!) einzubinden.
See ya up the road,
Gunnar
Da das Bild offenbar nur Verzierung ist und nicht zum Inhalt gehört (andernfalls hättest du ihm ja einen Alternativtext spendiert!), bietet es sich auch an, es nicht per 'img', sondern als Hintergrundbild (CSS!) einzubinden.
Den Alternativtext habe ich aus Vereinfachungsgründen weggelassen (wie auch die Bildgröße).
Mit der von Dir vorgeschlagenen Variante habe ich begonnen, habe aber dann Probleme gehabt mit der Ausrichtung des Textes, daher die Tabellenidee.
Hello out there!
habe aber dann Probleme gehabt mit der Ausrichtung des Textes
Du erwartest jetzt aber keine Hilfe ohne deren Beschreibung und der deines Vorhabens, oder?
See ya up the road,
Gunnar
Du erwartest jetzt aber keine Hilfe ohne deren Beschreibung und der deines Vorhabens, oder?
Eigentlich schon. Das Problem habe ich doch eindeutig beschrieben.
Bild und Text nebeneinander, aber so, dass eine (vertikale und horizontale) Ausrichtung von Bild und Text möglich ist. Der link soll das ganze umfassen (wie es in Deinem Vorschlag
<a href="http://example.net/"><img src="http://example.net/images/bild1.jpg" alt=""> zu meiner Fotosammlung</a>
der Fall ist)
Hello out there!
dass eine (vertikale und horizontale) Ausrichtung von Bild und Text
Mit „eine“ meinst du eine bestimmte? Und die wäre?
See ya up the road,
Gunnar
Ich möchte dabei experimentieren:
Text weiter rechts,
Text kleiner/größer,
Text bündig zum oberen Bildrand,
Text etwas unter dem oberen Bildrand etc.
bis es mir gefällt.
Hello out there!
Text weiter rechts,
Also http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Außenrand des Bildes,
Text kleiner/größer,
http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_size@title=Schriftgröße,
Text bündig zum oberen Bildrand,
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=Textumfluss,
Text etwas unter dem oberen Bildrand etc.
http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Außenrand oder http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=Innenabstand des Textes http://de.selfhtml.org/css/@title=etc.
See ya up the road,
Gunnar
Hi,
habe versucht, die Vorschläge umsetzen, aber ich habe noch Probleme, wo ich die Angaben machen muss.
Damit ich selbst besser klar komme, habe ich Ränder angegeben.
Ich schaffe es allerdings nicht, den Text nach unten zu verschieben, ohne Angabe des div- oder p-tags. Damit habe ich aber wieder das Problem "ein 'a'-Element darf keine Blockelemente enthalten".
<a href="http://www.example.com">
<img style="width:48px;
height:40px;
border-width:1px;
border-style:solid;
border-color:blue;
padding:1em;
float:left;
"
src="http://www.example.com/images/bild1.jpg" alt="">
<div style="margin-top:1em;
border-width:1px;
border-style:solid;
border-color:red;
">
zu meiner Fotosammlung</div>
</a>
Wenn ein Verschieben nach unten gewünscht ist und du DIV-tags umgehen willst, versuch doch mal:
<span style="vertical-align:sub; ...
Wenn ein Verschieben nach unten gewünscht ist und du DIV-tags umgehen willst, versuch doch mal:
<span style="vertical-align:sub; ...
Diese Variante treibt Gunnar in den Wahnsinn, wie weiter oben zu lesen ist. Ich weiß zwar immer noch nicht warum, aber es ist wohl so.
Hello out there!
Ich schaffe es allerdings nicht, den Text nach unten zu verschieben, ohne Angabe des div- oder p-tags.
Oberer Abstand für das umschließende Blockelement, negativer oberer Abstand für das Bild:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style type="text/css">
[code lang=css] img
{
float: left;
margin-top: -20px;
}
p
{
margin-top: 100px;
}
</style>
</head>
<body>
<p><a href="http://example.net/"><img src="http://www.example.com/images/bild1.jpg" alt="" /> zu meiner Fotosammlung</a></p>
</body>
</html>[/code]
<img style="width:48px;
height:40px;
Tu sowas bitte nie wieder. Notiere sämtliche CSS-Angaben zentral ('style'-Element im 'head' oder externe Datei); niemals inline in 'style'-Attributen.
See ya up the road,
Gunnar
Oberer Abstand für das umschließende Blockelement, negativer oberer Abstand für das Bild:
Super, danke, aber auf den negativen Abstand muß man erst kommen.
Das ist ja wie das Mengenlehreproblem:
Im Bus sind 6 Leute, 9 gehen hinaus. Wieviele müssen hineingehen, damit der Bus leer ist?
<img style="width:48px;
height:40px;Tu sowas bitte nie wieder. Notiere sämtliche CSS-Angaben zentral ('style'-Element im 'head' oder externe Datei); niemals inline in 'style'-Attributen.
Danke, das habe ich auch vor, aber für den Test war es mir so übersichtlicher.
Ich habe jetzt noch einmal in Selfhtml nachgelesen und da steht doch
unter "Positionierung und Anzeige von Elementen", also wie ich verstehe
"Layoutgestaltung" unter anderem display:table, display:table-row, usw.
Deshalb verstehe ich (verzeiht aber ich bin Neuling) nicht, warum mein Ansatz falsch war. Genau mit diesen Mitteln habe ich gearbeitet.
hi,
Ich habe jetzt noch einmal in Selfhtml nachgelesen und da steht doch
unter "Positionierung und Anzeige von Elementen", also wie ich verstehe
"Layoutgestaltung" unter anderem display:table, display:table-row, usw.
Deshalb verstehe ich (verzeiht aber ich bin Neuling) nicht, warum mein Ansatz falsch war. Genau mit diesen Mitteln habe ich gearbeitet.
Es war schon falsch, weil du HTML-Regeln verletzt hast - A darf als inline-Element nun mal keine Block-Elemente wie Div enthalten.
(Deshalb ja auch Orlandos Vorschlag, stattdessen einen Span zu nehmen, und Gunnar in den Wahnsinn zu treiben ...)
Das andere, was "falsch" ist, sollte dir selber auffallen, wenn du dir deinen eingangs geposteten Code noch mal anschaust: Du wollst ein Bild und einen Text verlinken - und hast allein dafür schon ein Konstrukt, welches aus ingesamt sechs HTML-Elementen besteht, auf die Beine gestellt. Das kann's doch wohl nicht sein, dass ist Overkill.
Deshalb gilt (eigentlich) immer: Erst mal die Inhalte mit sinnvollem HTML _Strukturieren_ - danach erst _Formatieren_.
gruß,
wahsaga