Layout: 8 Wünsche- wie umsetzen?

[juewi]

Hallo!

Ich hoffe ich nerve euch nicht mit rel. oft wechselnden HP-Gestaltungsfragen aber ich freu mich immer so wenn ich wieder was neues auf diesem Gebiet hinbekomme ;-)

Ich hab hier

es so zusammengestellt, wie´s schlussendlich aussehen soll.

Bei den bisherigen Layouts bzw. HPs hab ich zu schnell drauflosgewerkt und es wurde meist ein funktionaler UND optischer Murks. Deswegen versuch ich´s nun mit etwas Konzept.

Und jetzt meine diesbezüglichen Vorstellungen: da wär ich euch echt dankbar, wenn ihr mir zu den Punkten Codebeispiele und Schlagwörter zum Suchen liefern könntet denn bei vielem weiss ich gar nicht, WONACH ich überhaupt suchen soll ...

Danke schon mal für´s Lesen ;-)

1.) Layout-Bestandteile sollen pixelgenau ausgerichtet sein
(alles mit Div#-Containern? Angabe absolute oder relative? Oder „Slicen“? [noch nie gemacht])

2.) Layout-Block - voraussichtlich 950x700px - soll vertikal+horizontal zentriert sein
(Div#-Container um alles herum und diesen (wie?) zentrieren?)

3.) wenn Browser kleiner als Layout-Block wird sollen die üblichen Bildlaufleisten trotzdem sichtbar sein
(mit Div#-Containern ist das – bei mir halt – leider nicht der Fall)

4.) es soll unbedingt eine bestimmte relativ exotische Schriftart sein
(nur mit Grafiken realisierbar, wenn User diese Schriftart nicht installiert hat?)

5.) Thumbnail-Bereich muss vertikal (maus)scrollbar sein inklusive Bildlaufleiste
(eines der wenige Dinge, die bereits funktionieren ;-))

6.) Foto-Anzeige mittels CSS bei Mousover über Thumbnails; ansonsten per Klick mittels JS
(beiliegendes CSS-Muster-Beispiel von Joachim Wendenburg geht in meinem ident codierten eigenen Beispiel leider nicht (?))

7.) Thumbnails blass bzw. geringe Deckkraft, bei hover/mouseover satt bzw. volle Deckkraft - wenn möglich OHNE 2 Thumbnail-Versionen zu verwenden
(pffff …. Gehen tut´s, aber ich fürchte, ich werde die Möglichkeiten nicht umsetzen können;
Bei völligem Misslingen versuch ich´s ggf. mit einfacher Rahmung bei hover/mouseover)

8.) Querbalken mit Verlauf, Striche, div. Design-Elemente etc. – und diese pixelgenau positioniert
(was ist für einen Anfänger via CSS machbar und was soll man besser mit Grafik machen?)

[Beat]

5.) Thumbnail-Bereich muss vertikal (maus)scrollbar sein inklusive Bildlaufleiste
(eines der wenige Dinge, die bereits funktionieren ;-))

Würde ich als Default nicht machen.
Default wäre bei mir: Keine Spalten.
Wenn javascript verfügbar: Wohnung ausmessen und möblieren.

6.) Foto-Anzeige mittels CSS bei Mousover über Thumbnails; ansonsten per Klick mittels JS

:focus düfte hier auch in Frage kommen...

mfg Beat

[molily]

(alles mit Div#-Containern?

Was heißt alles?
div ist das einzige generische Blockelement, das weitere beliebig viele Blockelemente beinhalten darf - und eignet sich deshalb zur Gruppierung.

Die Thumbail- und Navigationsleisten musst du aber nicht in ein div umschließen, sondern kannst sie vermutlich direkt als Listen auszeichnen und positionieren.

Angabe absolute oder relative?

Die Größen meinst du? In deinem Fall wohl absolut in Pixeln.

2.) Layout-Block - voraussichtlich 950x700px - soll vertikal+horizontal zentriert sein

