Statistik  Mitglieder gesamt: 68137 Mitglieder online: 1 Gäste online: 6 mehr...
Anzeige
| Thread: Probleme mit DIVs
 09.01.2008 20:03 Uhr
|
|
|
|
|
Hallo @ All!
Ich versuche mich mal wieder an einem neuen Design, aber leider taucht schon das erste Problem auf, welches ich nicht alleine lösen kann.
Zur Testseite
Im FF schaut das schon so aus, wie ich es gerne haben möchte. Im IE (V6) allerdings sind die einzelnen Header-Elemente total verschoben. 
Der Body-Bereich schaut derzeit so aus:  PHP:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<body>
<div id="container">
<div style="border: 0px; float: left; height: 126px;"> <img src="layout/header_1l.png" alt="" border="0" /></div>
<div style="border: 0px; height: 126px;"> <img src="layout/header_1r.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 119px;"> <img src="layout/header_2l.png" alt="" border="0" /></div>
<div style="border: 0px; height: 119px;"> <img src="layout/header_2r.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 47px;"> <img src="layout/header_3l.png" alt="" border="0" /></div>
<div style="border: 0px; height: 47px;"> <img src="layout/header_3r.png" alt="" border="0" /></div>
</div>
</body> |
Und in der css-Datei steht erstmal nur dieses hier: PHP:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#container {
position: absolute;
width: 740px;
margin: 0 0 0 -370px;
top: 0;
left: 50%;
text-align: left;
padding: 0px;
background-color: #FFE478;
border-left: 3px solid #871201;
border-right: 3px solid #871201;
} |
Kann mir bitte einer von euch helfen und sagen was ich tun kann, damit der Header im IE nicht zerspringt.
Vielen Dank im voraus.
LG, Stephie
|
|
09.01.2008 20:05 Uhr
|
|
|
|
|
Also im IE7 ist alles in Ordnung!
kannst du Screenshots anhängen?
|
|
09.01.2008 20:09 Uhr
|
|
|
|
|
Ja, kann ich... 
1 Datei angehängt |
|
09.01.2008 20:12 Uhr
|
|
|
|
|
Ich tippe darauf, dass die Breite von zu gering ist!
änder doch mal die Breite PHP:1
2
3
4
5
|
#container {
...
width:740px;
} |
um 5 Pixel!
1 mal bearbeitet |
|
09.01.2008 20:19 Uhr
|
|
|
|
|
Entweder du vergrößerst die Breite des #container, dann sieht man allerdings einen Abstand zwischen den beiden Bildern, der sich nicht mit margin:0px oder padding:0px entfernen lässt.
Die einzige Möglichkeit ist, dass du den Code float:left bei jedem Div hinzufügst, also so: PHP:1
2
3
4
5
6
7
8
| <div id="container">
<div style="border: 0px; float: left; height: 126px;"><img src="layout/header_1l.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 126px;"><img src="layout/header_1r.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 119px;"><img src="layout/header_2l.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 119px;"><img src="layout/header_2r.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 47px;"><img src="layout/header_3l.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 47px;"><img src="layout/header_3r.png" alt="" border="0" /></div>
</div> |
___________________________
Strebe nicht nach Dingen, die auch Dümmeren gelingen
|
|
09.01.2008 20:19 Uhr
|
|
|
|
|
Danke für die schnelle Hilfe. Mit der Lösung von Steve004 hat es geklappt.
Herzlichen Dank an euch Beide. 
LG, Stephie
1 Datei angehängt 1 mal bearbeitet |
|
20.01.2008 08:28 Uhr
|
|
|
|
|
Huhu @ All!
Bräuchte nochmal Hilfe. Vielleicht seht ihr es schon selber:
zur Testseite
Ich möchte dass das äußere DIV bis an den unteren Rand geht, allerdings hört es schon nach der Hälfte auf. Wenn ich den Text kürzer fasse, passt es. Aber je länger der Text ist, desto mehr "fehlt" vom DIV. Oje, wisst ihr wie ich das meine...  Also es soll so sein, wie am oberen Rand.
Das steht momentan in meiner test.php PHP:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<div id="container">
<div style="width: 740px; height: 292px;">
<div style="border: 0px; float: left; height: 126px;"> <img src="layout/header_1l.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 126px;"> <img src="layout/header_1r.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 119px;"> <img src="layout/header_2l.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 119px;"> <img src="layout/header_2r.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 47px;"> <img src="layout/header_3l.png" alt="" border="0" /></div>
</div>
<!-- Content -->
<div style="width: 740px;">
<div style="border: 0px; float: left; width: 200px; padding: 10px;">
<h1>Navigation</h1>
<h3><a href="http://www.perlenblumen.de">Link</a></h3>
<h3><a href="http://www.perlenblumen.de">Link</a></h3>
<h3><a href="http://www.perlenblumen.de">Link</a></h3>
<h3><a href="http://www.perlenblumen.de">Link</a></h3>
</div>
<div style="border: 0px; float: left; width: 500px; padding: 10px; color: #871201; text-align: justify;">
<h3>Content</h3>
<h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eget risus. Aenean hendrerit augue eget ligula. Donec vitae turpis. Curabitur facilisis. Phasellus ut ligula ut sapien dignissim condimentum. Donec tellus. Integer feugiat mattis elit. Duis sollicitudin urna et ante. Suspendisse potenti. Suspendisse dui leo, volutpat et, pellentesque at, aliquet at, pede. In nonummy, dui sed eleifend suscipit, nisl nunc volutpat ipsum, sed blandit justo dolor eu elit. Fusce elit. Duis et sapien eget mauris elementum pretium. Fusce dictum sodales magna. Nullam commodo. Pellentesque non lectus. Praesent vulputate. Vestibulum varius interdum nisl. Aenean dapibus, lorem quis tempus pharetra, orci turpis dapibus odio, nec rhoncus ipsum urna ultricies tortor. Curabitur vitae eros.
<br /> <br />
Sed sit amet est lobortis diam facilisis malesuada. Vestibulum venenatis quam. Cras porta. Morbi quis urna. Quisque a erat sit amet est commodo accumsan. Integer viverra diam id felis. Proin ligula tortor, feugiat a, facilisis ut, rhoncus quis, turpis. Aliquam molestie. Duis consequat feugiat lorem. Suspendisse malesuada leo quis arcu.
</h4>
</div>
</div>
<div style="width: 740px;">
<div style="border: 0px; float: left; height: 137px;"> <img src="layout/footer_1l.png" alt="" border="0" /></div>
<div style="border: 0px; float: left; height: 137px;"> <img src="layout/footer_1r.png" alt="" border="0" /></div>
</div>
</div> |
und das in meiner css-Datei: PHP:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#container {
position: absolute;
height: 100%;
width: 740px;
margin: 0 0 0 -370px;
top: 0;
bottom 0;
left: 50%;
text-align: left;
padding: 0px;
background-color: #FFE478;
border-left: 3px solid #871201;
border-right: 3px solid #871201;
float: left;
} |
Da ich die Höhe von dem DIV ja nicht in px bestimmen kann, weil ja der Content auf den einzelnen Seiten unterschiedlich lang ist, habe ich height auf 100% gesetzt. Aber das funktioniert auch nicht... 
Wäre schön, wenn wieder jemand helfen könnte, da ich durch selber rum probieren zu keinem brauchbaren Ergebnis gekommen bin.
LG, Stephie
|
|
20.01.2008 11:37 Uhr
|
|
|
|
|
Hallo, Shinigami.
Mit reinem CSS geht das leider nicht.
Du kannst zusätzlich mit Javascript die Höhe des Anzeigenfensters bestimmen und dann die Div-Höhe entsprechend sezten.
LG, bmk.
|
|
20.01.2008 12:02 Uhr
|
|
|
|
|
Und wäre es möglich, den äußeren DIV weg zu lassen? Bekommt man dann trotzdem noch alles irgendwie mittig hin?
|
|
20.01.2008 12:02 Uhr
|
|
|
|
|
Müsste sich der Container nicht, wenn man ihm keine Größe angibt, zusammen mit dem Content vergrößern? HTML:1
2
3
4
5
| <div id="outer">
<div id="inner">
Text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text
</div>
</div> |
Hier wird doch #outer gleich groß wie #inner gemacht, damit #inner eben darin Platz hat.
Daher müsste doch auch der Hintergrund von #outer - wenn man einen definiert - so groß werden wie der Text von #inner?
Oder sehe ich da etwas falsch?
1 mal bearbeitet |
|
|
