DIV Breite an Position eines anderen DIV ausrichten

mentalman · 12.05.2011, 12:55

Hallo,

bevor ich es umständlich beschreibe, hier eine kleine Grafik:

Das gelbe Div ist auf margin: auto; gesetzt, also immer mittig im Browserfenster. In diesem gelbe Div ist das rote Div enthalten, welches seine Position entsprechend mit verändert.

Das Gruene DIV soll nun immer so breit sein, dass es bis zu rechten Kante des roten Div reicht.

Kurze Erklärung, was ich vorhabe:
Die Seite wird ein Hintergrgrundbild bekommen, welches das komplette Browserfenster ausfüllt. Links das grüne Div wird eine halbtransparente Fläche, die über diesem Hintergrundbild liegt.
Das rote Div ist das Menü. Die Menüeinträge sind in weisser Schrift gehalten und liegen wiederum über dem grünen Div, damit man sie, egal welches Hintergrundbild gerade aktuell ist, gut lesen kann.

Ich hoffe, das hilft euch!

Ist das mit reinem CSS und HTML hinzubekommen, oder muss ich das per JS berechnen lassen?

Oder könnte man es noch ganz anders lösen?

nikosch · 12.05.2011, 14:22

Zitat:

Ist das mit reinem CSS und HTML hinzubekommen

ME nicht.

ChrisB · 12.05.2011, 15:03

Zitat:

Zitat von mentalman

Ist das mit reinem CSS und HTML hinzubekommen

Kommt in erster Linie drauf an, ob die Breiten fest/prozentual sind, oder sich dynamisch aus den Inhalten ergeben.

mentalman · 12.05.2011, 15:28

Zitat:

Zitat von ChrisB

Kommt in erster Linie drauf an, ob die Breiten fest/prozentual sind, oder sich dynamisch aus den Inhalten ergeben.

das rote und das gelbe div haben feste breiten, das grüne wäre dann dynamisch. dessen breite würde sich aus der position des roten div ergeben!

ChrisB · 12.05.2011, 16:30

Wenn du das Grüne nur brauchst, um irgendwas mit einer transparenten Fläche zu überlagern, dann würde ich folgendes vorschlagen:

Absolut Positionieren von links oben, Breite 50% (des Viewports), und über ein negatives margin-left ein Stück nach links aus dem sichtbaren Bereich „heraus ziehen“:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, p { margin:0; padding:0; }
#content { width:600px; margin:auto; background:yellow; }
#menue { width:120px; float:left; background:red; margin:0 .5em 0 0; }
#menue span { display:block; }
#overlay { position:absolute; top:0; left:0; width:50%; height:500px; z-index:-1; margin:0 0 0 -180px;
background:green; }
</style>
</head>
<body>
<div id="content">
<div id="menue">
<span>Menülink #1</span><span>Menülink #zwei</span><span>Menülink #3</span>
</div>
<p>Lorem ipsum <em>emphasised text</em> dolor sit amet, <strong>strong text</strong> consectetur adipisicing elit,
<abbr title="">abbreviated text</abbr> sed do eiusmod tempor <acronym title="">acronym text</acronym> incididunt
ut labore et dolore magna aliqua. Ut <q>quoted text</q> enim ad minim veniam, quis nostrud exercitation
<a href="/">link text</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
<del>deleted text</del> <ins>inserted text</ins> irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat <code>code text</code> cupidatat non proident, sunt 
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="overlay"></div>
</body>
</html>

Der Wert für das negative margin-left beträgt (Breite von Gelb) / 2 - (Breite von Rot); in diesem Beispiel also 600px/2-120px = 180px.

Das funktioniert so lange, wie der Viewport nicht schmaler wird, als der gelbe Bereich - dann fängt das grüne an, sich weiter nach links zu schieben, als beabsichtigt. Ob man das auch noch irgendwie abfangen will/muss/kann - selber überlegen bitte.

nikosch · 12.05.2011, 20:32

Das Problem ist die Anforderung

Zitat:

Das Gruene DIV soll nun immer so breit sein, dass es bis zu rechten Kante des roten Div reicht.

, da grün und gelb nunmal nichts miteinander zu tun haben.

ChrisB · 12.05.2011, 20:47

Wenn das wirklich nur eine teil-transparente „Fläche“* bilden soll, sehe ich da kein Problem.

* einfarbig, rgba-Wert oder transparentes PNG als background. Wenn's einen Hintergrund bekommen soll, der mehr „Info“ transportiert, als nur eine einfarbige Fläche zu sein, kann man den ggf. immer noch rechtsbündig im Element ausrichten.

