DIV´s verschieben sich ineinander - Problem

25.03.2005, 13:27

Hi!

Wiedermal ein DIV-Problem. Und zwar möchte ich einen "header-div" haben in dem links und rechts ein anderer DIV mit jeweils einer Grafik angezeigt werden soll.
Wenn der Browser nun zusammengeschoben wird soll die rechte Grafik nach links wandern - aber nur solange bis die linke Grarfik "im weg" ist und dann soll unten der Scrollbalken erscheinen.
Vom Grundprinzip hört es sich ja recht einfach an ... mein Problem ist aber, dass sich die rechte GRafik unter die Linke schiebt ...

habe mit der float-eigenschaft gearbeitet.

hier mal der Quellcode der index:

Code:

<body>

<div class="container_oben">

<div class="container_links_oben">
</div>

<div class="container_rechts_oben">
</div>

</div>

</body>

und hier der Code der styles:

Code:

div.container_oben {
	clear: left;
	position: absolute;
         z-index:1;
         background-color: #0089D1;
         margin: 0px;
         padding: 0px;
         left: 0px;
         top: 0px;
         width: 100%;
         height: 150px;
         overflow: no;
}

div.container_links_oben {
	position: absolute;
         z-index:2;
         margin: 0px;
         padding: 0px;
         left: 0px;
         top: 0px;
         width: 400px;
         height: 150px;
         background-image: url(images/banner_links.jpg);
         background-repeat: no-repeat;
         overflow: no;
}

div.container_rechts_oben {
	float: right;
         z-index:2;
         margin: 0px;
         padding: 0px;
         left: 400px;
         top: 0px;
         width: 350px;
         height: 150px;
         background-image: url(images/banner_rechts.jpg);
         background-repeat: no-repeat;
         overflow: no;
}

so: und nun noch der Link zu der Aktuellen Version zum veranschaulichen meines Problems:

http://www.elementebau-stollenwerk.d...urst/index.php

wer eine Idee hat - ich wäre sehr dankbar, wenn er sie mit mir teilen würde

MFG
Holger

25.03.2005, 13:38

Ich denke mal, es könnte daran liegen, dass Du dem Container_oben "width:100%" mit auf den Weg gegeben hast, da passt er sich automatisch an die Fensterbreite an, egal wie viel das sein mag

25.03.2005, 13:44

ja, das soll er ja auch machen - wenn ich aber dann den Browser kleiner mache wird der container_oben ja auch kleiner ...
und das Bild von links bleibt stehen und das rechte richtet sich rechts in dem obereren DIV aus ... es wandert dann mit nach links - nur wandert es viel zu weit. nämlich komplett unter das linke bild ... soll aber nur "dagegen" wandern...

25.03.2005, 13:50

Wie schon gesagt, bei 100% Breite nimmt der keine Rücksicht, ob sich da Inhalt befindet oder nicht. Ich habe es bei mir so realisiert, dass ich eine feste Breite habe (760px), damit das auch bei niedrigeren Bildschirmauflösungen noch gut aussieht. Der Rest wird mit Hintergrundfarbe gefüllt.

25.03.2005, 14:01

er SOLL sich aber ja anpassen

hast du dir mal das beispiel angesehen? es soll so sein wie er es macht - das rechte bild soll nur nicht SO weit mit scrollen ... soll eben vor dem linken Bild wieder anhalten ...

25.03.2005, 14:09

Na sicher habe ich mir das Beispiel angesehen, aber wenn Du ihm nicht genau sagst, wie breit Du den Container haben möchtest, dann ist er bei 100% und 200px Fensterbreite auch nur 200px breit! Und bei 1024 eben 1024! Wenn Du also ne bestimmte Breite nicht unterschreiten möchtest, könntest Du auch noch mit min-width arbeiten, wird aber z. B. vom IE gar nicht unterstützt.

Guckst Du http://css4you.de/min-width.html

25.03.2005, 15:52

Zitat:

z-index:2;

Hmm, div.container_rechts_oben sollte bestimmt z-index:3 sein oder ?

26.03.2005, 09:28

Eine Lösung ist mir da noch eingefallen:

Verzichte auf die DIVs cntainer_rechts_oben und container_links_oben und pack die Bilder in eine Tabelle mit einer Zeile und drei Spalten. Da kanst Du für die beiden Zellen mit den Bildern feste Größen vorgeben und die in der MItte setzt Du auf "auto". Das sollte Dein Problem lösen.

28.03.2005, 14:13

jo - das mit den Tabellen hatte ich mir auch überlegt ... und es jetzt auch so relaisiert ... dachte mir zwar, dass es irgendwie doch so´ne Möglichkeit geben sollte mit DIV´s aber scheint nicht so ....

mfg + thx

