Halb relative, halb absolute positionierung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
code
container
einpacken
element
fertig position
folgenden code
hintergrund
nutz
oberen bildrand
passenden code
position
tag
unteren bildrand
versuch
zauber
-
Ich habe für meine Homepage diesen div tag/container">container:
<div style="position: absolute; top: 480px; left: 115px; width: 1024px; text-align: center;"> Hello!!! </div>
Dieser ist ja leider absolut positioniert.
Wie kann ich das machen, dass es vom oberen Bildrand den Abstand 480px hat und insgesamt zentriert angezeigt wird? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
syberpsace schrieb:
einfach das ganze in einen center-tag einpacken und dannposition:relative; top:480px;
mfg
Das ganze div verschiebt es mir dann leider an den unteren Bildrand! -
maechte-der-elemente schrieb:
Ich habe für meine Homepage diesen div container:
<div style="position: absolute; top: 480px; left: 115px; width: 1024px; text-align: center;"> Hello!!! </div>
Dieser ist ja leider absolut positioniert.
Wie kann ich das machen, dass es vom oberen Bildrand den Abstand 480px hat und insgesamt zentriert angezeigt wird?
Ganz einfach:
<div style="position: absolute; margin: 480px 0 0 -512px; left: 50%; width: 1024px; text-align: center;"> Hello!!! </div> -
dann ist es aber leider nicht zentriert
versuchs mal mit nem zweitem div innerhalb des ersten ich bin mir aber nicht sicher ob es funktioniert.
MfG
karlsve -
Um einen Container zu zentrieren nutze folgenden Code
html:
<html> <body> <div class="content"></div> </body> </html>
CSS:
html,body { width:100%; height:100%; margin:0px; padding:0px; } div.content { position:absolute; top:50%; left:50%; width:600px; height:480px; background:#CCCCCC; margin:-240px 0px 0px -300px; }
fertig :)
position:absolute; setzt den container 50% nach links und nach rechts, relativ zum body. Deswegen muss
html UND body 100% sein und am bessten ohne paddingbzw margin.
mit margin:-240 0px 0px -300px; sehtzen wir den Container nochmal um die hälfte seiner größe
zurück.
Das war schon der ganze Zauber. Leider verschwindet der Container dann im Hintergrund, aber falls dich
das störthät ich nochn ne lösung.
-
karlsve schrieb:
dann ist es aber leider nicht zentriert
versuchs mal mit nem zweitem div innerhalb des ersten ich bin mir aber nicht sicher ob es funktioniert.
MfG
karlsve
Natürlich ist es mit meinem Code zentriert. Wenn du kein CSS lesen kannst, kann ich doch nichts dafür. -
evil-devil schrieb:
karlsve schrieb:
dann ist es aber leider nicht zentriert
versuchs mal mit nem zweitem div innerhalb des ersten ich bin mir aber nicht sicher ob es funktioniert.
MfG
karlsve
Natürlich ist es mit meinem Code zentriert. Wenn du kein CSS lesen kannst, kann ich doch nichts dafür.
so wie ich das seh fehlt in deinem Code die Höhenangabe weil margin:480px ... kann nie zentriert sein. -
Wenn du dir den EIngangspost anschaust, siehst du das jenes absolut positioniertes Element mit "top 480" gekennzeichnet ist. Ich habe lediglich den Eingangspost entsprechend den dazu passenden Code aufgeschrieben. Das Element ist nach oben hin nicht zentriert, das stimmt, aber nach links und rechts ist es das.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
