[Erledigt] "CSS relative & top" und Platzreservierung

halskrause · 13.10.2010, 17:10

Hi. Wenn ich Elemente aufeinander legen will, mache ich das oftmals dadurch, dass ich dem unterem Element "position: realtive; top:100px" zuweise.
Gezwungenermassen muss ich um beide Elems noch in Div mit der Eigenschaft "overflow: hidden" bauen, damit ich den freinen Raum weiter nutzen kann.

Kennt jemand eine bessere Methode hierfür?

ChrisB · 13.10.2010, 17:56

Negatives margin-top.

nikosch · 13.10.2010, 21:23

War gestern auch erstaunt, damit kann selbst der IE6 schon umgehen. Jedenfalls bei margin-top.

halskrause · 14.10.2010, 12:39

Dannke für den Hilfe. Die Lösung ist gut, benötigt aber bei dynamischen Dimensionen JavaScript.
Man müsste halt abwägen, was besser ist: "overflow: hidden" oder "javascript"...

WishuKaiser · 14.10.2010, 12:41

Was genau willst du eigentlich machen? Irgendwie wird das Ganze gerade nicht so wirklich ersichtlich für mich. Vielleicht gibt es ja ein einfachere Methode für dein Problem.

Gruß
Wishu

halskrause · 14.10.2010, 13:08

Hier ein MarkUp Beispiel.

PHP-Code:

  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div style="width: 400px; height: 150px; background-color: #666;"></div>
<div style="width: 400px; height: 50px; background-color: #ccc;  position: relative; top: -55px;"></div>
<div style="background-color: red; width: 400px; height: 50px; "></div>
</body>
</html>

WishuKaiser · 14.10.2010, 13:11

Dann verstehe ich dein Problem nicht. Warum brauchst du bei margin-top JavaScript und bei top nicht? Margin-top ist auf jeden Fall die sinnvollere Methode.

EDIT: Du könntest es aber auch so machen, dass du der äußeren Box ein position:relative; gibst und der Box die überlagern soll ein positio:absolute; und dann bottom:0;
Natürlich muss die überlagernde Box dann in der relativ positionierten Box sein.

Gruß
Wishu

ChrisB · 14.10.2010, 16:33

Zitat:

Zitat von halskrause

Dannke für den Hilfe. Die Lösung ist gut, benötigt aber bei dynamischen Dimensionen JavaScript.

Wie WishuKaiser schon sagte, das wäre doch bei deinem bisherigen Ansatz mit position das gleiche ...?

Und dein „MarkUp Beispiel“ ist ziemlich für die Katz. Beschreibe bitte möglichst konkret, was du erreichen willst - dann müssen wir nicht raten bzw. das durch ständige Rückfragen erst klären.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
relative und z-index	halskrause	HTML, Usability und Barrierefreiheit	8	05.03.2010 21:58
[Erledigt] relative include Anweisung	fulltilt	PHP Tipps 2010	9	05.02.2010 12:59
relative Pfade von Grafiken bei modrewrite	jjkkll	HTML, Usability und Barrierefreiheit	1	03.12.2009 16:43
[Erledigt] relative ordnerangabe: "der gleiche ordner" ?	Moe LaRoqua	PHP Tipps 2009	2	27.10.2009 14:52
[Erledigt] Autoscrolling im DIV (an Relative Position)	#EFEFEF	JavaScript, Ajax und mehr	21	28.01.2009 18:39
Relative Pfadangaben in includierten Dateien	iBurner	PHP-Fortgeschrittene	13	15.08.2008 13:18
relative Tabellengröße	cycap	HTML, Usability und Barrierefreiheit	11	11.05.2005 11:20
Layout mit CSS-P - absolute, relative???	Greezoo	HTML, Usability und Barrierefreiheit	5	08.05.2005 23:39
Relative Pfade aus MySQL-DB ersetzten?		PHP Tipps 2007	4	02.01.2005 16:36
relative Links automatisch umändern	Blank	PHP Tipps 2004-2	8	30.12.2004 11:37
Position relative oder absolute	Stümper	HTML, Usability und Barrierefreiheit	3	12.09.2004 11:56

13.10.2010, 17:10
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	[Erledigt] "CSS relative & top" und Platzreservierung Hi. Wenn ich Elemente aufeinander legen will, mache ich das oftmals dadurch, dass ich dem unterem Element "position: realtive; top:100px" zuweise. Gezwungenermassen muss ich um beide Elems noch in Div mit der Eigenschaft "overflow: hidden" bauen, damit ich den freinen Raum weiter nutzen kann. Kennt jemand eine bessere Methode hierfür?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.10.2010, 17:56
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Negatives margin-top. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

13.10.2010, 21:23
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	War gestern auch erstaunt, damit kann selbst der IE6 schon umgehen. Jedenfalls bei margin-top. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (13.10.2010 um 21:43 Uhr).

14.10.2010, 12:39
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Dannke für den Hilfe. Die Lösung ist gut, benötigt aber bei dynamischen Dimensionen JavaScript. Man müsste halt abwägen, was besser ist: "overflow: hidden" oder "javascript"...

14.10.2010, 12:41
WishuKaiser Neuer Benutzer Registriert seit: 14.10.2010 Beiträge: 25 PHP-Kenntnisse: Fortgeschritten	Was genau willst du eigentlich machen? Irgendwie wird das Ganze gerade nicht so wirklich ersichtlich für mich. Vielleicht gibt es ja ein einfachere Methode für dein Problem. Gruß Wishu __________________ Der komplette Text den Sie vor dieser Zeile lesen, ist per Zufall generiert worden und muss nicht zwingend Sinn ergeben. Wishu.design \| WishuLoad - The Dark Imagehosting \| Wishu-Blog

14.10.2010, 13:08
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Hier ein MarkUp Beispiel. PHP-Code: `<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head> <body> <div style="width: 400px; height: 150px; background-color: #666;"></div> <div style="width: 400px; height: 50px; background-color: #ccc; position: relative; top: -55px;"></div> <div style="background-color: red; width: 400px; height: 50px; "></div> </body> </html>`

14.10.2010, 13:11
WishuKaiser Neuer Benutzer Registriert seit: 14.10.2010 Beiträge: 25 PHP-Kenntnisse: Fortgeschritten	Dann verstehe ich dein Problem nicht. Warum brauchst du bei margin-top JavaScript und bei top nicht? Margin-top ist auf jeden Fall die sinnvollere Methode. EDIT: Du könntest es aber auch so machen, dass du der äußeren Box ein position:relative; gibst und der Box die überlagern soll ein positio:absolute; und dann bottom:0; Natürlich muss die überlagernde Box dann in der relativ positionierten Box sein. Gruß Wishu __________________ Der komplette Text den Sie vor dieser Zeile lesen, ist per Zufall generiert worden und muss nicht zwingend Sinn ergeben. Wishu.design \| WishuLoad - The Dark Imagehosting \| Wishu-Blog