tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
1297
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 21.06.06 15:34 #1
    Metha Metha ist offline Mitglied Silber
    Registriert seit
    Apr 2004
    Beiträge
    97
    Hallo zusammen,

    baue mir gerade ein Drei-Spalten-Layout. Im IE funktioniert das Layout auch, doch im FireFox, Netscape und Opera noch nicht. Ich weiß aber nicht welche Angaben die anderen Browser noch benötige.

    Hier mein Code (CSS):

    PHP-Code:
    .left{
            float: left;
            text-align: left;}
        
    .    right{
            float: right;
            text-align: right;}
        
    .    middle{
            text-align: center;}

    .    mb10{
            margin-bottom: 10px;}

    /* Box 1 Anfang*/
            .body1head{
                margin: 0px 0px 0px 0px; width: 540px; height: 10px;
                background: url(../gfx/md_body1_head.gif) top no-repeat;}

        .    body1cont{
                padding: 5px 15px 5px 15px; width: 510px;
                background: url(../gfx/md_body1_cont.gif) repeat-y; font-size: 10px;}

        .    body1foot{
                margin: 0px 0px 0px 0px; width: 540px; height: 10px;
                background: url(../gfx/md_body1_foot.gif) top no-repeat;}
    /* Box 1 Ende */

    /* Box 3 Anfang*/
            .body3head{
                margin: 0px 0px 0px 0px; width: 170px; height: 10px;
                background: url(../gfx/md_body3_head.gif) top no-repeat;}

        .    body3cont{
                padding: 5px 15px 5px 15px; width: 140px;
                background: url(../gfx/md_body3_cont.gif) repeat-y; font-size: 10px;}

        .    body3foot{
                margin: 0px 0px 0px 0px; width: 170px; height: 10px;
                background: url(../gfx/md_body3_foot.gif) top no-repeat;}
    /* Box 3 Ende */ 
    Und hier mein HTML Code:
    PHP-Code:
    <div class="mb10">
        <    div class="body1head"></div>
        <    div class="body1cont">
        {    top}
          <    div class="clear"></div></div>
        <    div class="body1foot"></div>
    </    div>

    <    div class="left">
        <    div class="body3head"></div>
        <    div class="body3cont">
        {    left}
        <    div class="clear"></div></div>
        <    div class="body3foot"></div>
    </    div>

    <    div class="right">
        <    div class="body3head"></div>
        <    div class="body3cont">
        {    right}
        <    div class="clear"></div></div>
        <    div class="body3foot"></div>
    </    div>

    <    div class="middle">
        <    div class="body3head"></div>
        <    div class="body3cont">
        {    middle}
        <    div class="clear"></div></div>
        <    div class="body3foot"></div>
    </    div> 
    Jemand eine Idee woran es leigt?
     
  2. 21.06.06 16:53 #2
    Maik Tutorials.de Gastzugang
    Die von dir genannten Browser benötigen für das DIV .middle die float-Eigenschaft (left oder right).

    Und welchen Sinn soll das DIV .clear in den einzelnen Boxen haben?
     
  3. 21.06.06 17:06 #3
    Metha Metha ist offline Mitglied Silber
    Registriert seit
    Apr 2004
    Beiträge
    97
    Also kann ich so mein Layout garnicht dreispaltig machen ?

    Das clear habe ich vergessen aufzuführen. Es ist "clear: both" damit die boxen auch auf den Content angepasst werden.
     
  4. 21.06.06 17:11 #4
    Maik Tutorials.de Gastzugang
    Wieso nicht? Es funktioniert doch, wenn du meinen Vorschlag übernimmst.

    Du benötigst vermutlich noch ein übergeordnetes DIV .wrapper mit der Breitenangabe, die sich aus den drei Boxbreiten ergibt:

    Code :
    1
2
3
4

    .wrapper {
width: 510px; /* 3*170px = 510px */
border: 1px solid #000;
}
    und bettest die Boxen dort ein:
    Code :
    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

    <div class="wrapper">
  <div class="left">
    <div class="body3head"></div>
    <div class="body3cont">
    {left}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>
 
  <div class="right">
    <div class="body3head"></div>
    <div class="body3cont">
    {right}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>
 
  <div class="middle">
    <div class="body3head"></div>
    <div class="body3cont">
    {middle} 
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>
 
  <div class="clear"></div>
