Muss ich Designtabellen verwenden?

[Jeena Paradies]

Hallo,

Ich habe letztens schon einmal hier nachgefragt, dann aber eine völlig andere Lögung gefunden. Jetzt komme ich bei meinem neuen Problem nicht so einfach mit dem umschiffen des Problems davon.

Ich möchte mehrere Bilder mit einer darunter stehenden Bildbeschreibung nebeneinander zentriert auf dem Bildschirm plazieren. Das will und will aber nicht funktionieren. Hier das was ich bisher herausgefunden habe mit ein paar Beispielen:

http://jeenaparadies.net/t/inline-block.html

Jetzt bleibt die Frage, gibt es irgendeine andere Möglichkeit als die zu letzt aufgeführte um Blockelemente zentriert nebeneinander auf dem Bildschirm zu plazieren?

Grüße
Jeena Paradies

[Tom]

Hello,

da gab's schon mal eine nette Lösung, wie man mit DIVs zentriert darstellen kann.
Entweder vom M. Bigge oder von Orlando...
Ich weiß nicht mehr genau, werd das beschreiben hatte.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Mathias Bigge]

Hi Tom,

Entweder vom M. Bigge oder von Orlando...

Von Orlando, ich würde in diesem Falle eiskalt eine Tabelle nehmen *g*

Viele Grüße
Mathias Bigge

[Jeena Paradies]

Hallo,

Entweder vom M. Bigge oder von Orlando...
Von Orlando, ich würde in diesem Falle eiskalt eine Tabelle nehmen *g*

Und wie würdest du das Problem des horizontalen scrollbalken lösen?

Grüße
Jeena Paradies

[Mathias Bigge]

Hi Jeena,

Entweder vom M. Bigge oder von Orlando...
Von Orlando, ich würde in diesem Falle eiskalt eine Tabelle nehmen *g*
Und wie würdest du das Problem des horizontalen scrollbalken lösen?

Das Problem habe ich auf Deiner Beispielsite nicht entdeckt. Kannst Du das nochmal näher erläutern?

Viele Grüße
Mathias Bigge

[Jeena Paradies]

Hallo,

Das Problem habe ich auf Deiner Beispielsite nicht entdeckt. Kannst Du das nochmal näher erläutern?

Das Problem kommt, wenn ich da fünf solcher Bilder nebeneinander setze, oder die Fensterbreite verkleinere. Es ist halt so dass ich im Produktiveinsatz einmal viele kleine Bilder habe und dann einmal wenige große usw. Dazu kommt, dass es sich um ca 150 Bilder handelt, die ich alle von Hand positionieren muss. Deshalb habe ich nach einer Methode gesucht, bei der ich das nur auszeichnen muss und das mit der positionierung dem Browser überlassen kann. Funktioniert ja auch wunerbar im Opera und Konqueror, aber leider nicht in den anderen Browsern.

Grüße
Jeena Paradies

[nag]

Hallo,

ein Problem ist wahrscheinlich wirklich, dass man sich noch nicht ganz vorstellen kann, was du umzusetzen versuchst.

Vielleicht findest du ja auch eine Lösung in den CSS-Popups, sprich dass du die Bildbeschreibung "auslagerst"?

mfg NAG

[Jeena Paradies]

Hallo,

ein Problem ist wahrscheinlich wirklich, dass man sich noch nicht ganz vorstellen kann, was du umzusetzen versuchst.

Drücke ich mich wirklich so verworren aus? :-) Na dann versuche ich es mal mir ASCI-Art:

+---+
|   |  == Bild
+---+

Bsh    == Beschreibung des Bildes

Bei einer großen Fensterbreite soll das so aussehen:
+----------------------------------------+
|                                        |
|     +---+ +---+ +---+ +---+ +---+      |
|     |   | |   | |   | |   | |   |      |
|     +---+ +---+ +---+ +---+ +---+      |
|      Bsh   Bsh   Bsh   Bsh   Bsh       |
|                                        |
+----------------------------------------+

Wenn jemand das Fenster nich so groß hat soll es so aussehen:
+---------------+
|               |
|  +---+ +---+  |
|  |   | |   |  |
|  +---+ +---+  |
|   Bsh   Bsh   |
|               |
|  +---+ +---+  |
|  |   | |   |  |
|  +---+ +---+  |
|   Bsh   Bsh   |
|               |
|     +---+     |
|     |   |     |
|     +---+     |
|      Bsh      |
|               |
+---------------+

Wobei alles immer zentriert ist und nicht rechts oder links klebt. Dtlef hat ja eigentlich schon ziemlich genau das hinbekommen, was ich haben will, ich muss nur noch ausprobieren, ob das auch mit mehreren Bildern funktioniert.

