Chris: XHTML mit 4 Spalten und 3 Zeilen

SELF-Forum

XHTML mit 4 Spalten und 3 Zeilen

Chris
– Informationen zu den Bewertungsregeln

Hallo Zusammen,

ich habe das Problem, dass ich ein Template mit XHTML und 4 Spalten und ca 3 Zeilen erstellen möchte.
Auf meinem Papier schaut das ganze so aus:

--------------------------
| 1  |  2 |       3  |  4 |
|    |---------------|    |
|    |  5 |    6     |    |
|    |    |          |    |
|----|    |          |----|
|    |    |          |    |
|    |    |          |    |
|  7 |----|          |    |

8 9

Die Divs 1,2,3,4,5 sollen fest gefixed sein und sich nicht verlängern lassen,
die DIVs 7,8,9 sollen sich am Boden befinden und nach oben verlängern sofern DIV 6 (Inhalt) sich nach unten verlängert.

Ist dies eigentlich möglich oder habe ich da allgemein einen Denkfehler, in dem bisherigen Code von mir funktioniert es jedenfalls nicht.

Grüße
Chris

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layout mit 4 Spalten und 3 Zeilen

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Chris,

    oder habe ich da allgemein einen Denkfehler, in dem bisherigen Code von mir funktioniert es jedenfalls nicht.

    klar, in Zeile 174 ist der Denkfehler. Das geht so nicht. Immerhin brauchst Du für die Darstellung CSS und nicht (nur) XHTML!

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. XHTML mit 4 Spalten und 3 Zeilen

    Hans Wurst
    – Informationen zu den Bewertungsregeln

    Ist dies eigentlich möglich oder habe ich da allgemein einen Denkfehler, in dem bisherigen Code von mir funktioniert es jedenfalls nicht.

    Wie stelltst du dir unsere Hilfe vor?
    Du lieferst uns weder Code, noch sonst was außer Anforderungen.

    Fang langsam an, und steigere dich, bis dein Layout steht, sorry aber ohne Info von dir, kann dir hier keiner helfen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. XHTML mit 4 Spalten und 3 Zeilen

      Chris
      – Informationen zu den Bewertungsregeln

      Oh Sorry total vergessen.

        
<!DOCTYPE html  
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/DE"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml"  
  xml:lang="de" lang="de">  
  
<html>  
<head>  
<link href="style.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
  
<!--header start -->  
<div id="header">  
  <div class="left"></div>  
  <div class="eye"></div>  
  <div class="center"></div>  
  <div class="right"></div>  
 </div>  
<!--header end -->  
  
<!--header start -->  
<div id="middle">  
  <div class="eye"></div>  
  <div class="center"></div>  
  <div class="fill"></div>  
 </div>  
  
 <div id="bottom">  
  <div class="left"></div>  
   <div class="eye"></div>  
    <div class="right"></div>  
</div>  
  
  
</body>  
</html>

      /* CSS Document */  
  
body{  
	padding:0;  
	margin:0;  
	color:#000000;  
background-color:#000;  
}  
div, h1, h2, p, form, label, input, textarea, img, span{  
	margin:0; padding:0;  
}  
  
ul{  
	margin:0;  
	padding:0;  
	list-style-type:none;  
}  
.spacer{  
	clear:both;  
	font-size:0px;  
	line-height:0px;  
}  
/*------------------------------------------------body---------------------*/  
  
#header{  
	width:1440px;  
	height:368px;  
	background-color:#000;  
	padding:0 0 0 0;  
	margin:0 auto;  
	position:relative;  
}  
  
#header div.left{  
	width:250px;  
	height:926px;  
	background:url(images/bg_top_left.jpg) 0 0 no-repeat;  
	padding:0 0 0 0;  
	margin:0 auto;  
	float:left;  
	position:relative;  
	  
}  
  
#header div.eye{  
	width:290px;  
	height:368px;  
	background:url(images/bg_top_eye.jpg) 0 0 no-repeat;  
	padding:0 0 0 0;  
	margin:0 auto;  
	float:left;  
	position:relative;  
}  
  
#header div.center{  
	width:530px;  
	height:368px;  
	background:url(images/bg_top_center.jpg) 0 0 no-repeat;  
	padding:0 0 0 0;  
	margin:0 auto;  
	float:left;  
	position:relative;  
}  
  
#header div.right{  
	width:370px;  
	height:926px;  
	background:url(images/bg_top_right.jpg) 0 0 no-repeat;  
	padding:0 0 0 0;  
	margin:0 auto;  
	float:right;  
	position:relative;  
}  
  
  
#middle {  
	width:100%;  
	height:100%;  
	padding:0 0 0 0;  
	margin:0 0;  
	position:relative;  
}  
  
#middle div.eye{  
	width:121px;  
	height:478px;  
	background:url(images/bg_middle_eye.jpg) 0 0 no-repeat;  
	padding:0 0 0 0;  
	margin:0 0;  
	float:left;  
	position:relative;  
}  
  
#middle div.center{  
	width:699px;  
	background:url(images/bg_middle_center.jpg) 0 0 repeat-y;  
	padding:0 0 0 0;  
	margin:0 0;  
	float:left;  
	position:relative;  
}  
  
  
  
