XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   3 div container nebeneinander (http://xhtmlforum.de/showthread.php?t=57653)

the_real_alex 09.07.2009 18:22

3 div container nebeneinander
 
hallo,
ich bin gerade am verzeifeln da ich nich unbedingt ein anfänger bin was css/html/php angeht.aber im moment bin ich am rande eines nervenzusammenbruchs.

folgendes;


es gilt 3 div fenster nebeneinander zu postionieren an sich keine große sache, also 1 2 3

das problem ist nur damit

fenster 2 in der mitte sein soll und das auflösungsunabhängig, in diesem fenster befindet sich ein bild das mittels background-image:url eingebunden wird und 600px breit ist.

fenster 1 steht links, fenster 3 rechts. diese enthalten ebenfalls ein bild das via background-image:url eingebunden wurde, und mittels background-repeat:repeat-x; so breit skaliert wird wie fenster 1 oder 3 eben sind.

im endeffekt soll das in etwa so aussehen wie der kopf vom xhtmlforum, nur das nicht das mittlere fenster skalieren soll sondern die fenster links und rechts.

alex

Praktikant 09.07.2009 18:27

Haben fenster1 und fester3 den selben Hintergrund?
Wenn ja, dann ist folgende Lösung viel leichter als das was du hast:

Container 1 bekommt 100% Breite und der Hintergrundbild gespiegelt.
Container 2 wird in Container 1 verschachtelt und bekommt die 600 Pixel Breite des Bildes fest zugewiesen und wird mittig ausgerichtet :)

So sieht es dann aus als wäre links und rechts ein Rand :)

the_real_alex 09.07.2009 21:19

danke nur funst das nich so richtig oder ich setze es falsch um


Code:

#left {
position:absolute;
width: 100%;
height:117px;
background-image:url(left.jpg);
background-repeat:repeat-x;

}

#middle {
width: 600px;
height:117px;
position: absolute;
left:25%;
background-image:url(logo.jpg);
       
}

#right {
width: 25%;
height:117px;
position: absolute;
background-image:url(right.jpg);
background-repeat:repeat-x;
right:0px;

}

left und right haben unterschiedliche bildinhalte und sind jeweils nur 1px breit :bounce:

HTML-Code:

<body>

<div id="left">
<div id="middle"></div>
</div>
<div id="right"></div>

</body>


the_real_alex 10.07.2009 10:29

kann mir da niemand helfen, bitte

regloh 10.07.2009 10:35

Die absolute Positionierung brauchst du doch nicht. Nimm sie raus und arbeite im normalen Dokumentenfluss.

Gib #left und #right eine feste Breite und float: left/right;
#middle gibst du keine Breite (bzw. min-width: 600px wegen des Hintergrundbildes) und fügst margin-left/-right in der Breite von #left und #right hinzu.
Im HTML-Teil muss die Reihenfolge dann wiefolgt lauten:
HTML-Code:

<div id="left">...</div>
<div id="right">...</div>
<div id="middle">...</div>


the_real_alex 10.07.2009 11:29

also ich hab das mal so gemacht

#left {

width: 20%;
height:117px;
background-image:url(left.jpg);
background-repeat:repeat-x;
float:left;
margin:0;
padding:0;

}

#middle {
min-width: 600px;
height:117px;
background-image:url(logo_big.jpg);
margin:0;
padding:0;

}

#right {
width: 20%;
height:117px;
background-image:url(right.jpg);
background-repeat:repeat-x;
float:right;
margin:0;
padding:0;
}



<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

leider funktioniert das nicht da es das rechte fenster beim zusammenschieben in das mittlere möndet und schließlich überdeckt. das mittlere muß eine bestimmte breite habe da es ein logo beinhaltet, nur links und rechts (1,3) dürfen flexibel sein (am besten auto)

medienmasse 11.07.2009 00:45

Wenn alle Boxen das gleiche Bild als Hintergrund haben kannst Du alternativ auch mit .class arbeiten und eine Klasse erstellen die float:left als Wert hat, und einfach drei div-Boxen mit der Klasse nebeneinander setzen.
Klappt bei mir zumindest einwandfrei, natürlich musst Du um die Boxen herum eine Box setzen mit 100%.

Warum px-Angaben?

Lg

regloh 11.07.2009 08:12

Er möchte aber, dass die link und rechte Spalte fixe Breiten haben und die mittlere Spalte den restlichen Platz einnimmt. Somit fällt float für die mittlere Spalte weg.

Zitat:

leider funktioniert das nicht da es das rechte fenster beim zusammenschieben in das mittlere möndet und schließlich überdeckt. das mittlere muß eine bestimmte breite habe da es ein logo beinhaltet, nur links und rechts (1,3) dürfen flexibel sein (am besten auto)
Was willst du denn nun genau machen? Soll der mittlere Bereich flexibel sein oder die äußeren? Bei min-width: 600px bleibt dein mittlerer Container halt mindestens 600px breit und die floats schieben sich darüber. Wie man das nun verhindern kann, weiß ich auch nicht. Zeig doch vllt. mal ein Screenshot deines Layouts. Vllt finden wir eine andere Lösung ;)

the_real_alex 11.07.2009 11:44

der mittlere soll mittig sein und eine feste breite haben, links und rechts sollen skalieren

heiko_rs 11.07.2009 12:20

Was mir dazu auf die Schnelle einfällt (der IE < 7 braucht nur noch einen min-width-Hack):

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

* {
        margin: 0;
        padding: 0;
        }

body {
        min-width: 700px;
        }

#main-1,
#main-2 {
        width: 50%;
        }

#main-1 {
        float: left;
        margin-right: -10px;
        }

#main-2 {
        float: right;
        }

#center {
        background: yellow;
        float: right;
        width: 600px;
        margin-right: -300px;
        position: relative;
        }

#left,
#right {
        background: red;
        }

#left {
        margin-right: 300px;
        }

#right {
        margin-left: 300px;
        }

div {
        min-height: 1px; /* IE 7 */
        }

* html div {
        height: 1px;
        }

* html #left {
        margin: 0;
        }

* html #center {
        margin-left: -3px;
        }

</style>
</head>

<body>

<div id="main-1">
        <div id="center">text</div>
        <div id="left">text</div>
</div>

<div id="main-2">
        <div id="right">text</div>
</div>

</body>

</html>



Alle Zeitangaben in WEZ +2. Es ist jetzt 23:49 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023