Div mir Side-overlay
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
after
basis
boxen
code
einfache sachen
experimentieren
folgende kriterien
glauben
greifen
hintergrundbild
http
jemand
kasten
krimskrams
liegen
problem
safari
schlauch
sinn
url
-
Hi ich verzweifel gerade ein bisschen an folgendem CSS-Konstrukt:
Ich habe ein Div mit einer variablen Höhe (ganzer Kasten).
Beim Überfahren soll der Kasten an der Seite Rechts eingeblendet werden und folgende Kriterien unterstützen:
1) über dem Kontent des ganzen Kastens liegen
2) die gleiche Höhe haben, wie der ganze Kasten
3) transparent sein (das ist an sich kein Problem, aber so kann mans leider nicht so leicht faken wie zB per Hintergrundbild oä.)
________________________________________
|--------------------------------------------|-------------------- |
|--------------------------------------------|-------------------- |
|--------------------------------------------|------- <-- -------- |
|--------------------------------------------|-------------------- |
___________________________|____________ |
Ich stehe gerade leider ziemlich auf dem Schlauch. Falls jemand weiss wie ich das relisiere, wäre ich über Hilfe sehr dankbar!
MFG
Beitrag zuletzt geändert: 11.11.2012 19:25:33 von programtools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Schau Dir doch mal den CSS-Selector .div:hover:after an.
Damit müsstest Du Dein Problem beheben können.
Ein Beispiel wäre:
.div { height: 100px; } .div:hover:after { content: "Hi"; height: 100px; } -
Hi,
vielen Dank, allerdings gibst du die Höhe ja an.
Ich habe im parent-div ja eine variable Höhe und das Div soll rechts über dem Inhalt liegen und die gleiche Höhe (also variable Höhe übernehmen, ähnlich einem 100%) wie das Parent-Div haben.
MFG -
Das wird mit purem CSS - glaube ich - eher schwierig. Verwendest Du bereits irgendwelche Javascript-Frameworks/-Toolkits?
Mit jQuery beispielsweise ließe sich Einiges erreichen. -
Hi, ja ich weiss, ich möchte allerdings die Seite nicht unnötig mit Formatierungs-Scripts überfluten sondern bevorzuge für einfache Sachen wie diese auch einfache (zumindestens einfach gehaltene) Lösungen und da würde ich am liebsten zu css3 und html5 greifen, auch wenn, wie du richtig gesagt hast das mit Jquery recht leicht geht.
Das Problem bei JQuery ist halt (bzw. bei Javascript an sich), dass es eben erst nach dem Laden der Seite angezeigt wird, was das ganze verzögert.
Wenn jemand weiss wie es auf reiner HTML5 / CSS3 Basis geht wäre ich sehr dankbar!
MFG -
http://www.sonok.de/krimskrams/htmlzeugs/untitled-01.html
Ich habe mir gedacht, drei divs zu machen. eines außen herum div.a, zwei drinnen div.b und div.c und alles mit float garniert.
Dann habe ich versucht, das rechte div.c auf die Höhe des "rahmendivs" div.a zu bringen (mit min-height auf 100%).
Mittels Experimentieren hab ich dann alles zusammengewurschtelt und im Safari scheint's zu funktionieren ....
Naja, ich weiß nicht, ob's daß ist, was Du nun genau wolltest ...
edit
Wichtig sind glaub ich vor allem die relativen Positionsangaben und das der eigentliche Text nicht in div.b steht, sondern in div.a - dem Elternelement von div.c.
edit 2
Mit clear usw usf gehen auch mehere Boxen untereinander, hab mal drei gebastelt
Beitrag zuletzt geändert: 12.11.2012 23:09:52 von sonok -
Genau das wars! Sehr gut.
min-height zu benutzen ist mir garnicht in den Sinn gekommen.
Vielen DAnk, Problem gelöst!
Liebe Grüße! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