Vertikale Zentrierung ist Unsinn, weil die wenigsten Viewports 700px oder höher sind.
Ich würde 100% der Viewport-Höhe verwenden und eine Minimalhöhe, bei der dann Scrollbars auftreten. Sprich html und body auf height: 100% setzen (margin und padding ausschalten), dann darin Navigationsleisten und Thumbnail-Leiste absolut positionieren. (Wird aber vermutlich schwierig, weil oben noch der Header liegt und die Thumbnail-Leiste nicht 100% einnimmt.)

(Div#-Container um alles herum und diesen (wie?) zentrieren?)

Horizontale Zentrierung: Feste Breite bzw. maximale Breite und dann margin-left und margin-right auf auto setzen.

3.) wenn Browser kleiner als Layout-Block wird sollen die üblichen Bildlaufleisten trotzdem sichtbar sein

Das macht der Browser standardmäßig so, ja.

(mit Div#-Containern ist das – bei mir halt – leider nicht der Fall)

Dann machst du irgendetwas im CSS falsch.

4.) es soll unbedingt eine bestimmte relativ exotische Schriftart sein
(nur mit Grafiken realisierbar

Ja, deshalb ist die Idee ziemlich schlecht. Insbesondere »Text in Form eines Hintergrundbildes«... Vielleicht solltest du Flash verwenden.

beiliegendes CSS-Muster-Beispiel von Joachim Wendenburg geht in meinem ident codierten eigenen Beispiel leider nicht (?))

Da hast du wohl Fehler beim Kopieren des JS-Codes gemacht. In der JavaScript-Konsole wird ein Syntaxfehler angezeigt, schaffe den aus der Welt.

7.) Thumbnails blass bzw. geringe Deckkraft, bei hover/mouseover satt

#thumbnails a { opacity: 0.5; }
#thumbnails a:hover { opacity: 1; }

Dasselbe mit http://de.selfhtml.org/css/eigenschaften/filter.htm#alpha@title=Microsoft-Filter für den IE.

wenn möglich OHNE 2 Thumbnail-Versionen zu verwenden

Dafür gibt die CSS-Eigenschaft opacity.

8.) Querbalken mit Verlauf

kann nur eine (Hintergrund-)Grafik werden, dem hoffentlich ein Element mit dem Text aus dem Bild zugrunde liegt

Striche

kannst du soweit es geht mit CSS-border erreichen

(was ist für einen Anfänger via CSS machbar und was soll man besser mit Grafik machen?)

Na, bisher ist alles bei dir Grafik und nichts Text in HTML. Am besten machst du dich über Image Replacement schlau, damit zumindest überall zugängliche Alternativtexte stehen.

Mathias

[Beat]

(was ist für einen Anfänger via CSS machbar und was soll man besser mit Grafik machen?)  

Na, bisher ist alles bei dir Grafik und nichts Text in HTML. Am besten machst du dich über Image Replacement schlau, damit zumindest überall zugängliche Alternativtexte stehen.

Ist das dein Bekenntnis zu einem zusätzlichen Dummy Image Element?

Soviel ich weiss, ist gerade die IR-technik noch nicht zufriedenstellend gelöst.

PS FF3 kann sogar alt Texte richtig gut stylen ;)

mfg Beat

[molily]

Ist das dein Bekenntnis zu einem zusätzlichen Dummy Image Element?

Keine Ahnung, was heißt das?

Mathias

[Beat]

Ist das dein Bekenntnis zu einem zusätzlichen Dummy Image Element?
Keine Ahnung, was heißt das?

Eine der Techniken beschäftigt sich mit der Frage, wie restauriere ich den Alttext, wenn ich den Text wegblende, aber das Bild via CSS Background eingebunden wird. (was ja für Sprites interessant ist.).
Die Antwort war eben ein zusätzlichen img-Element.

Ich fand die Methode aufgelistet bei einer Website (nicht Jens Meiert), habe sie aber nicht aktuell in den Bookmarks.

mfg Beat

[suit]

Vertikale Zentrierung ist Unsinn, weil die wenigsten Viewports 700px oder höher sind.

Das ist wohl das denkbar schlechteste Argument[1] - es spielt keine Rolle wie hoch der Viewport ist oder sein kann. Vertikale Zentrierung ist bei Viewports > 700px sogar besonders lästig. Mein Viewport ist rund 1450 Pixel hoch, rein vom Platz wäre es kein problem, allerdings leidet die Usability enorm darunter.

