Einen Div UNTER einem Absolut positioniertem Div platzieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
blocken
code
dank
display
erreichten standes
ersten beitrag
esse
glauben
header
image
live beispiel
oberen seitenrand
plazieren
position
problem
radius
schieben
url
wesentliche zusammengefasst code
-
Hallo!
Ich habe meinen Content-Div für das Installationsprogramm meines CMS absolut positioniert (jedenfalls den Abstand zum oberen Seitenrand) um meinen Header einwenig zu überlappen, denn wenn man über den Header fährt, soll er sich ein wenig nach oben schieben. (Screenshot)
Das Problem ist nun, dass ich unter dem Content noch einen Footer platzieren will.
Hier ist der CSS-Code des Contents (aufs wesentliche zusammengefasst:
#content { position:absolute; width: 75%; top: 230px; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: white; display: block; margin-left: 10%; margin-right: 10%; padding-left: 2.5%; padding-right: 2.5%; line-height: 150%; padding-top: 20px; padding-bottom: 70px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
Nun möchte ich meinen Footer DARUNTER platzieren. Doch das funktioniert nicht, ebenso wenig wie
.margin-bottom: 20px;
Wie kann ich mein Problem lösen??
Schon einmal danke im Voraus!
MfG. Simon D. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Verstehe ich dich richtig: beim Überfahren von #content soll dieser sich etwas noch oben schieben. Nun soll (mit etwas Abstand?) unten noch ein #footer sein der ebenso wie der #content mit nach oben fährt?
Wie wäre es du machst
so dass der Außenabstand nach oben 20px beträgt.margin-top: 20px;
Soll der footer dagegen fest sein, so kannst du dass ganz einfach mit
position: absolute; bottom: 20px; -
Hallo!
schnookerippsche schrieb:
Verstehe ich dich richtig
Ich glaube du hast mich falsch verstanden.
Ich möchte nicht, dass der Content nach oben verschoben wird, sondern der Header.
Deshalb musste der Content ja auch absolut positioniert werden.
MfG. Simon D. -
Also ich bin mir nicht sicher, ob ich deine "Ausführungen" im ersten Beitrag richtig verstanden habe... vielleicht solltest du mal ein Live-Beispiel deines bisher erreichten Standes hochladen.
Mal grob zusammengeschossen, vielleicht hilft es dir ja..
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { box-sizing: border-box; } body { background-color: #7f0000; } #wrapper { width: 75%; margin: 20px auto; } header { height: 100px; border-top-left-radius: 4px; border-top-right-radius: 4px; width: 80%; padding: 20px; margin: 0 auto; background-color: #ccc; position: relative; } #content { width: 100%; padding: 20px; background-color: #fff; } footer { background-color: #eee; height: 60px; text-align: center; padding: 10px 0; } header:hover { top: -20px; } </style> </head> <body> <div id="wrapper"> <header>Header</header> <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <footer>Footer</footer> </div> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
