Neo van Matix Geschrieben 25. März 2007 Teilen Geschrieben 25. März 2007 Hallo, ich sitz seit heute Mittag um 14:00 an einem Problem, und weiß nun keinen Ausweg mehr... und ja, ich weiß, dass wir 23:15 haben *g* Ich hab einen Layer auf einer Seite - 760 pixel Breit, zentriert - mein "Content"; also eine weiße Spalte auf grauem Hintergrund. An diese Spalte möchte ich auf der linken Seite einen weiteren Layer (Sidebar) "andocken" - 10 px entfernt. Mein Problem: Mit position:absolute (was wirklich genau das wäre, was ich suche) kann ich nicht arbeiten. Absolute orientiert sich an dem Elternelement, welches ebenfalls per absolute positioniert wurde. Ist keins vorhanden, orientiert sich's am Body-Element. Da ich nichts mit Absolute positioniert hab, müsste ich mich am Body-element orientieren - und das klappt nicht wirklich, da ich keine fixen Angaben bei unterschiedlichen Anzeige-Auflösungen machen möchte / kann. Mit position:relative und Float lässt sich ebenso wenig arbeiten. Grund: Ich pack diese Sidebar in meine Spalte - postition:relative; float:left;. Soweit alles klar - die Sidebar wird IN der Spalte angezeigt und umflossen. Wenn ich Sie nun per left: xyz px; verschieb, wird die Sidebar zwar verschoben, dennoch wird der Ursprungsort weiterhin vom umliegenden Text umflossen - sodass die Bar zwar an dem richtigen Fleck ist, aber mein Layout (bzw. der text) total verzerrt. Meine Frage: Wie positionier ich ein Element neben einem anderen, welches zentriert ist - so, dass es auch auf allen Auflösungen gleich aussieht ? Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Der Kleine Geschrieben 26. März 2007 Teilen Geschrieben 26. März 2007 Wenn ich dich richtig verstanden habe (manchmal ist ein Screenshot oder ein Link extrem hilfreich), benötigst du ein Div mit der fixen Breite mittig ausgerichtet. Innerhalb dieses divs wirst du einerseits fix ein div für die linke Sidebar packen und 10px entfernt deinen nächsten div, der dann dort mittig ausgerichtet ist. Da das Umschlossene div eine fixe Breite besitzt, kannst du bei den beiden divs innerhalb mit fixen Werten hantieren. Allerdings liegt die Berechnung der Angaben bei dir. Habe ich dich richtig verstanden? Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
forTeesSake Geschrieben 26. März 2007 Teilen Geschrieben 26. März 2007 So in der Richtung? <html> <head> <title>Untitled</title> <style> html, body{ font-face: Arial; font-size: 12px; } #page{ text-align: center; margin: auto; } #containerContent{ width: 760px; position: relative; text-align: left; margin:auto; } #content{ width: 100%; height: 400px; position: absolute; background-color: #cdcdcd; } #sidebar{ height: 400px; position: absolute; width: 80px; left: -90px; background-color: #efefef; } </style> </head> <body> <div id="page"> <div id="containerContent"> <div id="content">hier der Content</div> <div id="sidebar">Hier die Sidebar</div> </div> </div> </body> </html> Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Neo van Matix Geschrieben 26. März 2007 Autor Teilen Geschrieben 26. März 2007 So in der Richtung? <html> <head> <title>Untitled</title> <style> html, body{ font-face: Arial; font-size: 12px; } #page{ text-align: center; margin: auto; } #containerContent{ width: 760px; position: relative; text-align: left; margin:auto; } #content{ width: 100%; height: 400px; position: absolute; background-color: #cdcdcd; } #sidebar{ height: 400px; position: absolute; width: 80px; left: -90px; background-color: #efefef; } </style> </head> <body> <div id="page"> <div id="containerContent"> <div id="content">hier der Content</div> <div id="sidebar">Hier die Sidebar</div> </div> </div> </body> </html> Ähm, ja aber... oO Ich werds heut Abend mal übernehmen. Kann doch nich so schwer sein... Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
master01 Geschrieben 26. März 2007 Teilen Geschrieben 26. März 2007 Hi Neo, du willst doch bestimmt das sich deine "sidebar" und dein "Content" in deinem "containerContent" zentrieren, oder? Dann solltest du zuerst darauf achten, dass die Breite von "sidebar" und "Content" nicht größer ist als die Breite vom "containerContent". Derzeit hat dein "containerContent" eine Breite von 760px und dein "Content" eine Breite von 100%, was wiederum 760px entspricht. Neben dem "Content" soll im "containerContent" ja auch noch die "sidebar" mit 80px platz finden. Endweder du gibst deinem "Content" nur ca 90% oder 680px, wobei du von den Werten jeweis noch den Abstand zwischen den beiden Div's abziehen musst. Lange rede kurzer Sinn. Hier einfach mal der CSS-Code. #containerContent{ width: 760px; height: 400px; position: relative; text-align: left; margin:auto; } #content{ width: 670px; height: 400px; position: absolute; left: 90px; background-color: #cdcdcd; } #sidebar{ height: 400px; position: absolute; width: 80px; left: 0px; background-color: #efefef; } Hoffe du kannst damit etwas anfangen. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.