Vielleicht findest du ja auch eine Lösung in den CSS-Popups, sprich dass du die Bildbeschreibung "auslagerst"?

Ne das würde ich nur ungern, denn die Besucher dieser seite sind alles andere als Technikbegeistert und würden das, wenn es nicht gleich offensichtlich da steht, nicht finden, obwohl die Beschreibung auch die wichtigste Information - also den Preis - enthält.

Grüße
Jeena Paradies

[Björn]

Hallo Jeena, eigentlich ist das eine gute Lösung DL für Bilder mit Beschreibung zu nutzen (ich berichtete (http://www.bs-markup.de/archiv/2004/12/04/bildlegenden-mit-css/)). Was mir damals entgangen ist, ist genau dieses Problem, da ich es nur mit einer Grafik links gefloatet beschrieben habe.

Gestern abend habe ich rumprobiert und es scheint echt keine Lösung dafür zu geben, die Dinger auf der Seite bzw. in einem Bereich zu zentrieren. Schade eigentlich. Es kann aber eigentlich nur ein Bug sein. Denn wenn ich die DL als Blocklevel-Element in einen DIV packe, diesen zentriere und die DL links darin floate, müsste es eigentlich funktionieren. Es ging nur dann als ich dem DIV und den DL feste Breiten gegeben habe. Aber das willst Du vermutlich auch verhindern. Die DL lassen sich nicht zentrieren.

Gruß
Björn

[Jeena Paradies]

Hallo,

Es kann aber eigentlich nur ein Bug sein. Denn wenn ich die DL als Blocklevel-Element in einen DIV packe, diesen zentriere und die DL links darin floate, müsste es eigentlich funktionieren.

Float braucht dringend eine width angabe für ein blockelement, sonst ist das blockelement ja immer 100% breit oder so.

Es ging nur dann als ich dem DIV und den DL feste Breiten gegeben habe. Aber das willst Du vermutlich auch verhindern. Die DL lassen sich nicht zentrieren.

Wenn ich dem DIV aber eine feste Breite gebe dann rutscht ja nichts mehr runter, weil für die Inhalte ja genügend platz durch einen Scrollbalken geschaffen wird.

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

Float braucht dringend eine width angabe für ein blockelement, sonst ist das blockelement ja immer 100% breit oder so.

nein. Alle gängigen Browser setzen float ohne width anders um. Und nach CSS 2.1 ist das ja auch erlaubt. Nur dürfte das trotzdem nicht zu zentrieren sein.

Aber warum überhaupt zentrieren? Was spricht gegen einen sinnvollen linken Abstand und variable Abstände nach rechts?

freundliche Grüße
Ingo

[Jeena Paradies]

Hallo,

Aber warum überhaupt zentrieren? Was spricht gegen einen sinnvollen linken Abstand und variable Abstände nach rechts?

Es ist teilweise so, dass die Bilder in der Breite nur wenig kleiner sind als die hälfte eines 1024er Browserfensters. wenn dann jemand mit einer kleineren Auflösung surft dann kleben die gefloateten Bilder immer ganz links und rechts davon hat man ewig viel platz, das sieht einfach nicht gut aus. Es sind ja keine kleinen Bildchen sondern auch sehr große dabei. Wenn man dann halt auch noch mit einem sehr großen Fenster surft dann kleben die halt auch wieder an der linken seite anstatt sich schön in der Mitte zu platzieren. Es sind immer Gruppen von 2-6 Bildern, die zusammen gehören.

Grüße
Jeena Paradies

[aleks]

Hi,

zerreisst mich, wenn das Quatsch ist was ich erzähle, aber zieh mal die Möglichkeit in Betracht, die Bilder und die dazugehörigen Beschreibungen in eine Liste zu packen und mit CSS zu formatieren.

Will heißen: float:left, list-style-type:none, ensprechende margin + padding

<li><p><img src="#" alt="" /></p><p>Blablabla</p></li>
...

Aber da weißt du ja alles ;)

Gruß
aleks

[Jeena Paradies]

Hallo,

Will heißen: float:left

Das problem ist ja dass das dann links am Browser klebt und nicht in der Mitte zentriert ist.

Grüße
Jeena Paradies

[aleks]

Hi,

Das problem ist ja dass das dann links am Browser klebt und nicht in der Mitte zentriert ist.

Jo ;) Das ist das Problem.

Gruß
aleks

[Tom]

Hello,

vielelicht hilft http://skop.net/self/zentriertes_div.html weiter.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Detlef G.]

Hallo Jeena

Ich möchte mehrere Bilder mit einer darunter stehenden Bildbeschreibung nebeneinander zentriert auf dem Bildschirm plazieren. Das will und will aber nicht funktionieren. Hier das was ich bisher herausgefunden habe mit ein paar Beispielen:

