1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

3 spaltiges DIV, das mittlere soll eine flexible breite haben

Dieses Thema im Forum "PHP & Co." wurde erstellt von Oregano, 23.04.09.

  1. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
    irgendwie richtet der die 3 spalten "col3a, col3b und col3c" immer links aus, ich will aber das diese 3 spalten mittig zentriert sind und die mittlere dieser 3 spalten die rechte und linke im notfall nach außen drückt. any idea?

    so soll das aussehen:
    [​IMG]

    klappt aba nich...

    <html>
    <head>

    <style type="text/css">
    #menue {
    position:relative;
    top:377px;
    width:946px;
    height:79px;
    z-index:2;
    text-align:center;
    margin:0 auto;
    }
    .col3a {
    background:#009933;
    width:100px;
    float: left;
    }
    .col3b {
    background:#FF9966;
    overflow: auto;
    width:auto;
    float:left;
    }
    .col3c {
    background: #CC33CC;
    width:100px;
    float:left;
    }
    -->
    </style>

    </head>
    <body>
    <div id="menue">
    <div align="center">
    <div class="col3a">col3a</div>
    <div class="col3b">col3b - hier kommen dann die menuepunkte rein</div>
    <div class="col3c">col3c</div>
    </div>
    </div>
    </body>
    </html>
     

    Anhänge:

  2. Micha K

    Micha K Zuccalmaglios Renette

    Dabei seit:
    07.04.07
    Beiträge:
    256
    Guck Dir mal den Quellcode von der Onlinebankingseite der Postbank an...
     
  3. eyecandy

    eyecandy Graue Französische Renette

    Dabei seit:
    08.12.05
    Beiträge:
    12.210
  4. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
  5. eyecandy

    eyecandy Graue Französische Renette

    Dabei seit:
    08.12.05
    Beiträge:
    12.210
    pardonez moi ;)
     
  6. gKar

    gKar Maunzenapfel

    Dabei seit:
    25.06.08
    Beiträge:
    5.362
    Und warum floaten die alle links?
    Ich würde sagen: Col a mit fixer Breite und float:left,
    gefolgt von Col c mit fixer Breite und float:right,
    gefolgt vom Content, der dann den Platz dazwischen füllt.

    Dann sollte man sich noch um die Höhen kümmern etc.

    Bzw, wenn z.B. in Col b viel mehr Content sein könnte, der nicht unterhalb von Col a wieder an den linken Seitenrand rutschen darf, dann würde ich zunächst nur zwei DIVs erstellen, eines mit float left, eines mit float right, und in einem der beiden DIVs wiederum eine solche Unterteilung in einen links und einen rechts schwebenden Teil einfügen. Der ganze Content steht dann in diesen drei "floating divs", dann hat man durchgehende Spalten.
     
  7. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
    das löst das problem nicht das diese 3 spalten nicht mittig stehen wollen.
    ich glaub du hast mich falsch verstanden, was du mir zeigst ist ein klassisches 3-spalten layout, aber ich will halt ein 3-spalten layout in dem der inhalt der mittleren spalte die beiden äußeren im bedarfsfall nach außen drückt und alle 3 sollen dabei mittig in einem div sein.
     
  8. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.549
    Das ist tatsächlich nicht leicht zu verstehen.

    Du willst also quasi die "gesamte Seite breiter machen", wenn der Inhalt der mittleren Spalte "die beiden Spalten rechts und links nach außen drückt"? Oder sollen dann die linke und rechte Spalte im selben Maße schmaler werden, wenn die mittlere Spalte breiter wird?

    Wovon wird die Breite der mittleren Spalte abhängen? Von Text? Von Bildern?
     
  9. gKar

    gKar Maunzenapfel

    Dabei seit:
    25.06.08
    Beiträge:
    5.362
    Mal ins Blaue gedacht (ohne jetzt etwas ausprobiert zu haben):
    Wenn ich Dich richtig verstanden habe, könnte die Lösung u.U. wie folgt sein:
    Du hast ein DIV #1, innerhalb dessen Dein 3-Spalten-Dings zentriert und mit variabler Breite sein soll.
    Dann würde ich in DIV #1 eben ein zentriertes DIV #2 einfügen (das sollte doch eigentlich gehen), wobei DIV #2 eine variable Breite hat und selbst wiederum diese drei Spalten enthält.
     
  10. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
    soweit so gut...

    und da tritt das problem auf: die 3 spalten lassen sich nicht zentrieren in dem DIV #2!

    denn genau das was du hier gerade beschreibst habe ich ja gemacht (siehe quellcode oben):
    <div id="menue">
    <div align="center">
    <div class="col3a">col3a</div>
    <div class="col3b">col3b - hier kommen dann die menuepunkte rein</div>
    <div class="col3c">col3c</div>
    </div>
    </div>

    so soll das aussehen:

    [​IMG]

    aber so sieht es leider aus:

    [​IMG]


    werd bald affich :mad:

    sieht so einfach aus aber es geht einfach nicht...
     

    Anhänge:

  11. MasterofDistres

    MasterofDistres Kleiner Weinapfel

    Dabei seit:
    07.12.06
    Beiträge:
    1.139
    Erstell' mal statt des „div align = center“ einen Container, der die col3 a,b,c enthält und versuch's mit einem „margin: auto“.
     
  12. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
    soweit war ich schon... klappt auch nicht.
     
  13. gKar

    gKar Maunzenapfel

    Dabei seit:
    25.06.08
    Beiträge:
    5.362
    Habe gerade mal mein Standard-Nachschlagewerk SelfHTML konsultiert.
    Demnach scheint es kein "align" zu geben, was erklären würde, warum es nicht funktioniert.
    Laut http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align gibt es nur text-align, welches Inline-Elemente zentriert. Aber ein DIV ist ja kein Inline-Element. Für Inline-Elemente steht dort, man solle identische Margins für links und rechts nehmen, um eine Zentrierung zu erreichen. Das wiederum steht aber Deinem Ziel im Wege, die Menübreite nicht fix, sondern inhaltsabhängig zu gestalten. Spontan finde ich daher auch keine Lösung.

    Aber was anderes: Wozu brauchst Du die linke und rechte „DIV-Spalte“? Ich würde hier einfach den Text im Menü mit entsprechendem Padding ausstatten.
     
  14. BigR

    BigR Gloster

    Dabei seit:
    20.01.08
    Beiträge:
    62
  15. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
    ja leider, ist wohl so. habs befürchtet :p

    na da sollen die runden ecken rein.
     
  16. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
  17. BigR

    BigR Gloster

    Dabei seit:
    20.01.08
    Beiträge:
    62
    DIVs kann man wie folgt zentrieren:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>DIV zentrieren</title>
        <style type="text/css">
          body {
            margin: 0;
            padding: 0;
            background-color:#fff;
          }
          div {
            margin: 0 auto;
            width: 300px;
            height: 200px;
            background-color: #f00;
          }
        </style>		
      </head>
      <body>
        <div>Hallo Welt</div>
      </body>
    </html>
    
    die wichtigste Zeile hierbei ist das margin: 0 auto;.
     
  18. BigR

    BigR Gloster

    Dabei seit:
    20.01.08
    Beiträge:
    62
    Es geht ja nicht um das ganze YAML Framework sondern darum, dass du du mal sehen kannst wie
    man ein 3 spaltiges Layout mit variabler mittlerer Spalte erstellen kann.

    Die dort eingesetzte Technik kannst du ja dann übernehmen.
     
  19. Oregano

    Oregano Bismarckapfel

    Dabei seit:
    20.02.09
    Beiträge:
    142
    das klappt aber auch nur solange man in dieses div nicht auch wieder 3 divs packen will. :p
    hier die baustelle meiner seite:

    http://www.de-signed.com/test/sport/sdfjsfjsdfsfsf.html

    das menü unten soll halt zentriert sein. vielleicht mach ich auch nen totalen denkfehler und muss ganz anders an die sache rangehen... o_O
     
  20. sausehuhn

    sausehuhn Lambertine

    Dabei seit:
    23.07.07
    Beiträge:
    693
    Wieso nicht einfach eine DIV und darein dann links das Bild für die linke Ecke, dann der Text, dann das Bild für die Rechte Ecke?
     

Diese Seite empfehlen