XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   3 spaltiges CSS Layout mit fixer Breite!? (http://xhtmlforum.de/showthread.php?t=52817)

atmosfear 22.07.2008 11:08

Grundlagen: 3 spaltiges CSS Layout mit fixer Breite!?
 
Hallo und schönen Vormittag zusammen!

Ich versuche gerade ein fertiges CSS-Layout auf meine Bedürfnisse anzupassen, schaffe
es aber irgendwie nicht. Hier der Quelltext:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style media="screen" type="text/css">
body {
        margin:0;
        padding:0;
        border:0;                                /* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#e6e0d6;
        min-width:955px;                /* Minimum width of layout - remove line if not required */
                                                        /* The min-width property does not work in old versions of Internet Explorer */
        font-size:90%;
        text-align:center;
}
#frame {
        width:955px;
        margin-right:auto;
        margin-left:auto;
        margin-top:0px;
        padding:0px;
        text-align:left;
}
#header {
        clear:both;
        float:left;
        width:100%;
}
#header {
        border-bottom:1px solid #000;
}
.colmask {
        position:relative;                /* This fixes the IE7 overflow hidden bug */
        clear:both;
        float:left;
        width:100%;                                /* width of whole page */
        overflow:hidden;                /* This chops off any overhanging divs */
}
.threecol {
        background:#eee;                /* right column background colour */
}
.threecol .colmid {
        right:158px;                        /* width of the right column */
        background:#b9aa94;                /* center column background colour */
}
.threecol .colleft {
        right:639px;                        /* width of the middle column */
        background:#CC9900;                /* left column background colour */
}
.threecol .col1 {
        width:46%;                                /* width of center column content (column width minus padding on either side) */
        left:102%;                                /* 100% plus left padding of center column */
}
.threecol .col2 {
        width:21%;                                /* Width of left column content (column width minus padding on either side) */
        left:31%;                                /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
        width:21%;                                /* Width of right column content (column width minus padding on either side) */
        left:85%;                                /* Please make note of the brackets here:
                                                        (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
.colright,
.colmid,
.colleft {
        float: left;
        width: 100%;                        /* width of page */
        position: relative;
}
.col1,
.col2,
.col3,
.col10,
.col20 {
        float: left;
        position: relative;
        padding: 0 0 1em 0;                /* no left and right padding on columns, we just make them narrower instead
                                                        only padding top and bottom is included here, make it whatever value you need */
        overflow: hidden;
}
</style>
</head>
<body>
<div id="frame">
  <div class="colmask threecol">
    <div class="colmid">
      <div class="colleft">
        <div class="col1">
          <div id="header">header</div>
          <div class="col10"> left submenu </div>
          <div class="col20">Lorem ipsum dolor sit amet, pede vestibulum, eu ut leo sed, sit eros nec amet sollicitudin, at auctor eget libero nulla sit, sodales ac eu. Pede arcu scelerisque aliquam, lacus magna odio, aenean nulla pretium pellentesque aliquam elementum placerat, morbi tellus volutpat mi lacus tellus, nibh nec nunc non per tellus. Vestibulum mattis ornare ac, eu tortor amet ut, dignissim luctus, tortor mauris semper vehicula, mattis aliquam metus. Erat quo, nulla lorem elementum integer interdum velit, augue fermentum massa massa arcu, sit consequat sem ridiculus. Wisi non nec vitae, turpis sit aliquam suspendisse orci. Sit sit elit. Vitae convallis pellentesque et sollicitudin pharetra urna, venenatis tempus porttitor sit wisi mattis. Non laoreet lacus, in ipsum orci potenti viverra vulputate libero, nulla aenean sit, natoque est leo ad. Donec nunc commodo elementum, posuere felis feugiat egestas lacus.

Sed faucibus integer turpis facilisis risus, scelerisque laborum justo urna, libero lacinia gravida. Urna vestibulum rhoncus, sit ipsum purus suspendisse justo, lorem viverra nam elit tempus est, vitae ullamcorper. Aut tellus mus fusce ut elit ut, lorem sed nibh sociosqu. Enim semper justo eu rutrum, a ornare eros vestibulum, aliquam turpis lorem, est ea pede, sodales diam. Libero sit quis, neque accusamus gravida pellentesque donec interdum amet. Pede habitasse ipsum dui proin nulla lorem. Nulla mi erat est interdum proin dapibus, condimentum viverra nulla, arcu id quis atque ac. Nec vulputate at ac diam cum ultrices. In magna lorem tristique volutpat praesent, nibh adipiscing eu eget nec eget, nulla nibh fusce leo et voluptatem, tincidunt at vestibulum vitae iaculis amet, venenatis proin occaecat sociis congue. Nibh etiam suscipit. Elit elementum, erat lorem dui amet tristique, maecenas eros malesuada in cras nulla. Porttitor erat.

Luctus in volutpat sagittis dolor diam, ut lorem ante urna mollis ut metus, mauris nibh interdum vestibulum non vel mattis, pharetra veniam in lobortis quis eleifend. Egestas lectus dignissim sem tempus tincidunt libero. Aliquet in auctor ad, ipsum dolor per eget condimentum, cras ut nulla tempore lorem ultricies, amet sit arcu adipiscing. Eu class, et blandit at viverra ac et, platea praesent, ante ipsum quisque in cursus, neque in libero in dignissim. Odio sodales mi.</div>
        </div>
        <div class="col2">left menu</div>
        <div class="col3">right menu</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Ich möchte den mittleren Bereich gerne 639 Pixel breit und die beiden äusseren jeweils
158 Pixel breit machen (daraus ergibt sich dann einen Gesamtbreite von 955 Pixel, was für 1024 optimal sein sollte)
Wie kann/muss ich die prozentuellen Angaben so anpassen, dass ich auf mein gewünschtes Ergebnis komme?
Der mittlere Content-Bereich muss noch einmal in einen Header und 2 Spalten, für Menü und Content unterteilt werden...

DANKE!
atmosfear

Non3 23.07.2008 11:27

Ich würde vll. mir noch das ein oder andere CSS tutorial ansehen.

Du hast 8 DIV's ineinander verschachtelt, 2x eine #header id, dem body tag 100% width gegeben, dann dem body-tag noch eine min-width von 955px... Also ich glaube da scheitert es noch am grundsätzlichen.

Vll solltest du ein solch einfaches layout einfach mal versuchen selbst zu schreiben, wenn du sehr wenig ahnung hast - anstatt ein fertiges layout nehmen und dies anzupassen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:46 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023