PHP, HTML - korrekte Reihenfolge <div>,<a>,<img>

[uname]

Ich portiere gerade meine Bookmarklisten in nette anklickbare Bilder für mein Tablet. Hierzu habe ich auf meinem Webspace eine Datei
tablet.txt mit allen Bookmarks und Links zu Bildern gespeichert.

Code: Alles auswählen

...
http://debianforum.de/forum/search.php?search_id=egosearch;http://debianforum.de/forum/styles/debianforum/imageset/debian.png
...

Das ganze lasse ich mir per PHP zusammenbauen, siehe http://nopaste.debianforum.de/35990

Das funktioniert eigentlich schon ganz gut. Jede Zeile sieht aktuell so aus:

Code: Alles auswählen

<a href="http://debianforum.de/forum/search.php?search_id=egosearch"><div id="button"><img src="http://debianforum.de/forum/styles/debianforum/imageset/debian.png" alt="http://debianforum.de/forum/search.php?search_id=egosearch"></div></a>

Wenn ich das als HTML prüfen lasse gefällt es dem Validator nicht. Auch sieht es nicht in jedem Browser gut aus. Problem scheint die Verschachtelung zu sein.

Code: Alles auswählen

<a> 
  <div>
    <img >
  </div>
</a>

Wenn ich die Reihenfolge tausche kann ich nur noch das Bild und nicht mehr die weißen Flächen dazwischen anklicken, was ich umbedingt beibehalten möchte. Vielleicht hat jemand eine Idee wie es korrekt wäre.

[Emess]

Bin zwar nich ganz Sicher,
Aber die korrekte Reihenfolge müsste doch die gleiche sein wie in deiner Überschrift.

Code: Alles auswählen

<div>,<a>,<img>

[uname]

Danke für deine Idee. Dann sieht es aber so aus

Code: Alles auswählen

<div id="button"><a href="http://debianforum.de/forum/search.php?search_id=egosearch"><img src="http://debianforum.de/forum/styles/debianforum/imageset/debian.png" alt="http://debianforum.de/forum/search.php?search_id=egosearch"></a></div>

In dem Fall ist jedoch nur das Logo und nicht der weiße Rand anklickbar. Wobei das Debian-Logo ist etwas ungeeignet, da es recht quadratisch ist und die Fläche somit recht gut ausfüllt.

Geeigneter wäre mal mein Spiegel-Eintrag:

Code: Alles auswählen

http://www.spiegel.de;http://www.spiegel.de/static/sys/v9/spiegelonline_logo.png

<a><div><img></div></a> (Quadrat anklickbar)

Code: Alles auswählen

<a href="http://www.spiegel.de"><div id="button"><img src="http://www.spiegel.de/static/sys/v9/spiegelonline_logo.png" alt="http://www.spiegel.de"></div></a>

<div><a><img></a></div> (nur Bild anklickbar)

Code: Alles auswählen

<div id="button"><a href="http://www.spiegel.de"><img src="http://www.spiegel.de/static/sys/v9/spiegelonline_logo.png" alt="http://www.spiegel.de"></a></div>

[Emess]

Danke für deine Idee. Dann sieht es aber so aus

Code: Alles auswählen

<div id="button"><a href="http://debianforum.de/forum/search.php?search_id=egosearch"><img src="http://debianforum.de/forum/styles/debianforum/imageset/debian.png" alt="http://debianforum.de/forum/search.php?search_id=egosearch"></a></div>

Also ich seh da keinen weißen Rand! Nur ein Logo und das ist anklickbar.
Wo soll da noch ein Rand sein?

Schau mal hier. Hab den body mal schwarz gemacht damit man es besser sieht.
Ich weiß zwar nicht was du damit vor hast aber wenn es links sein soll solltest du das img links floaten.

[uname]

Fällt wohl eher mit einem etwas größeren Beispiel auf. Bitte Export in HTML umbenennen, da man HTML wohl nicht uploaden kann.

a-div-img:
http://nopaste.debianforum.de/35991

div-a-img:
http://nopaste.debianforum.de/35992

