Flexible Div Boxen

Dieses Thema Flexible Div Boxen im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von kinn, 24. Juli 2009.

Thema: Flexible Div Boxen Hallo, ich habe mit drei Div Boxen erstmal ein Grundgerüst erstellt (http://kinn.de.tp), leider habe ich ein kleines...

  1. Hallo,
    ich habe mit drei Div Boxen erstmal ein Grundgerüst erstellt (http://kinn.de.tp), leider habe ich ein kleines Problem.
    Und zwar möchte ich das der Navigation-Bereich immer die selbe Höhe hat wie der Main-Content. Bzw. andersherum, je nach dem.
    Außerdem kann ich keine festen Höhen definieren, da ich den Inhalt flexibel ändern möchte.

    CSS Datei http://geifell.ge.ohost.de/styles.css

    hoffentlich könnt ihr mir helfen

    Gruß Sascha
     
  2. hi,
    Danke für deinen Post.
    Gibt es nur diese eine Möglichkeit um gleichhohe Spalten entstehen zulassen?
    Aber dank deinem Post habe ich noch folgende Seite gefunden, welche es auch sehr gut beschreibt. http://www.alistapart.com/articles/holygrail
    Ich werde mich einmal daran versuchen und euch bzw. dich auf dem laufenden halten.

    Gruß Sascha
     
  3. Moin Sascha,

    gibt es, aber das ist bei weitem die einfachste und am häufigsten angewandte.

    Gruß
    Klaus
     
  4. Hi,
    nochmal danke ich habs jetzt soweit mml

    So sieht jetzt der einfache Quellcode aus. In der CSS Datei der untere Teil sorgt für gleichlange Spalten
    Code:
    <html>
     <head>
      <title>Kinn's Website</title>
      <link rel=stylesheet type=text/css href=layout.css>
      <link rel=stylesheet type=text/css href=styles.css>
     <head>
     
     <body>
      <div id=header>header</div>
      <div id=container>
        <div id=center class=column><h2>Herzlich Willkommen</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et</div>
        <div id=left class=column><h2>Navigation</h2>Link #1<br>Link #2<br>Link #3<br></div>
        <div id=right class=column>Right</div>
      </div>
      <div id=footer>Footer</div>
     </body>
    </html>
    
    Code:
    body {
     min-width: 630px;   /* 2x (LC fullwidth +
                  CC padding) + RC fullwidth */
    }
    #container {
     padding-left: 200px;  /* LC fullwidth */
     padding-right: 190px; /* RC fullwidth + CC padding */
    }
    #container .column {
     position: relative;
     float: left;
    }
    #center {
     padding: 0px 20px;  /* CC padding */
     width: 100%;
    }
    #left {
     width: 180px;     /* LC width */
     padding: 0 10px;    /* LC padding */
     right: 240px;     /* LC fullwidth + CC padding */
     margin-left: -100%;
    }
    #right {
     width: 130px;     /* RC width */
     padding: 0 10px;    /* RC padding */
     margin-right: -190px; /* RC fullwidth + CC padding */
    }
    #footer {
     clear: both;
     text-align: center;
     padding-top: 15px; 
    }
    
    /*** IE Fix ***/
    * html #left {
     left: 150px;      /* RC fullwidth */
    }
    
    /*** Equal-height columns ***/
    #container {
     overflow: hidden;
    }
    #container .column {
     padding-bottom: 20010px; /* X + padding-bottom */
     margin-bottom: -20000px; /* X */
    }
    #footer {
     position: relative;
    }
    
    Danke nochmal

    Gruß
    Sascha
     
Die Seite wird geladen...

Flexible Div Boxen - Ähnliche Themen

Forum Datum
flexibles Internet mit Dyndns Windows XP Forum 13. Feb. 2010
Flexible Renamer - Dateien nach Attributänderung weg? Windows XP Forum 25. Juni 2006
Flexibles Cat5 Patch Kabel auflegen? Netzwerk 3. Apr. 2005
WiFi Boxen einrichten Windows 10 Forum 11. Dez. 2015
USB-Tastatur an 2 TV-Boxen betreiben. Hardware 13. Feb. 2015