http://jeenaparadies.net/t/inline-block.html

Ich habe zwei weitere Beispiele eingefügt:

http://d-graff.de/demos/selfhtml/jeena_test.html

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Jeena,

Schau noch einmal auf http://d-graff.de/demos/selfhtml/jeena_test.html.

Auf Wiederlesen
Detlef

[Jeena Paradies]

Hallo,

Schau noch einmal auf http://d-graff.de/demos/selfhtml/jeena_test.html.

Boa, cool funktioniert ja sau gut mit einheitlichen Bildern. Mein Problem ist leider etwas verworrener, sogar so verworren, dass ich es wohl einfach mit einer festen Breite machen werde und horizontale Scrollbalken bei kleinen Bildschirmen in kauf nehmen werde.

Hier kannst du das Problem in seiner vollen Pracht sehen ;-)

* http://broke-kid.jeenaparadies.net/gemeindeaemter
* http://broke-kid.jeenaparadies.net/feuerwehren
* und noch 12 genau solcher Seiten

(bisher nur in Opera, Konqueror und Mozilla getestet, IE macht noch ein wenig rum)

Grüße
Jeena Paradies

[nag]

Hallo,

Boa, cool funktioniert ja sau gut mit einheitlichen Bildern

Was spricht gegen eine Vereinheitlichung?
Ich würde einen immer gleichgroßen Bildausschnitt von den Urkunden nehmen. Dieses Bild verlinkst du dann zu einem Popup, wo man sich das Original ansehen kann. Zusätzlich kannst du noch einen Textlink "Großansicht" anbieten.

Das hätte in meinen Augen mehrere Vorteile:

• dient der besseren Übersciht
• Seite baut sich schneller auf

mfg NAG

[Jeena Paradies]

Hallo,

Was spricht gegen eine Vereinheitlichung?

Naja, wie soll ich sagen, nun ich habe dem armen Mann schon sowieso sein ganzes konzept über den Haufen geworfen. Ursprünglich habe ich ihm ja eigentlich versprochen dass ich das aussehen der Seite so belasse wie es ist, und nur den Quelltext so aufräume, dass auch robots damit zurecht kommen. Mittlerweile (nach vielen Mails uns sogar einer Absage meinerseits, das ich ihm nicht helfen kann, wenn er mich das Design nicht wenigstens ein bischen verändern lässt) habe ich ihn dann doch davon überzeugen können, dass es absolut notwendig ist sein Design an einigen Stellen zu Verändern, wie zum Beispiel ein Menü einzuführen etc. Wenn ich jetzt auch noch seine ganzen Bilder verändere dann weiß ich nicht ob es nicht doch zu viel für Ihn wird und er kalte Füße bekommt.

Er sagt von sich selbst: »Ich habe mich übers Wochenende dazu durchgerungen auf Sie zu hören. Dies ist mir nicht leicht gefallen, da ich doch schon über 50 bin und mich nur schwer von Altvertrautem löse.«

Grüße
Jeena Paradies

[nag]

Hallo,

sowas in der Art hatte ich mir schon fast gedacht, als ich die Seite sah ;)
Und inwieweit es sich da lohnt Überzeugunsarbeit zu leisten, kann ich nicht beurteilen. Wie heisst es doch so schön:
"Bilder sagen mehr als Worte".
Wenn du ihm ein Gesamtkonzept einens neuen Layouts anhand von einem Bild veranschaulichst, wird er vielleicht doch noch schwach :)

Ich denke du hast da sicher schon ein paar gute Ideen.
Denn gelbe Schrift auf rotem Hintergrund? Da geht doch mehr!

mfg NAG

[Jeena Paradies]

Hallo,

sowas in der Art hatte ich mir schon fast gedacht, als ich die Seite sah ;)
Und inwieweit es sich da lohnt Überzeugunsarbeit zu leisten, kann ich nicht beurteilen. »» Ich denke du hast da sicher schon ein paar gute Ideen.
Denn gelbe Schrift auf rotem Hintergrund? Da geht doch mehr!

Hm, Ja das weiß _ich_ genau ;-)

Ein weiteres Argument sind dann noch seine Kunden, denn wie er sagt: »Meine Kunden  -  Gemeindeverwaltungen, Feuerwehren, Innungen und Großvereine - bestätigen mir immer wieder, daß meine Homepage super ist und man sich sofort auskennt.«

Ich muss ehrlich zugeben, dass ich mir nicht anmaßen will zu sagen dass diese Kunden keine Ahnung von Design haben, denn das ist reine Geschmacksache. Und ich will nicht daran schuld sein, dass er Kunden verliert, nur weil ich ihn zu meiner Sache überredet habe. Wie gesagt, seine Kunden sagen das nicht er selbst. Immerhin machen ich die Seite ja eigentlich für die Kunden meines Kunden die ja schon gesagt haben was ihnen gefällt.

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo,

