ul, ol, dl oder besser doch etwas anderes

[kEv*]

Hallo liebe SELFHTMLler,

da mich meine Feundinn gebeten hat ein kleine Bildergallerie für unser noch nicht geborenes Kind (in ca. 4 Wochen ist der Kleine da :) ) zu erstellen, habe ich mir zur Aufgabe gemacht dies komplett in CSS umzusetzten.
Jetzt hatte ich folgende Idee:

Maximal 6 Bilder als Thumbs (100x100px) nebeneinander. Unter jedes Bild einen kleinen Text. Beim Mouseover möchte ich eine vergrößerte Darstellung, in einem anderen Bereich der Webseite, des Bildes erreichen.

Sind in etwa meine ersten Gedanken.
Wie würdet Ihr die Anordnung der Bilder realisieren?
Anfangs hatte ich die Gedanken, das in einer ungeordneten Liste zu bewerkstelligen, aber ich denke dafür sind diese ursprünglich nicht gedacht.
Vielleicht eine Definitionsliste?

Da ich früher alles in Tabellen gelöst habe, und ich mich von diesem Denken in CSS nicht verleiten lassen will, frage ich vorerst einmal nach, was es für andere Möglichkeiten gibt.

So vorerst Vielen Dank
LG
--
kEv*
----

[JB]

Moin,

Vielleicht verstehe ich die Frage nicht. Aber wieso Tabellen, wieso eine Liste? Sind doch Bilder!

Warum nicht:

<p>
<img bla bla /> <img bla bla /> <img bla bla />
</p>
<p>
<img bla bla /> <img bla bla /> <img bla bla />
</p>

oder

<p>
<img bla bla /> <img bla bla /> <img bla bla /> <b />
<img bla bla /> <img bla bla /> <img bla bla />
</p>

oder

<p>
<img bla bla /> <b />
<img bla bla /> <b />
<img bla bla /> <b />
<img bla bla /> <b />
<img bla bla /> <b />
<img bla bla /> <b />
</p>

Diese Elemente lassen sich dann per CSS gestalten und wenn nötig mit class="" versehen.

[Cheatah]

Hi,

Vielleicht verstehe ich die Frage nicht. Aber wieso Tabellen, wieso eine Liste? Sind doch Bilder!

ist eine Liste von Bildern. Wieso etwas anderes als eine Liste nehmen?

Warum nicht:
<p>

Weil da absolut nichts existiert, was auch nur im Ansatz ein Textabsatz ist?

<img bla bla /> <img bla bla /> <img bla bla /> <b />

Was soll das leere, missbilligte <b/> am Ende?

Diese Elemente lassen sich dann per CSS gestalten und wenn nötig mit class="" versehen.

Wozu um alles in der Welt soll da eine Klassifizierung dienen? Allenfalls kann das im übergeordneten Element sinnbehaftet sein, aber nicht in "diesen Elementen".

Cheatah

[JB]

Weil,

Warum nicht:
<p>

Weil da absolut nichts existiert, was auch nur im Ansatz ein Textabsatz ist?

"Unter jedes Bild einen kleinen Text."

[Cheatah]

Hi,

Weil da absolut nichts existiert, was auch nur im Ansatz ein Textabsatz ist?
"Unter jedes Bild einen kleinen Text."

Du hast die Bilder zu Textabsätzen erklärt. Das sind sie aber nicht.

Cheatah

[JB]

Hallo,

Ja. Dein Vorschlag ist ohne Zweifel richtiger als meiner. War etwas voreilig bei meiner Lösung.

Manchmal sitzt mir das Denken aus DIV-Suppen-Zeiten noch im Kopf nur ohne DIVs.

:)

[Cheatah]

Hi,

Manchmal sitzt mir das Denken aus DIV-Suppen-Zeiten noch im Kopf nur ohne DIVs.

cool. Darf ich das beizeiten zitieren? :-)

Cheatah

[Cheatah]

Hi,

Anfangs hatte ich die Gedanken, das in einer ungeordneten Liste zu bewerkstelligen, aber ich denke dafür sind diese ursprünglich nicht gedacht.

wieso sollten ungeordnete Listen nicht ursprünglich dafür gedacht sein, eine Liste von Elementen, deren Ordnung keine Rolle spielt, zu strukturieren?

Vielleicht eine Definitionsliste?

Was definierst Du da?

Cheatah

[kEv*]

Hallo

ich habe keine Idee wie ich das sinnvoll umsetzten kann.
Ich habe jetzt einiges ausprobiert, aber ich komme irgendwie nicht zurecht.

Nochmal so soll es aussehen.

-----------------  -----------------
|               |  |               |
|               |  |               |
|    BILD       |  |    BILD       |
|               |  |               |
-----------------  -----------------
 Text zum Bild       Text zum Bild

Kann mir jemand einen Denkanstoß geben?
Vielen Dank
LG
--
kEv*
----

[Axel Richter]

Hallo,

ich habe keine Idee wie ich das sinnvoll umsetzten kann.
Ich habe jetzt einiges ausprobiert, aber ich komme irgendwie nicht zurecht.

Nochmal so soll es aussehen.

-----------------  -----------------
|               |  |               |
|               |  |               |
|    BILD       |  |    BILD       |
|               |  |               |
-----------------  -----------------
Text zum Bild       Text zum Bild

