tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
1551
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 06.05.07 19:55 #1
    Avatar von WebGeek
    WebGeek WebGeek ist offline Mitglied
    Registriert seit
    May 2007
    Ort
    Salzburg
    Beiträge
    12
    Hallo Community,

    ich hab ein 3-Spalten-Layout (=das Thema der Woche... )
    die mittlere Spalte sollte zentriert sein, deshalb auch bei der mittleren Spalte das align=center...
    das 'align=center' zentriert nun aber alle in diesem div-tag liegenden div-tags, was aber so nicht gewünscht ist...

    in der ContentArea habe ich ein 2-Spalten-Layout, welches mit FF2 die beiden Spalten richtig in einer Zeile positioniert...
    ABER im IE7 wird die rechte Spalte - wie soll's anders sein - eine Zeile unterhalb platziert...
    display: inline; bzw. display: block; hilft da auch nicht!

    hätte jemand nicht eine funktionierende Lösung dafür!

    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

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>3-Spalten-Layout mit 2-Spalten ContentArea</title>
<style type="text/css">
<!--
body { background-color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; color: #FFFFFF; margin: 0px; }
#ColL{ float: left; width: 50px; border: 1px dashed #999999; }
#ColR{ float: right; width: 50px; border: 1px dashed #999999; }
#ColM{ margin: 0 50px; border: 1px dashed #FFFF00; }
#ContentArea { width: 810px; border: 1px dashed #DDDDDD; }
#ContentAreaTop { height: 24px; border: 1px dashed #FF00CC; }
#ContentAreaTopNav { line-height: 20px; border: 2px dashed #009900; }
#ContentAreaMain { border: 1px dashed #FF0000; }
#ContentAreaMainL{ float: left; margin: 0px 0px 0px 50px; width: 365px; padding-left: 0px; border: 1px dashed #6495ED;}
#ContentAreaMainR{ margin: 0px 0px 0px 467px; width: 343px; padding-left: 0px; border: 1px dashed #6495ED; }
#ContentAreaBottom { height: 51px; border: 1px dashed #FF00FF; }
-->
</style>
</head>
<body>
<div id="ColL"></div>
<div id="ColR"></div>
<div id="ColM" align="center">
  <div id="ContentArea">
    <div id="ContentAreaTop"></div>
    <div id="ContentAreaTopNav">Navigation</div>
    <div id="ContentAreaMain">
      <div id="ContentAreaMainL">Content Left</div>
      <div id="ContentAreaMainR">Content Right</div>
    </div>
    <div id="ContentAreaBottom"></div>
  </div>
</div>
</body>
</html>
     

    - I have a dream -
    .: WebGeek :.
  2. 06.05.07 21:20 #2
    Maik Tutorials.de Gastzugang
    Hi,

    das DIV ContentArea lässt sich mit diesen Regelerweiterungen im DIV ColM horizontal zentrieren, und macht das HTML-Attribut align=center überflüssig:

    Code :
    1
2

    #ColM{ margin: 0 50px; border: 1px dashed #FFFF00; [b]text-align:center;[/b]  }
#ContentArea { [b]position:relative; margin:0 auto; text-align:left;[/b] width: 810px; border: 1px dashed #DDDDDD; }

    Das Darstellungsproblem im IE liesse sich folgendermaßen lösen:

    Code :
    1
2
3

    #ContentAreaMainL{ float: left; [b]margin: 0px 0px 0px 50px !important; margin: 0px 0px 0px 25px;[/b] width: 365px; padding-left: 0px; border: 1px dashed #6495ED;}
#ContentAreaMainR{ [b]float:right;[/b] width: 343px; padding-left: 0px; border: 1px dashed #6495ED; }
#ContentAreaBottom { [b]clear:both;[/b] height: 51px; border: 1px dashed #FF00FF; }
     
  3. 06.05.07 23:15 #3
    Avatar von WebGeek
    WebGeek WebGeek ist offline Mitglied
    Registriert seit
    May 2007
    Ort
    Salzburg
    Beiträge
    12
    DANKE für die Optimierung

    ich hab's gleich nach Deinem posting mal ausprobiert - hat soweit im IE7 und FF2gleichermaßen funktioniert...

    was mir derzeit noch nicht ganz klar ist, warum 2 x margin vorkommt und was dies genau bewirkt!
    Code :
    1

    margin: 0px 0px 0px 50px !important; margin: 0px 0px 0px 25px;
    und was clear bewirkt...
    Code :
    1

    clear:both;
    könntest Du dies bitte kurz erläutern, das wäre echt fein - DANKE
     

    - I have a dream -
    .: WebGeek :.
  4. 07.05.07 06:13 #4
    Maik Tutorials.de Gastzugang
    Hi,

    mit Hilfe der !important-Regel
    Code :
    1

    margin: 0px 0px 0px 50px !important; margin: 0px 0px 0px 25px;
    wird im IE der "Double-Margin-Bug" behoben.

    Da nun die rechte Spalte ContentAreaMainR mit float:right ausgezeichnet ist, muss das nachfolgende DIV ContentAreaBottom die clear-Eigenschaft erhalten, damit es nicht zwischen die beiden Spalten ContentAreaMainL und ContentAreaMainR rutscht und diese umfließt.
     
« fixer Hintergrund in einem Textfeld | Stylesheet »

Ähnliche Themen

  1. 3 Spalten Layout
    Von Xching im Forum CSS
    Antworten: 7
    Letzter Beitrag: 06.10.10, 11:49
  2. 3-Spalten-Layout unter 2-Spalten-Layout setzen
    Von cocoon im Forum CSS
    Antworten: 9
    Letzter Beitrag: 03.07.09, 12:31
  3. 3-Spalten-Layout / Moz vs. IE
    Von sipoh im Forum CSS
    Antworten: 6
    Letzter Beitrag: 31.10.07, 13:26
  4. 3-Spalten-Layout mit CSS
    Von Crashburn im Forum CSS
    Antworten: 7
    Letzter Beitrag: 06.05.07, 16:30
  5. 3 Spalten Layout
    Von freakcx im Forum CSS
    Antworten: 2
    Letzter Beitrag: 06.11.05, 00:19