Bei Viewports < 700px wäre es hingegen egal - da müsste man ohnehin scrollen.

[1] wollte ich immer schon mal sagen.

[molily]

Vertikale Zentrierung ist Unsinn, weil die wenigsten Viewports 700px oder höher sind.

Das ist wohl das denkbar schlechteste Argument

Ich habe keine allgemeingültige Aussage über »vertikale Zentrierung an sich« gemacht, sondern über diesen konkreten Fall gesprochen, indem ein Container mit einer festen Höhe von 700px vertikal zentriert wird und der selber wieder Scrollbars mit sich bringt.

vertikale Zentrierung ist bei Viewports > 700px sogar besonders lästig.

Wieso? Nur dann wären im o.g. Fall wären alle Bedienelemente sichtbar und der Inhalt könnte gescrollt werden.

Bei Viewports < 700px wäre es hingegen egal - da müsste man ohnehin scrollen.

Nein, man müsste doppelt scrollen. Scrollen, um den Container zu sehen, und im Container scrollen, um die Inhalte zu sehen. Und die wären ständig abgeschnitten.

Mathias

[suit]

Nein, man müsste doppelt scrollen. Scrollen, um den Container zu sehen, und im Container scrollen, um die Inhalte zu sehen. Und die wären ständig abgeschnitten.

Das ist aber jetzt eine allgemeingültige Aussage - wer sagt denn, dass überhaupt so viel Inhalt da ist, dass gescroll werden müsste?

[molily]

wer sagt denn, dass überhaupt so viel Inhalt da ist, dass gescroll werden müsste?

juewis Entwurf sagt das (zumindest für die Fotoauswahl links).

Mathias

[suit]

juewis Entwurf sagt das (zumindest für die Fotoauswahl links).

Punkt für dich, da hab' ich nicht darauf geachtet.

[juewi]

Danke mal an Beat und molily.

ich aktualisiere/ergänze mal ein paar Punkte:

1.) Layout-Bestandteile sollen pixelgenau ausgerichtet sein
(alles mit Div#-Containern? **POSITION**: absolute oder relative?)

2.) Layout-Block - voraussichtlich 950x700px - soll vertikal+horizontal zentriert sein
(Div#-Container um alles herum und diesen (wie?) zentrieren?
**schlagt mich bitte nicht: wenn ich einen Div-Container aussenrum habe stellt dieser mein Elternelement dar und die inneren Divs mit position: relative orientieren sich dann quasi an diesem Eltern-Div???**)

3.) erledigt

4.) erledigt

5.) Thumbnail-Bereich muss vertikal (maus)scrollbar sein inklusive Bildlaufleiste
(eines der wenige Dinge, die bereits funktionieren ;-))

6.) erledigt (Beispiel funktioniert jetzt)

7.) Thumbnail "blass" mach ich mit opacity bzw. filter:Alpha (letzteres kannte ich nicht) - WIE genau das geht muss ich noch gucken ;-)

8.) erledigt

Die Hauptaufgaben werden für mich sein:
a) Erstellung des Layouts mit Div-Containern
b) Positionierung der Thumbs samt opacity/alphy + Einbau CSS-Hover-Galerie

Wird sich bloß um Jahre handeln ...

Ich bin so frei und frage weiter wenn DIREKT bei der Erstellung dann Probleme auftreten und bedanke mich schon im voraus ;-)

[molily]

**POSITION**: absolute oder relative?)

Die Frage ist so unsinnig wie »Rot oder Elefant?« und »float:none oder float:left?«.

position:relative erfüllt einen ganz anderen Zweck als position:absolute. Man kann nicht mit beiden dasselbe oder (oder absurde Verrenkungen) ähnliches erreichen.

Wenn dir dieser Unterschied noch nicht klar ist, sollte er dir klar werden, bevor du dich ans Layout begibst.

wenn ich einen Div-Container aussenrum habe stellt dieser mein Elternelement dar und die inneren Divs mit position: relative orientieren sich dann quasi an diesem Eltern-Div???

Nein.
Soll ich dir jetzt erklären, wie position:relative funktioniert, oder magst du es in http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=SELFHTML oder einer anderen beliebigen CSS-Dokumentation, die Google zu diesem Stichwort ausspuckt, nachlesen?