#bottom {  
	width:371px;  
	height:255px;  
	background:url(images/bg_bottom_left.jpg) 0 0 repeat-y;  
	padding:0 0 0 0;  
	margin:0 auto;  
	float:left;  
	clear:both;  
}  
  
#bottom div.left{  
	width:250px;  
	height:255px;  
	background:url(images/bg_bottom_left.jpg) 0 0 repeat-y;  
	padding:0 0 0 0;  
	margin:0 0;  
	float:left;  
}  
  
#bottom div.eye{  
	width:121px;  
	height:255px;  
	background:url(images/bg_bottom_eye.jpg) 0 0 repeat-y;  
	padding:0 0 0 0;  
	margin:0 0;  
	float:left;  
}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. XHTML mit 4 Spalten und 3 Zeilen

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber Chris,

        <body>

        <!--header start -->
        <div id="header">
          <div class="left"></div>
          <div class="eye"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
        <!--header end -->

        <!--header start -->
        <div id="middle">
          <div class="eye"></div>
          <div class="center"></div>
          <div class="fill"></div>
        </div>

        <div id="bottom">
          <div class="left"></div>
           <div class="eye"></div>
            <div class="right"></div>
        </div>

        </body>

          
Das ist ja eine üble <div>-Suppe. Bist Du Dir sicher, dass das so seinen Sinn hat? Müssen es wirklich <div>-Elemente sein? Je nach geplantem Inhalt tut es nämlich auch eine <ul> oder ein <p>, manchmal sogar ein simples <span> in einem übergeordneten Block-Element.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. XHTML mit 4 Spalten und 3 Zeilen

          Chris Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Also die DIVs stellen bisher nur das Design da.
          Ich habe mal die URL der alten Page drangeheftet, welche noch im TD-Style basiert, aber von diesem möchte ich dann doch gerne weg

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  3. XHTML mit 4 Spalten und 3 Zeilen

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Auf meinem Papier schaut das ganze so aus:

    | 1  |  2 |       3  |  4 |
    |    |---------------|    |
    |    |  5 |    6     |    |
    |    |    |          |    |
    |----|    |          |----|
    |    |    |          |    |
    |    |    |          |    |
    |  7 |----|          |    |

    8 9

    Die Divs 1,2,3,4,5 sollen fest gefixed sein und sich nicht verlängern lassen,
    die DIVs 7,8,9 sollen sich am Boden befinden und nach oben verlängern sofern DIV 6 (Inhalt) sich nach unten verlängert.

    Grundidee für ein solches Zeitungsseitenlayout:

    • eine obere Richtschnur für die fix oben angehefteten Schnipsel und eine untere Richtschnur für die fix unten angehefteten Schnipsel
    • dazwischen der Inhaltsbereich mit einer Mindesthöhe, der die obere und untere Richtschnur auseinanderdrückt

    Entwurf:

      
<!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">  
<head>  
<title>Zeitungsseitenlayout</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<style type="text/css">  
* {margin:0; padding:0;}  
body {background-color:#5A5D5A;}  
#zeitungsseite {width:1000px; margin:auto; background-color:#C6C3C6;}  
#obereRichtschnur {position:relative}  
#spalte1 {position:absolute; top:0; left:0; width:150px; height:300px; background-color:#00FFAD;}  
#spalte2 {position:absolute; top:0; left:150px; width:150px; height:150px; background-color:#FF7D00;}  
#spalte3 {position:absolute; top:0; left:300px; width:550px; height:150px; background-color:#AD00FF;}  
#spalte4 {position:absolute; top:0; right:0; width:150px; height:300px; background-color:#00AEAD;}  
#spalte5 {position:absolute; top:150px; left:150px; width:150px; height:300px; background-color:#FF00FF;}  
#spalte6Inhalt {padding-top:150px; margin-left:300px; width:550px; min-height:400px; background-color:#FFDF00;}  
#untereRichtschnur {position:relative;}  
#spalte7 {position:absolute; bottom:0; left:0; width:150px; background-color:#7B00FF;}  
#spalte8 {position:absolute; bottom:0; left:150px; width:150px; background-color:#00E3FF;}  
#spalte9 {position:absolute; bottom:0; right:0; width:150px; background-color:#00FF00;}  
</style>  
<!--[if IE]>  
<style>  
#spalte6Inhalt {height:400px;} /*min-height Ersatz für IE*/  
#untereRichtschnur {width:100%;} /*hasLayout für IE*/  
</style>  
<![endif]-->  
</head>  
<body>  
<div id="zeitungsseite">  
 <div id="obereRichtschnur">  
  <div id="spalte1">Spalte 1</div>  
  <div id="spalte2">Spalte 2</div>  
  <div id="spalte3">Spalte 3</div>  
  <div id="spalte4">Spalte 4</div>  
  <div id="spalte5">Spalte 5</div>  
 </div>  
 <div id="spalte6Inhalt">Spalte 6</div>  
 <div id="untereRichtschnur">  
  <div id="spalte7">Spalte 7<br />Spalte 7</div>  
  <div id="spalte8">Spalte 8</div>  
  <div id="spalte9">Spalte 9<br />Spalte 9<br />Spalte 9</div>  
 </div>  
</div>  
</body>  
</html>

    Bitte hierzu lesen:
    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
    http://www.satzansatz.de/cssd/onhavinglayout.html

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln