position: unknown ?

[Angy]

Hallo, liebe Gemeinde,

angenommen, man hat an der Seite ein Menü und möchte beim Hovern über die Optionen in der Mitte des Contents etwas einblenden, dann ist das ja kein Problem:
1. display:none für das Einzublendende
2. display:block, position:absolute und die entsprechenden Maße beim Hovern.

_Wenn_ man die Maße des Menüs und des Content-Bereiches kennt.

Was aber, wenn man ein "liquid design" hat, bei dem mit Vergrößern des Fensters der linke und rechte Rand sowie der Content-Bereich in der Mitte größer werden? Ich werd dann wohl kaum vernünftige Werte für left und width finden können. Außerdem müsste ich die Höhe des Content-Bereiches auf einen (Mindest-) Wert festlegen, da der eingeblendete Inhalt ja nicht zur Box des Contents gehört und die Höhe daher nicht beeinflusst.

Ich hoffe, ich habe mich verständlich ausgedrückt und finde jemanden, der mir einen Tipp geben kann.

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Angy

[Joachim]

Hi,

2. display:block, position:absolute und die entsprechenden Maße

das macht doch keinen Sinn. display:block dient zur Anzeige als Blockelement _innerhalb_ des Elementenflusses, mit position:absolute wird das Element aus eben diesem Fluss herausgenommen. Bei absoluten Positionen ist imho visibility geeigneter.

Wenn Dein Layout flexible sein soll baue halt eine entsprechende Html-Struktur und blende nicht benoetigte Elemente mit display:none aus. Mit display:block werden sie _innerhalb_ der Struktur wieder (als Blockelemente) eingeblendet. Positionskorrekturen kannst Du dann mir margin vornehmen.

Wenn Du unbedingt absolut positionieren, gleichzeitig aber ein flexibles Layout beruecksichtigen musst, kannst Du ggf. Javascript zur Positionierung zur Hilfe nehmen.

Gruesse, Joachim

[Angy]

Hallo, liebe Gemeinde, hi, Joachim,

das macht doch keinen Sinn...

irgendwie muss ich das display:none ja aufheben

Wenn Dein Layout flexible sein soll baue halt eine entsprechende Html-Struktur und blende nicht benoetigte Elemente mit display:none aus. Mit display:block werden sie _innerhalb_ der Struktur wieder (als Blockelemente) eingeblendet.

Funktioniert nur, wenn die ein/auszublendenden Elemente in derselben Box liegen, wie die, über die gehovered wird.

Wenn Du unbedingt absolut positionieren, gleichzeitig aber ein flexibles Layout beruecksichtigen musst, kannst Du ggf. Javascript zur Positionierung zur Hilfe nehmen.

Genau _das_ wollte ich ja vermeiden. Ich könnte meine eigene Seite ja nicht besuchen :) - so ganz ohne JS aktiviert.

Trotzdem: danke.

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Angy

[Ingo Turski]

Hi,

Ich hoffe, ich habe mich verständlich ausgedrückt und finde jemanden, der mir einen Tipp geben kann.

nö. Wo willst Du das Element denn positionieren?
Für ein flexibles Layout reicht es oft, dem Elternelement position:relative zuzuweisen, so da´ß sich die folgende absolute Positionierung an diesem orientiert.

freundliche Grüße
Ingo

[Angy]

Hallo, liebe Gemeinde, hi, Ingo

nö. Wo willst Du das Element denn positionieren?

Beispiel: 3-Spalten-Layout, links oder rechts das Menü, in der Mitte "content" der variablen Art - nennen wir sie mal #left, #center und #right. Beim Vergößern des Fensters wird der Content in #center vergrößert (und der Rand links von #left und rechts von #right ebenfalls). Im Content soll beim Hovern was eingeblendet werden.

Wenn ich auf das Zentrieren innerhalb von #center meinetwegen noch verzichte - wieviel Platz ich da habe, weiß ich aber nicht. Ich kann das Einzublendende nicht als child von #center formulieren, weil das Hovern ja in #left erfolgt.

You know?

Grüße aus dem schönen Angermund, das Du ja bestimmt kennst

Angy

[Orlando]

Hallo Angy,

wieviel Platz ich da habe, weiß ich aber nicht. Ich kann das Einzublendende nicht als child von #center formulieren, weil das Hovern ja in #left erfolgt.

Abgesehen von CSS3 Media Queries hast du mit CSS alleine keine Chance. Das einzublendende Element darf eben nicht sehr groß ausfallen. Zentrieren kannst du es gemäß Beispiel.

Grüße
 Roland

[Angy]

Hallo, liebe Gemeinde, hi, Roland,

irgendwie kann ich mich heute nicht richtig ausdrücken :(

1. die Größe des Viewports ist mir wurscht, weil mein Problem einfach ist, dass ich in der 1. Spalte hover und in der 2. was einblenden will

2. zum Zentrieren nach Deinem Beispiel müsste ich die Maße der mittleren  Spalte kennen, bzw. bei einer prozentualen Formulierung bezieht sich die Größe auf eine "fremde" Box.

Ich weiß echt nicht, wie ich das besser beschreiben soll.

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Angy

[Orlando]

Hallo Angy,

1. die Größe des Viewports ist mir wurscht, weil mein Problem einfach ist, dass ich in der 1. Spalte hover und in der 2. was einblenden will

Zentriert bleibt zentriert. Es ist egal, wie breit die mittlere Spalte ist, solange diese selbst zentriert wird und die linke und die rechte Spalte gleich breit sind. Ist das der Fall?

2. zum Zentrieren nach Deinem Beispiel müsste ich die Maße der mittleren  Spalte kennen,

Nein. Absolute Positionierung kümmert sich (im Regelfall) nicht um andere Elemente (da diese meist nicht explizit positioniert wurden). Wenn du eine relative Positionierung wünschst, muss es sich um ein Nachfahrenelement handeln. Geschwisterliebe zählt im CSS-Kontext nicht. ;-)

bzw. bei einer prozentualen Formulierung bezieht sich die Größe auf eine "fremde" Box.

Ja, in deinem Fall auf die linke Spalte.

Ich weiß echt nicht, wie ich das besser beschreiben soll.

Mit einer Beispielseite?

Grüße
 Roland

[Angy]

Hi, Roland,

ich gebs auf, ich kann mich heute nicht verständlich machen :(

Zentriert bleibt zentriert...Ist das der Fall?

Nö - völlig egal, wie breit ich die _festen_ Spalten #left und #right am Ende mache, irgendwo gibt es die mittlere Spalte #center, die mal mehr, mal weniger breit ist und in die der Content eingeblendet werden soll. Ob zentriert oder nicht (so richtig), definiert wird der Content ja etwa so: #center #eingeblendeterContent {position..... }

Der Button, über den gehovert wird, steht aber links bzw. rechts, also etwa so: #left #button a:hover {...}

Geschwisterliebe zählt im CSS-Kontext nicht. ;-)

Das ist ja wahrscheinlich mein Problen :(

Mit einer Beispielseite?

Meine Baustelle ist schräger, als es skop.net/baustelle jemals war, und ich müsste mittlerweile -zig Baustellendateien hochladen, damit es überhaupt funktioniert.

In der Hoffnung auf eine Eingebung meine Lieblings-Ösis verbleibe ich mit
Grüßen aus dem schönen Angermund, das leider keine Sau kennt

Angy

[Ingo Turski]

Hi,

1. die Größe des Viewports ist mir wurscht, weil mein Problem einfach ist, dass ich in der 1. Spalte hover und in der 2. was einblenden will

wo siehst Du da ein Problem?
Du weißt, wie breit die linke Box ist? Dann ist die mittlere Box exakt so weit daneben.

freundliche Grüße
Ingo

[Angy]

Hallo, liebe Gemeinde, hi, Ingo,

Du weißt, wie breit die linke Box ist? Dann ist die mittlere Box exakt so weit daneben.

Richtig, aber ich weiß ja nie, wie breit sie ist. Daher kann eine feste Breite für den einzublendenden Inhalt entweder in der Ecke kleben oder über den rechten Rand gehen, je nach Fensterbreite, und in Prozent der Breite der mittleren Box kann ich es nicht ausdrücken, weil ich kein Kind dieser Box bin.

Wenn Dich das wirklich interessiert: Ich habe heute nacht meine Baustelle ins Netz gestellt. Das ist keine fertige Seite, sondern eine Ansammlung von Experimenten. Das eine oder andere wird Dir bekannt vorkommen ;)

Guggst Du: http://www.visintainer.de/v4/

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Angy

[Ingo Turski]

Hi,

Richtig, aber ich weiß ja nie, wie breit sie ist.

Du könntest es aber wissen, wenn Du alle Breitenangaben in % hättest.
Ansonsten hättest Du noch die Option, eine einigermaßen passende Breite anzugeben und diese über Javascript nachzujustiern.

kann ich es nicht ausdrücken, weil ich kein Kind dieser Box bin.

Theoretisch könntest Du die Box über right:200px wie gewünscht aufspannen, wenn Du für dieses li position:static definierst, praktisch scheitert dies aber leider an den Browsern.

freundliche Grüße
Ingo