HoLgAy

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
nested set dbmodell subtrees verschieben	raffnix	Datenbanken	12	08.06.2008 13:27
Timestamp problem	phrain	PHP Tipps 2008	2	04.04.2008 09:41
Problem mit CAPTCHA	patEwing	PHP Tipps 2008	0	11.02.2008 21:57
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
[Erledigt] nach oben &amp;amp;&amp;amp; nach unten verschieben realisieren		PHP-Fortgeschrittene	8	26.01.2005 22:22
[Erledigt] Problem bei Massenmails versenden mit der Funktion mail		PHP-Fortgeschrittene	3	19.01.2005 13:36
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
[Erledigt] PHP Upload (Master Value/Local Value Problem)		PHP-Fortgeschrittene	5	23.11.2004 07:21
Cookie / localhost / Problem gelöst		PHP-Fortgeschrittene	11	02.11.2004 22:41
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34

25.03.2005, 13:27
Gast Beiträge: n/a	DIV´s verschieben sich ineinander - Problem Hi! Wiedermal ein DIV-Problem. Und zwar möchte ich einen "header-div" haben in dem links und rechts ein anderer DIV mit jeweils einer Grafik angezeigt werden soll. Wenn der Browser nun zusammengeschoben wird soll die rechte Grafik nach links wandern - aber nur solange bis die linke Grarfik "im weg" ist und dann soll unten der Scrollbalken erscheinen. Vom Grundprinzip hört es sich ja recht einfach an ... mein Problem ist aber, dass sich die rechte GRafik unter die Linke schiebt ... habe mit der float-eigenschaft gearbeitet. hier mal der Quellcode der index: Code: <body> <div class="container_oben"> <div class="container_links_oben"> </div> <div class="container_rechts_oben"> </div> </div> </body> und hier der Code der styles: Code: div.container_oben { clear: left; position: absolute; z-index:1; background-color: #0089D1; margin: 0px; padding: 0px; left: 0px; top: 0px; width: 100%; height: 150px; overflow: no; } div.container_links_oben { position: absolute; z-index:2; margin: 0px; padding: 0px; left: 0px; top: 0px; width: 400px; height: 150px; background-image: url(images/banner_links.jpg); background-repeat: no-repeat; overflow: no; } div.container_rechts_oben { float: right; z-index:2; margin: 0px; padding: 0px; left: 400px; top: 0px; width: 350px; height: 150px; background-image: url(images/banner_rechts.jpg); background-repeat: no-repeat; overflow: no; } so: und nun noch der Link zu der Aktuellen Version zum veranschaulichen meines Problems: http://www.elementebau-stollenwerk.d...urst/index.php wer eine Idee hat - ich wäre sehr dankbar, wenn er sie mit mir teilen würde MFG Holger


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

25.03.2005, 13:38
Gast Beiträge: n/a	Ich denke mal, es könnte daran liegen, dass Du dem Container_oben "width:100%" mit auf den Weg gegeben hast, da passt er sich automatisch an die Fensterbreite an, egal wie viel das sein mag

25.03.2005, 13:44
Gast Beiträge: n/a	ja, das soll er ja auch machen - wenn ich aber dann den Browser kleiner mache wird der container_oben ja auch kleiner ... und das Bild von links bleibt stehen und das rechte richtet sich rechts in dem obereren DIV aus ... es wandert dann mit nach links - nur wandert es viel zu weit. nämlich komplett unter das linke bild ... soll aber nur "dagegen" wandern...

25.03.2005, 13:50
Gast Beiträge: n/a	Wie schon gesagt, bei 100% Breite nimmt der keine Rücksicht, ob sich da Inhalt befindet oder nicht. Ich habe es bei mir so realisiert, dass ich eine feste Breite habe (760px), damit das auch bei niedrigeren Bildschirmauflösungen noch gut aussieht. Der Rest wird mit Hintergrundfarbe gefüllt.

25.03.2005, 14:01
Gast Beiträge: n/a	er SOLL sich aber ja anpassen hast du dir mal das beispiel angesehen? es soll so sein wie er es macht - das rechte bild soll nur nicht SO weit mit scrollen ... soll eben vor dem linken Bild wieder anhalten ...

25.03.2005, 14:09
Gast Beiträge: n/a	Na sicher habe ich mir das Beispiel angesehen, aber wenn Du ihm nicht genau sagst, wie breit Du den Container haben möchtest, dann ist er bei 100% und 200px Fensterbreite auch nur 200px breit! Und bei 1024 eben 1024! Wenn Du also ne bestimmte Breite nicht unterschreiten möchtest, könntest Du auch noch mit min-width arbeiten, wird aber z. B. vom IE gar nicht unterstützt. Guckst Du http://css4you.de/min-width.html

26.03.2005, 09:28
Gast Beiträge: n/a	Eine Lösung ist mir da noch eingefallen: Verzichte auf die DIVs cntainer_rechts_oben und container_links_oben und pack die Bilder in eine Tabelle mit einer Zeile und drei Spalten. Da kanst Du für die beiden Zellen mit den Bildern feste Größen vorgeben und die in der MItte setzt Du auf "auto". Das sollte Dein Problem lösen.

28.03.2005, 14:13
Gast Beiträge: n/a	jo - das mit den Tabellen hatte ich mir auch überlegt ... und es jetzt auch so relaisiert ... dachte mir zwar, dass es irgendwie doch so´ne Möglichkeit geben sollte mit DIV´s aber scheint nicht so .... mfg + thx HoLgAy