7.) Thumbnail "blass" mach ich mit opacity bzw. filter:Alpha (letzteres kannte ich nicht) - WIE genau das geht muss ich noch gucken ;-)

#thumbnails a { opacity:0.5; filter:Alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
#thumbnails a:hover { opacity:1; filter:Alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

Für Nicht-IE-Browser, für IE < 8, für IE 8 (standardkonformer Rendermodus).

Die Hauptaufgaben werden für mich sein:

Erst einmal schreibst du Texte und zeichnest sie mit HTML aus, dann gruppierst du zusammengehörige Elemente soweit nötig, um Angriffspunkte für CSS zu haben, dann schreibst du das CSS und bindest die Bilder darüber ein.

Mathias

[juewi]

»» **POSITION**: absolute oder relative?)

Die Frage ist so unsinnig wie »Rot oder Elefant?« und »float:none oder float:left?«.

Na gut. Powerreading ist für HTML, CSS und Co eben nicht das Wahre ...

Wenn dir dieser Unterschied noch nicht klar ist, sollte er dir klar werden, bevor du dich ans Layout begibst.

Sieht so aus.

Soll ich dir jetzt erklären, wie position:relative funktioniert, oder magst du es in http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=SELFHTML oder einer anderen beliebigen CSS-Dokumentation, die Google zu diesem Stichwort ausspuckt, nachlesen?

muss ich wohl gucken.

»» 7.) Thumbnail "blass" mach ich mit opacity bzw. filter:Alpha (letzteres kannte ich nicht) - WIE genau das geht muss ich noch gucken ;-)

#thumbnails a { opacity:0.5; filter:Alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
#thumbnails a:hover { opacity:1; filter:Alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

danke sehr!

»» Die Hauptaufgaben werden für mich sein:

Erst einmal schreibst du Texte und zeichnest sie mit HTML aus, dann gruppierst du zusammengehörige Elemente soweit nötig, um Angriffspunkte für CSS zu haben, dann schreibst du das CSS und bindest die Bilder darüber ein.

Hmmm ... Ich dachte, dass ich quasi mit dem Aussen-Bereich beginne und dann die darin enthaltenen Bereich nach und nach "entwerfe" und positioniere. Falsche Herangehensweise?

[Auge]

Hallo

»» »» Die Hauptaufgaben werden für mich sein:
»»
»» Erst einmal schreibst du Texte und zeichnest sie mit HTML aus, dann gruppierst du zusammengehörige Elemente soweit nötig, um Angriffspunkte für CSS zu haben, dann schreibst du das CSS und bindest die Bilder darüber ein.

Hmmm ... Ich dachte, dass ich quasi mit dem Aussen-Bereich beginne und dann die darin enthaltenen Bereich nach und nach "entwerfe" und positioniere. Falsche Herangehensweise?

Nein, aber du setzt quasi in der Mitte an. Wie molily sagt, ist es deine erste Aufgabe, deinem Inhalt mit HTML eine passende Struktur zu geben. Denke darüber nach, was was ist und welches HTML-Element die größte Aussagekraft über die Art seines Inhalts hat, sprich benutze für die einzelnen Abschnitte die passenden HTML-Elemente (Überschriften: <hx>, Textabsätze: <p>; Listen: <ul> und <ol> -> <li>; <dl> -> <dt> und <dd>; Tabellen: <table> -> <tr> -> <th> und <td>; usw. usf.). Das so fertiggestellte Dokument muss auch ungestylt im Browser die gewünschte Struktur abbilden.

Jetzt (und *erst* jetzt) bist du mit CSS am Zug. Elementgruppen, die zusammengehören, werden nun evtl. mit einem <div> gruppiert (umschlossen), welches mit einer ID oder einer Klasse versehen wird, um es für CSS ausfindig zu machen etc. pp.. Mit den IDs, Klassen und natürlich auch Elementnamen kannst du jetzt im CSS die entsprechenden Elemente bzw. Gruppen ansprechen und *jetzt* mit Positionierung, Zuweisungen von Farben und Größen und was sonst noch möglich ist, beginnen.

Tschö, Auge

[Sven Rautenberg]

