Zu den Aufzeichnungen der tutorials.de-Live-Workshops
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
2740
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 19.09.05 17:33 #1
    online online ist offline Mitglied Gold
    Registriert seit
    May 2004
    Beiträge
    164
    Hallo,

    ich wollte gerade ein Template bauen, das im Prinzip aus drei Ebenen besteht (siehe unten).

    Ebene C umschließt alles,
    Ebene B soll den Text beinhalten, also wenn die größer wird, soll auch Ebene C größer werden. Aber Ebene B soll auch in Ebene C von oben bis unten gehen.

    Und Ebene A soll genau so groß sein, wie Ebene B.

    Leider funktioniert gerade das überhaupt nicht.

    Kann mir bitte jemand sagen, wie das funktioniert, bevor ich ganz den Überblick verlier.

    MFG

    Online
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken div height=100%-unbenannt-1.gif  
     
  2. 19.09.05 19:31 #2
    Avatar von Gumbo
    Gumbo Gumbo ist offline
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Vielleicht hilft dir die so genannte Faux-Columns-Technik bei der Lösung des Problems weiter.
     
    Markus Wulftange
  3. 19.09.05 22:07 #3
    Maik Tutorials.de Gastzugang
    Das CSS-Modell Equal-Height CSS Columns demonstriert ein 3-spaltiges Layout, das sich auch auf zwei Spalten 'reduzieren' lässt.
     
  4. 20.09.05 06:07 #4
    Maik Tutorials.de Gastzugang
    Hier der überarbeitete / reduzierte CSS-Code für ein 2-spaltiges Layout.

    (Quelle: http://www.redmelon.net/tstme/3cols2/)

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Equal-Height CSS Columns - Keeping it tall - redmelon.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
/* Optional Code */
body { color: #000; background-color: #fff; text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 86%; }
p  { padding: 0.5em; margin: 0; font-size: 1em; }
h1 { padding: 0.5em; margin: 0; font-size: 1.3em; font-weight: normal; }
h2 { padding: 0.5em; margin: 0; font-size: 1em; font-weight: bold; }
ul { padding-right: 1em; text-align: left; margin-bottom: 1em; }


.wrapper { min-width: 400px; }
          /* Allways good to have on full width liquid CSS layouts,
             google "min-width IE" for JS solutions there */

.wrapper { border: 1px solid black; margin: 0 -1px; }
          /* this is a border with marginal compensation to stop scroll bars */

/* Setup (This all looks neater when it isn't put on display!) */

.wrapper {
        width: 650px;               /* total width */
        margin: 0 auto;             
}

.outer {
        border-left-width: 300px;  /* left column width */
        border-left-color: #809bbe;   /* left column colour */

        border-right-width: 300px; /* right column width */
        border-right-color: #809bbe;  /* right column colour */

        background-color: #f5f5f5; /* center column colour */
}

.left {
        width: 300px;              /* left column width */
        margin-left: -300px;       /* _negative_ left column width */
}

.right {
        width: 300px;              /* right column width */
        margin-right: -300px;      /* _negative_ right column width */
}

/* Main code */

.outer { width: auto; border-left-style: solid; border-right-style: solid; }
.inner { margin: 0; width: 100%; }

.left { float: left; position: relative; z-index: 10; }
.right { float: right; position: relative; z-index: 11; }

.clear { clear: both; }

/* Mozilla code */
.outer > .inner { border-bottom: 1px solid transparent; }
.left { margin-right: 1px; }
.right { margin-left: 1px; }
-->
</style>

</head>
<body>

<div class="wrapper">

<div class="outer">
<div class="inner">

 <div class="left">
   <p>leftcolumn</p>
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
   </ul>
 </div>

 <div class="right">
   <p>rightcolumn</p>
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>item 5</li>
     <li>item 6</li>
     <li>item 7</li>
     <li>item 8</li>
     <li>item 9</li>
   </ul>
 </div>

 <div class="clear"></div>

</div>
</div>

</div>

</body>
</html>
    • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01
     
« aktive Links farblich markieren ?! | Side Menue immer im Vordergrund »

Ähnliche Themen

  1. div height 100%
    Von crashx im Forum CSS
    Antworten: 3
    Letzter Beitrag: 18.07.08, 10:01
  2. Mehrspaltiges Layout: Probleme mit min-height:100% bzw height:100%
    Von gunwald im Forum CSS
    Antworten: 0
    Letzter Beitrag: 22.01.07, 20:00
  3. IE Height 100%
    Von JackJones im Forum CSS
    Antworten: 15
    Letzter Beitrag: 11.10.06, 08:51
  4. height:100%
    Von Dark22 im Forum CSS
    Antworten: 13
    Letzter Beitrag: 18.09.06, 18:44
  5. min-height und IE
    Von a_d im Forum CSS
    Antworten: 2
    Letzter Beitrag: 08.01.05, 16:56