Kann mir jemand einen Denkanstoß geben?

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Minibilder-Liste</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
* {margin:0; padding:0; font-size:101%;} /*gleiche default-margin und -padding für alle Browser, font-size:101% gegen IE em font-resizing bug*/  
  
body { padding:10px; }  
  
ul#bildliste {width:780px; margin:auto;} /*(5px+10px+100px+10px+5px) mal 6 = 780px*/  
  
ul#bildliste li {float:left; width:100px; height:130px; padding:10px; margin:5px; text-align:center; background-color:#00FFAF; font-size:1em; overflow:hidden;} /*IE double margin Bug beachten! Die Hoehe muss an die Laenge der Bildunterschriften angepasst werden.*/  
  
ul#bildliste li img {display:block; width:100px; height:100px; margin:auto;}  
  
ul#bildliste li#vermitteln {margin-left:60px;} /*IE double margin Bug beachten!*/  
-->  
</style>  
<!--[if IE]>  
<style>  
 ul#bildliste li { display:inline; } /*gegen IE double margin Bug [link:http://www.positioniseverything.net/explorer/doubled-margin.html]*/  
 /*ACHTUNG: IE 7 auf Verträglichkeit testen, sonst Conditional Comment anpassen.*/  
</style>  
<![endif]-->  
</head>  
<body>  
<ul id="bildliste">  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild noch laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschr. z. Bild</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild noch viel laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild noch laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschr. z. Bild</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild noch laenger</li>  
 <li id="vermitteln"><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild noch viel viel laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild laenger</li>  
 <li><img src="Beispiel.jpg" alt="ein Bild">Beschreibung zum Bild noch laenger</li>  
</ul>  
</body>  
</html>  

Bei Frage bitte nachfragen.

viele Grüße

Axel

[kEv*]

Hallo

das ist auch eine Variante.
Durch einwenig probieren habe ich mich jetzt in diese Lösung verbissen.
Keine Ahnung ob es funktioniert, oder ob ich einfach noch zu sehr das tabellarische Denken benutze, aber so habe ich mir das jetzt gedacht.

  
ul#preview li{  
  diplay:inline;  
  }  
  
ul#test li{  
  display:block;  
  }  

  
<ul id="preview">  
 <li>  
  <ul id="test">  
    <li>DAS BILD</li>  
    <li>DER TEXT</li>  
  </ul>  
 </li>  
 <li>  
  <ul id="test">  
    <li>DAS BILD</li>  
    <li>DER TEXT</li>  
  </ul>  
 </li>  
</ul  

Wenn ich das aufsplitte, also die ungeordnete Liste preview dann habe ich die einzelnen Komponeten nebeneinander, und meine test ul ist untereinander.

Kombiniere ich diese aber, dann ist alles untereinander.
Habe ich da doch einen Denkfehler, oder eine unlösbare Kombination?

LG
--
kEv*
----

[Axel Richter]

Hallo,

... oder ob ich einfach noch zu sehr das tabellarische Denken benutze,

Ja, würde ich sagen. Jede Menge HTML-Elemente, die meiner Meinung nach nicht notwendig sind ;-).

aber so habe ich mir das jetzt gedacht.

ul#preview li{
  display:inline;
  }

ul#test li{
  display:block;
  }

>   
> ~~~html
  

> <ul id="preview">  
>  <li>  
>   <ul id="test">  
>     <li>DAS BILD</li>  
>     <li>DER TEXT</li>  
>   </ul>  
>  </li>  
>  <li>  
>   <ul id="test">  
>     <li>DAS BILD</li>  
>     <li>DER TEXT</li>  
>   </ul>  
>  </li>  
> </ul  
> 

Nein, Elemente mit display:block _innerhalb_ von Elementen mit display:inline, das geht nicht gut.

Außerdem möchte Deine ID "test" dringend eine Klasse sein. IDs haben in einem Dokument eindeutig zu sein. Klassen sind dazu da, Elemente gleicher Klassifizierung zu sammeln.

Aber Du musst Dich auch dringend mit CSS-Selektoren beschäftigen. Der Eingriff in das HTML sollte soweit möglich vermieden werden. Hier sind die Klassen nicht nötig:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
ul#preview li{  
  float:left;  
  }  
  
ul#preview ul li{  
  clear:left;  
  }  
-->  
</style>  
</head>  
<body>  
<ul id="preview">  
 <li>  
  <ul>  
    <li>DAS BILD</li>  
    <li>DER TEXT</li>  
  </ul>  
 </li>  
 <li>  
  <ul>  
    <li>DAS BILD</li>  
    <li>DER TEXT</li>  
  </ul>  
 </li>  
 <li>  
  <ul>  
    <li>DAS BILD</li>  
    <li>DER TEXT</li>  
  </ul>  
 </li>  
 <li>  
  <ul>  
    <li>DAS BILD</li>  
    <li>DER TEXT</li>  
  </ul>  
 </li>  
</ul>  
</body>  
</html>  

viele Grüße

Axel

[kEv*]

Hallo Axel,

ich werde mich nochmals ausgibig mit dem Kapitel CSS Selektoren befassen.
Trotz allem ist die Lösung von dir in die Tat umgesetzt.
Fragen die mir dabei noch entstanden sind, sollten mit dem lesen, vermutlich, behoben werden.

Vielen Dank
LG
--
kEv*
----