mentalman · 12.05.2011, 23:40

Zitat:

Zitat von ChrisB

Das funktioniert so lange, wie der Viewport nicht schmaler wird, als der gelbe Bereich - dann fängt das grüne an, sich weiter nach links zu schieben, als beabsichtigt. Ob man das auch noch irgendwie abfangen will/muss/kann - selber überlegen bitte.

und genau sowas soll nicht passieren! aber trotzdem danke für deinen input. hab es jetzt ganz anders gelöst (also auch das layout), sodass ich ohne js auskomme.

Zitat:

Zitat von nikosch

Das Problem ist die Anforderung , da grün und gelb nunmal nichts miteinander zu tun haben.

korrekt! und nur durch js miteinander in verbindung bringbar, was zu vermeiden gilt. jedenfalls bei solchen optischen spielereien.

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
variablen/functionen auf einer anderen seite aufrufen	superfutzi	PHP Tipps 2008	2	26.12.2008 16:06
PHP: move_uploaded_file: auf anderen Hosting-Space?	SvenLittkowski	PHP Tipps 2008	13	06.11.2008 07:16
CSS: Style ohne position?	SilentSight	HTML, Usability und Barrierefreiheit	5	25.07.2008 16:12
[Erledigt] div ausrichten ohne offset	Mikay Kun	HTML, Usability und Barrierefreiheit	5	16.07.2008 08:09
Mit AJAX auf einen anderen Server zugreifen!!	Klaus	HTML, Usability und Barrierefreiheit	2	28.01.2007 14:27
Session von einem Server an den anderen übergeben.	axelnes	PHP-Fortgeschrittene	3	18.09.2006 15:07
Client IP bei include über anderen Server		PHP Tipps 2006	5	14.03.2006 14:55
Grundsatz: includes vom anderen Server		PHP-Fortgeschrittene	6	09.03.2006 11:56
Dateiupload auf anderen Server!		PHP Tipps 2006	7	28.02.2006 11:20
Anderen Link im gleichen Fenster öffnen	Daskaras	PHP Tipps 2005-2	2	16.08.2005 11:36
frame in einem anderen frame	nie	PHP Tipps 2005-2	9	01.08.2005 13:43
Wert einer Variable in einer anderen Funtion übernehmen	seven-12	PHP Tipps 2005-2	7	14.06.2005 00:36
Slideshow mit Bildern vom anderen Server geht nicht! :-(		PHP Tipps 2005	7	08.05.2005 18:18
Datei auf einen anderen Server laden	Borlox	PHP Tipps 2005	3	25.04.2005 20:12
Position relative oder absolute	Stümper	HTML, Usability und Barrierefreiheit	3	12.09.2004 11:56

12.05.2011, 12:55
mentalman Erfahrener Benutzer Registriert seit: 07.07.2010 Beiträge: 231 PHP-Kenntnisse: Anfänger	DIV Breite an Position eines anderen DIV ausrichten Hallo, bevor ich es umständlich beschreibe, hier eine kleine Grafik: Das gelbe Div ist auf margin: auto; gesetzt, also immer mittig im Browserfenster. In diesem gelbe Div ist das rote Div enthalten, welches seine Position entsprechend mit verändert. Das Gruene DIV soll nun immer so breit sein, dass es bis zu rechten Kante des roten Div reicht. Kurze Erklärung, was ich vorhabe: Die Seite wird ein Hintergrgrundbild bekommen, welches das komplette Browserfenster ausfüllt. Links das grüne Div wird eine halbtransparente Fläche, die über diesem Hintergrundbild liegt. Das rote Div ist das Menü. Die Menüeinträge sind in weisser Schrift gehalten und liegen wiederum über dem grünen Div, damit man sie, egal welches Hintergrundbild gerade aktuell ist, gut lesen kann. Ich hoffe, das hilft euch! Ist das mit reinem CSS und HTML hinzubekommen, oder muss ich das per JS berechnen lassen? Oder könnte man es noch ganz anders lösen?


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

12.05.2011, 20:47
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Wenn das wirklich nur eine teil-transparente „Fläche“* bilden soll, sehe ich da kein Problem. * einfarbig, rgba-Wert oder transparentes PNG als background. Wenn's einen Hintergrund bekommen soll, der mehr „Info“ transportiert, als nur eine einfarbige Fläche zu sein, kann man den ggf. immer noch rechtsbündig im Element ausrichten. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?