Moin!

»» 7.) Thumbnail "blass" mach ich mit opacity bzw. filter:Alpha (letzteres kannte ich nicht) - WIE genau das geht muss ich noch gucken ;-)

#thumbnails a { opacity:0.5; filter:Alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
#thumbnails a:hover { opacity:1; filter:Alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

Für Nicht-IE-Browser, für IE < 8, für IE 8 (standardkonformer Rendermodus).

Und wenn ich weiss, dass sowieso zwei unterschiedliche Grafiken verwendet werden müssen, dann lass ich den ganzen Transparenz-Spielkram, und sorge in meinem Grafikprogramm für das entsprechende "Aussehen". Geht bei einfarbigem Hintergrund sehr prima vorzuproduzieren, und braucht nicht mal PNGs.

- Sven Rautenberg

[molily]

wenn ich weiss, dass sowieso zwei unterschiedliche Grafiken verwendet werden müssen

Nur, wenn ich außer der Opazität auch noch alle Farben herausnehmen will, sodass sie Schwarz-Weiß wie in der Ausgangsgrafik werden. Ob das den Aufwand wert ist, muss juewi entscheiden.

dann lass ich den ganzen Transparenz-Spielkram

Was heißt Spielkram, es ist unter Annahme eines bestimmten Zieles die sinnvollste Umsetzung.

und sorge in meinem Grafikprogramm für das entsprechende "Aussehen".

Dann wären Sprites sehr sinnvoll.

Mathias

[juewi]

Zwischenbericht: geht doch ;-)

Opacity und Hover funktionieren (zumindest in FF, Safari, Opera und - man glaubt es kaum - auch im IE7)

Zurzeit bei der Lösungssuche:

• Foto soll im "gallery-view-wrapper"-div auch vertikal zentriert sein (?)
• Bei Verlassen des Mauszeigers eines Thumbs oder des gesamten "gallery-thumb-list"-div soll wieder KEIN Foto angezeigt werden (?)

Danke für bisherige und zukünftige Hilfe!

Euer - dank Euch nicht in nervenärztlicher Behandlung befindlicher - Jürgen ;-)

[Patrick Andrieu]

Hallo juewi!

Zwischenbericht: geht doch ;-)

Und Du hast Dich schon mächtig in die richtige Richtung entwickelt. Und? Ist doch nicht so schwer, oder?

So. Es sind aber einige Fehler zu bereinigen:
http://validator.w3.org/check?uri=http%3A//www.juergen-wiedner.at/hover-gallery-test2.html

Du vergibst die ID "op" mehrmals. Eine ID ist ein Identifier für ein Element und darf nur _einmal_ im gesamten Dokument vorkommen. In dem Fall würde sich eine Klasse besser eignen, da alle diese img-Elemente, vermute ich, die selbe Formatierungen haben sollen: class="op".

Wenn Du das geändert hast, bleiben von den derzeit 20 Fehler, die der Validator bemängelt, nur noch eins:

Line 156, Column 38: required attribute "ALT" not specified.
<div id="balken"><img src="balken.gif"></div>

Es fehlt das zwingend notwendige alt-Attribut. Wenn Dich die Tatsache stört, dass die IEs fälschlicherweise die _alt_ernativ-Texte als Tooltips anzeigen, füge noch ein leeres title-Attribut hinzu:

<div id="balken"><img src="balken.gif" alt="Header-Bild" title=""></div>

Zurzeit bei der Lösungssuche:

• Foto soll im "gallery-view-wrapper"-div auch vertikal zentriert sein (?)

Du kennst padding [ ] ja [ ] nein.

• Bei Verlassen des Mauszeigers eines Thumbs oder des gesamten "gallery-thumb-list"-div soll wieder KEIN Foto angezeigt werden (?)

Vielleicht hilft Dir die Infobox weiter.

P.S.: Noch schnell lernen, bevor der Nachwuchs kommt und Deine ganze Aufmerksamkeit benötigt ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Auge]

Hallo

Wenn Du das geändert hast, bleiben von den derzeit 20 Fehler, die der Validator bemängelt, nur noch eins:

Line 156, Column 38: required attribute "ALT" not specified.
<div id="balken"><img src="balken.gif"></div>