Nachtrag:
Den schwarzen Hintergrund habe ich probiert. Das ganze Feld bleibt weiß. Einmal ist es ganz anklickbar und einmal nur das Bild.

[Emess]

so ganz versteh ich noch nicht was du willst?
Na ja, bin ja auch ein alter Sack!
Aber in deinem 2. Beispiel lässt sich sowohl das Bild als auch die weiße Fläche anklicken.
Soll der Rahmen (die weiße Fläche) zu einem anderen Ziel führen als das Bild?

[uname]

Danke für deine Geduld. Also der von dir gepostete Link auf "Beispiel2" zeigt die Konstallation <a><div><img></div></a> die funktioniert. Man kann den weißen Rand anklicken. Die Fläche soll zur gleichen URL führen was auch ok ist. Die andere Version

<div><a><img>
http://nopaste.debianforum.de/35992

funktioniert nicht. Man kann das Bild aber nicht die weiße Fläche anklicken. Wahrscheinlich bin ich aber auch zu alt um mich mit so sinnlosen Problemen rumzuschlagen. Vielleicht geht es ja einfach nicht mit den drei Befehlen in einer sinnvolleren Reihenfolge.

[Emess]

Wahrscheinlich bin ich aber auch zu alt um mich mit so sinnlosen Problemen rumzuschlagen.

Na das sind wir ja schon 2

Vielleicht geht es ja einfach nicht mit den drei Befehlen in einer sinnvolleren Reihenfolge.

D.h. dir geht es nur darum, dass die Reihenfolge nicht stimmt, oder?
Ich versteh es zwar auch nicht, aber Hauptsache es geht.
Vielleicht müsste man mit <em> oder <p> probiern. Doch wenn es geht, wozu?

[uname]

Ich hatte gedacht, dass es eine sinnvollere Reihenfolge gibt. Die von dir genannten Befehle werde ich mir mal anschauen. Vielleicht finde ich im Internet ja auch z.B. noch ein HTML-Schachbrett mit Figuren drauf, wo es keinen Grafikhintergrund gibt und man nicht notwendigerweise die Figuren anklicken muss. Kann doch alles nicht so schwer sein. Danke.

[cosmac]

hi,

das eigentliche Problem war doch, dass das inline-Element <a> kein Block-Element <div> enthalten darf. Probier doch mal, das <div> durch <span> zu ersetzen, ungefähr so: 35993

Wenn man noch ein paar Schönheitsreparaturen (encoding, title, class statt id, img-Tag schliessen) macht,
bekommt man vom validator eine Plakette und das ist doch den Stress wert (hallo Emess).

[Emess]

Ah, da ist ein Profi am Werk.
So sieht es doch schön aus!

[uname]

Danke für die Hilfe. Folgende Version ist laut http://validator.w3.org fehlerfrei.

http://nopaste.debianforum.de/35994

[Maik aus MS]

Das geht auch.

Code: Alles auswählen

<a id=button><img ...></a>

Ueblich ist das <div> ausserhalb ist da er der Container ist in den alles reinkommt.

Maik

[bmario]

Anmerkung:

Ich würde den PHP Code nicht so schreiben. HTML mit echo() zeilenweise ausgeben ist nicht wartbar.

Code: Alles auswählen

<?php
$zeilen = file("tablet.txt");

echo '<?xml version=\"1.0\" ?>\n'; // die Zeile geht leider nicht anders, da <? ?> die PHP Shorttags sind.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
         div#button{ width: auto;border: none;align: center; background: white; margin: 5px; height: 100px; width: 100px; float: left; }
         img{ border:0; width:100px  }
    </style>
</head>
<body>
<?php
foreach ($zeilen as $zeile)               
{          
  $z = trim ($zeile," \n\t\r");
  list($url, $icon) = split(";", $z, 2);
?>
    <a href="<?php echo $url; ?>">
        <span class="button"><img src="<?php echo $icon;?>" alt="<?php echo $url; ?>" /></span>
    </a>
<?php>
}    
?>
</body></html>

Statt <?php echo $bla; ?> könnte man auch schreiben <?=$bla?>, aber das ist nicht unbedingt auf jeder PHP Installation aktiviert.