</div>
     
  5. 21.06.06 18:21 #5
    Metha Metha ist offline Mitglied Silber
    Registriert seit
    Apr 2004
    Beiträge
    97
    Hmm danke für den Tip, aber es funktioniert nicht!

     
  6. 21.06.06 18:43 #6
    Maik Tutorials.de Gastzugang
    Seltsam, denn bei mir funktioniert es in allen mir zur Verfügung stehenden Browsern einwandfrei.

    Hast du das DIV .middle auch mit der float:left-Eigenschaft formatiert?
     
  7. 22.06.06 06:41 #7
    Maik Tutorials.de Gastzugang
    Ich hänge mal den kompletten Quelltext meiner Testseite zum Vergleichen an, vielleicht hast du ja etwas übersehen bzw. vergessen:

    Code :
    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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
 
<style type="text/css">
<!--
.left{
    float: left;
    text-align: left;}
 
.right{
    float: right;
    text-align: right;}
 
.middle{
    float: left;
    text-align: center;}
 
.mb10{
    margin-bottom: 10px;}
 
.wrapper {
width: 510px;
border: 1px solid #000;
}
 
/* Box 1 Anfang*/
    .body1head{
        margin: 0px 0px 0px 0px; width: 540px; height: 10px;
        background: url(../gfx/md_body1_head.gif) top no-repeat;}
 
    .body1cont{
        padding: 5px 15px 5px 15px; width: 510px;
        background: url(../gfx/md_body1_cont.gif) repeat-y; font-size: 10px;}
 
    .body1foot{
        margin: 0px 0px 0px 0px; width: 540px; height: 10px;
        background: url(../gfx/md_body1_foot.gif) top no-repeat;}
/* Box 1 Ende */
 
/* Box 3 Anfang*/
    .body3head{
        margin: 0px 0px 0px 0px; width: 170px; height: 10px;
        background: url(../gfx/md_body3_head.gif) top no-repeat;}
 
    .body3cont{
        padding: 5px 15px 5px 15px; width: 140px;
        background: url(../gfx/md_body3_cont.gif) repeat-y; font-size: 10px;}
 
    .body3foot{
        margin: 0px 0px 0px 0px; width: 170px; height: 10px;
        background: url(../gfx/md_body3_foot.gif) top no-repeat;}
/* Box 3 Ende */
 
div.clear {
clear: both;
}
-->
</style>
 
</head>
<body>
 
<div class="mb10">
    <div class="body1head"></div>
    <div class="body1cont">
    {top}
      <div class="clear"></div></div>
    <div class="body1foot"></div>
</div>
 
<div class="wrapper">
  <div class="left">
    <div class="body3head"></div>
    <div class="body3cont">
    {left}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>
 
  <div class="right">
    <div class="body3head"></div>
    <div class="body3cont">
    {right}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>
 
  <div class="middle">
    <div class="body3head"></div>
    <div class="body3cont">
    {middle}
    <div class="clear"></div></div>
    <div class="body3foot"></div>
  </div>
 
  <div class="clear"></div>
</div>
 
</body>
</html>
    • Browsercheck: Firefox 1.5.0.4, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 8.50 | Win2000
     
« Browserproblem bei DIV Layout - Hilfe ! | Probleme mit Abständen und z-index (DIV) »

Ähnliche Themen

  1. 3-Spalten-Layout unter 2-Spalten-Layout setzen
    Von cocoon im Forum CSS
    Antworten: 9
    Letzter Beitrag: 03.07.09, 12:31
  2. 3-Spalten-Layout mit 2-Spalten ContentArea
    Von WebGeek im Forum CSS
    Antworten: 3
    Letzter Beitrag: 07.05.07, 06:13
  3. Banner + drei Spalten, alles zentriert, in firefox und ie unterschiedlich
    Von Warhamster im Forum CSS
    Antworten: 6
    Letzter Beitrag: 22.10.05, 14:34
  4. Drei Spalten Layout
    Von Neral im Forum CSS
    Antworten: 1
    Letzter Beitrag: 26.07.05, 16:25
  5. Layout mit drei längenvariablen Div's
    Von Atmosphinx im Forum CSS
    Antworten: 2
    Letzter Beitrag: 01.03.05, 15:14