Wenn du ihm ein Gesamtkonzept einens neuen Layouts anhand von einem Bild veranschaulichst, wird er vielleicht doch noch schwach :)

Man sollte niemals nie sagen bevor man nicht gefragt hat ;-)

Der nette Herr kam selbst auf mich zu und fragte ob man die ganze Seite nicht ein wenig einheitlicher gestalten könnte, da habe ich natürlich gleich geschrieben dass wir die Bilder einheitlich groß machen könnten und er hat zugestimmt :-).

So jetzt muss ich also erst einmal alles wieder ändern was ich bisher gemacht habe, aber das ist gut so, das mache ich gerne im namen der Zugänglichkeit und Sauberkeit ;-).

Jetzt muss ich mich doch noch einmal tiefer mit Detlefs JavaScript Lösung auseinandersetzen ;-). Auf ein gutes gelingen!

Grüße
Jeena Paradies

[Mathias Bigge]

Hi Detlef,

Schau noch einmal auf http://d-graff.de/demos/selfhtml/jeena_test.html.

Deine Beispiele finde ich immer extrem instruktiv! Super!

Viele Grüße
Mathias Bigge

[Jeena Paradies]

Hallo,

Schau noch einmal auf http://d-graff.de/demos/selfhtml/jeena_test.html.

So da ich die Bilder jetzt doch einheitlich Breit machen darf, werde ich sehr gerne deine Lösung einsetzen. Davor muss ich sie aber erst einmal auseinandernehmen um sie zu verstehen ;-) Vielen Dank für deine Hilfe.

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo,

Schau noch einmal auf http://d-graff.de/demos/selfhtml/jeena_test.html.

Phuh, so ganz ganz langsam fange ich an zu verstehen wie das funktionieren soll. Da aber das nachvollziehen bei mir nur mit größter anstrengung gelingt komme ich zur Zeit nicht weiter. Deshalb meine Frage bevor ich mich eventuell unnütz anstrenge: Würde der Ansatz auch mit verschieden breiten Bildern aussehen?

  
function neuAufbau() {  
 Fensterweite();  
 Nebeneinander=Math.floor((Weite-20)/230);  
 DivWeite=230*Nebeneinander;  
 Letzte=Anzahl%Nebeneinander;  
 LMargin=Math.round((DivWeite-Letzte*230)/2);  
 MyObj.style.width=DivWeite+"px";  
 for(var i = 0; i < Anzahl; i++)  
  if (i==Anzahl-Letzte)  
   MyObj.getElementsByTagName("p")[i].style.paddingLeft=LMargin+"px";  
  else  
   MyObj.getElementsByTagName("p")[i].style.paddingLeft="0";  
}  

Die sollten dann in etwa so aussehen:

+--+ +--+ +-----+
|  | |  | |     |
+--+ +--+ +-----+

soll dann bei zu kleinem Fenster zu

+--+  +--+
|  |  |  |
+--+  +--+

+-----+
  |     |
  +-----+

werden kann. (naja mit AsciArt geht es nicht so gut, aber halt zentriert) Irgendwie will ich es schaffen, dass die Breite des Bildes mit Beschreibung ausgelesen wird und damit gerechnet wird. Eine Einzelne Gruppe sollte irgendwie so ausgezeichnet sein:

<div class="gruppe" style="width: 861px;">

<dl class="fl" style="width: 422px;">
     <dt>
      <img src="/bilder/gr_vers/Noss-600.jpg" alt="Ehrenbürgermeister" style="width: 422px; height: 600px;" />
     </dt>
     <dd>Handgeschrieben mit Siegelkapsel - A 3</dd>
     <dd>auf Urkundenpapier &euro; 1,-</dd>
     <dd>auf echtem Pergament &euro; 1,-</dd>
     <dd>Best. Nr. GA-2a</dd>
    </dl>

<dl class="fl" style="width: 425px;">
     <dt>
      <img src="/bilder/gr_vers/Marktgemeinde.jpg" alt="Bezeichnung Marktgemeinde" style="width: 425px; height: 600px;" />
     </dt>
     <dd>Handgeschrieben A3</dd>
     <dd>Urkundenpapier &euro; 1,-</dd>
     <dd>Echt Kalbspergament &euro; 1,-</dd>
     <dd>Best. Nr. GA-2b</dd>
    </dl>

</div>

Theoretisch könnte ich ja die Breite der einzelnen dl per JavaScript herauslesen oder nicht? Was mir halt wirkliche Probleme bereitet ist diese Gesamtheit, weil auf jeder Seite auch noch mehrere Gruppen zu finden sind.

Grüße
Jeena Paradies