Es fehlt das zwingend notwendige alt-Attribut. Wenn Dich die Tatsache stört, dass die IEs fälschlicherweise die _alt_ernativ-Texte als Tooltips anzeigen, füge noch ein leeres title-Attribut hinzu:

<div id="balken"><img src="balken.gif" alt="Header-Bild" title=""></div>

Wenn ich den Zweck des Bildes richtig interpretiere, kann auch ein leeres alt-Attribut vergeben werden (womit der IE-Hack mit dem leeren title ebenfalls wegfiele). Gegebenenfalls ist weiterhin zu überlegen, ob das Bild nicht als Hintergrund in das CSS gehört.

Tschö, Auge

[juewi]

»» ... img src="balken.gif" ...

... Gegebenenfalls ist weiterhin zu überlegen, ob das Bild nicht als Hintergrund in das CSS gehört.

Tschö, Auge

Stimmt - ist geändert.

Und Du hast Dich schon mächtig in die richtige Richtung entwickelt. Und? Ist doch nicht so schwer, oder?

Danke! und .... öhm .... na ja ... ;-)

»» - Foto soll im "gallery-view-wrapper"-div auch vertikal zentriert sein (?)

Du kennst padding [ ] ja [ ] nein.

Jein. Soweit ich das jetzt beurteilen kann, ist padding für mein Vorhaben nicht das richtige Instrument, da meine Fotos unterschiedliche Formate und auch Abmessungen (mit max. 600px Seitenlänge) haben. Oder trotzdem mit padding möglich?

»» - Bei Verlassen des Mauszeigers eines Thumbs oder des gesamten "gallery-thumb-list"-div soll wieder KEIN Foto angezeigt werden (?)

Vielleicht hilft Dir die Infobox weiter.

Ok, auf display:none willst Du mich lenken denk ich ;-)
Trotz viel Herumüberlegen werd ich es bei meiner Codestruktur (Anzeige der Fotos wird per JS gemacht und das fotoanzeigende "gallery-view-wrapper"-div ist SELBST Teil des JS; ausserdem wird mit mouseover gearbeitet) nicht schaffen, eine Funktion für mouseout einzubauen - dazu kenn ich mich zu wenig aus muss ich gestehen.

P.S.: Noch schnell lernen, bevor der Nachwuchs kommt und Deine ganze Aufmerksamkeit benötigt ;)
Viele Grüße aus Frankfurt/Main,
Patrick

Mach ich ;-))

[Patrick Andrieu]

Hallo juewi!

Stimmt - ist geändert.

http://validator.w3.org/check?uri=http%3A//www.juergen-wiedner.at/hover-gallery-test2.html -> Du hast dafür neue Fehler eingebaut, sicher aus Unachtsamkeit: Entferne alle alt="" in den a-Elementen, dort haben sie nichts zu suchen, lass sie in den img-Tags, denn da sind sie notwendig.

Und nach jeder Änderung durch den Validator jagen, da sieht man sofort, wenn man einen Fehler eingebaut hat. Am praktischsten ist ein kleines Bookmarklet:

javascript:void(location='http://validator.w3.org/check?uri='+escape(location));

In Adresszeile kopieren und Enter. Oder bookmarken (ist ja der Sinn eines »Bookmark«lets) ;)

Jein. Soweit ich das jetzt beurteilen kann, ist padding für mein Vorhaben nicht das richtige Instrument, da meine Fotos unterschiedliche Formate und auch Abmessungen (mit max. 600px Seitenlänge) haben. Oder trotzdem mit padding möglich?

Stimmt, da für padding kein Wert »auto« vorgesehen ist, wird es nichts bringen. Da müsste ein anderer Ansatz her...

Trotz viel Herumüberlegen werd ich es bei meiner Codestruktur (Anzeige der Fotos wird per JS gemacht und das fotoanzeigende "gallery-view-wrapper"-div ist SELBST Teil des JS; ausserdem wird mit mouseover gearbeitet) nicht schaffen, eine Funktion für mouseout einzubauen - dazu kenn ich mich zu wenig aus muss ich gestehen.

Ich verstehe obigen Satz jetzt nicht ganz. Willst Du eine reine CSS-Lösung oder doch wieder auf JavaScript zurückgreifen? JavaScript bietet sicherlich mehr Möglichkeiten.

Wie mit CSS das Bild bei mouseout wieder verschwindet, zeigt ja die Infobox. Dafür müsste Dein Konstrukt aber geändert werden, das ist aber auch wieder ein erstmal ein Haufen Arbeit ;)

»» P.S.: Noch schnell lernen, bevor der Nachwuchs kommt und Deine ganze Aufmerksamkeit benötigt ;)
Mach ich ;-))

Wann ist denn so weit?

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Stimmt, da für padding kein Wert »auto« vorgesehen ist, wird es nichts bringen. Da müsste ein anderer Ansatz her...

Scheint leider so. Trotz intensiver Suche im Netz NICHTS gefunden, dass es einfach oder überhaupt möglich wäre, ein div vertikal zu zentrieren. Die Methode mit 50% und halbem negativen Margin-Wert schneidet das div leider ab wenn das Browserfenster verkleinert wird. Da lass ich´s inzwischen lieber oben.

Wichtiger wäre mir die Zentrierung der Fotos im Div...

Wie mit CSS das Bild bei mouseout wieder verschwindet, zeigt ja die Infobox. Dafür müsste Dein Konstrukt aber geändert werden, das ist aber auch wieder ein erstmal ein Haufen Arbeit ;)

Nicht nur Arbeit - das schaff ich beim besten Willen nicht ;-)

»» »» P.S.: Noch schnell lernen, bevor der Nachwuchs kommt und Deine ganze Aufmerksamkeit benötigt ;)
»» Mach ich ;-))

Wann ist denn so weit?

In ca. 3 Wochen nach Plan ;-)

Noch was:
Sieht das Layout bei euch ok aus? In der Firma hab ich sehr eingeschränkten Internetzugang über IE6 und sah gerade mal die Fußzeile am oberen Viewport-Rand kleben - kann das jemand (hoffentlich nicht) bestätigen ?

Da ja 45% (?) noch IE6 benutzen wär das dann nicht das Gelbe vom Ei ...

LG, Jürgen

[Patrick Andrieu]

Hallo juewi!

Wichtiger wäre mir die Zentrierung der Fotos im Div...

Hier ist ein Ansatz mit CSS-Hacks: http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html.

»» Wann ist denn so weit?
In ca. 3 Wochen nach Plan ;-)

Na dann bleibt Dir nicht mehr viel Zeit... ;)

Sieht das Layout bei euch ok aus? In der Firma hab ich sehr eingeschränkten Internetzugang über IE6 und sah gerade mal die Fußzeile am oberen Viewport-Rand kleben - kann das jemand (hoffentlich nicht) bestätigen ?

Ja, leider... es gibt nur Kopf- und Fussleiste, den Body haben sich Body Snatchers geholt...

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

»» Wichtiger wäre mir die Zentrierung der Fotos im Div...

Hier ist ein Ansatz mit CSS-Hacks: http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html.

Heyyy ... sieht vielversprechend aus, werd ich mal durchackern - vielleicht wird draus die Lösung für meine Foto-Zentrierung.
Die Zentrierung des Seiteninhalts werd ich wohl damit versuchen

»» Sieht das Layout bei euch ok aus? In der Firma hab ich sehr eingeschränkten Internetzugang über IE6 und sah gerade mal die Fußzeile am oberen Viewport-Rand kleben - kann das jemand (hoffentlich nicht) bestätigen ?

Ja, leider... es gibt nur Kopf- und Fussleiste,...

Nach kleinem Herzinfarkt hab ich´s nach etwas Blitzrecherche für´s erste wieder hingebogen. Ich hoffe, ich stolper da von jetzt an nicht von einer Lösung ins nächste Problem. Dann würde es frustrierend ...

Na dann bleibt Dir nicht mehr viel Zeit... ;)

Ich schlaf auch gar nicht mehr - Dann wird die Umstellung nicht so groß wenn der Junge dann da ist ;-)

Viele Grüße aus Frankfurt/Main,
Patrick

Ebenso Grüsse retour aus Graz und danke für Deine sehr nette Unterstützung in dieser meinen schweren Zeit ;-)