tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
430
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 20.07.08 00:53 #1
    chris4712 chris4712 ist offline Mitglied Gold
    Registriert seit
    Jan 2005
    Beiträge
    233
    Guten Abend!

    Ich habe mal wieder ein Problem mit meinem Wunsch- Layout.
    Ich möchte ein drei zeiliges Layout was die komplette Browserhöhe benutzt.
    Die erste Zeile soll 40PX hoch sein. Die dritte Zeile soll 350PX hoch sein. Die mittlere Zeile soll eine Variable Höhe haben (ggf. Vertikalen Scrollbar wenn der Inhalt zu lang ist).

    Soweit so gut. Wenn ich den IE in Quirks Modus bringe, geht es. Nur dann geht mein "Wunschmenü" (http://www.cssplay.co.uk/menus/pro_drop2.html) nicht mehr.

    Vollständigkeitshalber hier noch mein bisheriger Code:
    HTML-Code:
      <div id="Page">
   <div id="Menu">   
   Menu
   </div>
 
   <div id="SelectArea">
    Select Area
   </div>  
 
   <div id="DetailArea">
    Detail Area
   </div>
  </div>
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

    html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}
#Menu {
 background-color: Red;
 
 height: 40px;
}
#SelectArea {
 background-color: Lime;
 overflow: scroll;
 position: absolute;
 
 top: 0px;
 bottom: 350px;
 height: auto;
}
 
#DetailArea {
 background-color: Aqua;
 
 height: 350px;
 width: 100%;
 
 position: absolute;
 bottom: 0px;
}
     
  2. 20.07.08 02:09 #2
    Maik Tutorials.de Gastzugang
    Hi,

    in diesem Fall müsstest du auf das expression()-Feature des IE zurückgreifen, das aber aktiviertes Javascript im Browser voraussetzt:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_chris4712</title>
 
<style type="text/css">
<!--
html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          border: 0;
          padding: 0;
          overflow: hidden;  
}
 
#Menu {
          position: absolute;
          top: 0;                       
          right: 0;               
          left: 0;                
          height: 40px;                
          padding: 0;                
          overflow: hidden;       
          background: red;
  /* nur für IE: */
          width: 100%;
}
 
#SelectArea {
          position: absolute;
          top: 40px;                
          right: 0;                
          bottom: 350px;                
          left: 0;                
          overflow: auto;                
          background: lime;
  /* nur für IE: */
          width: 100%;
          height: expression((document.body.clientHeight - 390) + "px");
                                 /* top-Wert + bottom-Wert = 390 */
}
 
#DetailArea {
          position: absolute;
          rightt: 0;                
          bottom: 0;        
          left: 0;                
          height: 350px;               
          padding: 0;                
          overflow: hidden;        
          background: aqua;
  /* nur für IE: */
          width: 100%;
}
-->
</style>
</head>
 
<body>
 
<div id="Menu">
  Menu
</div>
 
<div id="SelectArea">
  SelectArea
  <!-- Ab hier wird der Inhalt zunächst auskommentiert -->
  <!--
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  -->
</div>
 
<div id="DetailArea">
  Detail Area
</div>
 
</body>
</html>
    mfg Maik
     
  3. 20.07.08 13:46 #3
    chris4712 chris4712 ist offline Mitglied Gold
    Registriert seit
    Jan 2005
    Beiträge
    233
    Hallo Maik,

    vielen Dank für deine Lösung!
    Das expression()-Feature kannte ich noch gar nicht.

    Musste jedoch noch eine kleine Änderung machen:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12

    #Menu {
         [COLOR=red]/*position: absolute;*/[/COLOR]
          top: 0;                       
          right: 0;               
          left: 0;                
          height: 40px;                
          padding: 0;                
          overflow: hidden;       
          background: red;
  /* nur für IE: */
          width: 100%;
}

    Sonst geht das Menü wieder nicht
    Dürfte jedoch keine Auswirkung haben. Oder?
    Gruß

    Christian
     
  4. 20.07.08 13:58 #4
    Maik Tutorials.de Gastzugang
    Die absolute Positionierung geht schon in Ordnung. Vielmehr muß hier die overflow:hidden-Deklaration entfernt und im Gegenzug eine Schichtpositionierung eingerichtet werden:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12

    #Menu {
          position: absolute;
          top: 0;                       
          left: 0;                
          right: 0;                
          height: 40px;                
          padding: 0;                
          [B]/*overflow: hidden;*/[/B] /* auskommentiert = deaktiviert */
  /* nur für IE: */
          width: 100%;
          [B]z-index:10;[/B] /* Schichtpositionierung */
}
    mfg Maik
     
  5. 20.07.08 14:02 #5
    chris4712 chris4712 ist offline Mitglied Gold
    Registriert seit
    Jan 2005
    Beiträge
    233
    ahh, OK.
    Vielen dank

    Gruß
    Christian
     
« kleines Problem mit CSS | Background "wächst" nicht mit »

Ähnliche Themen

  1. 3 Zeilen Layout mit Content über den 3 Zeilen
    Von Moe078 im Forum CSS
    Antworten: 8
    Letzter Beitrag: 09.02.10, 17:44
  2. 3 Zeilen Layout. Zeile in der Mitte soll den Rest einnehmen.
    Von NetPerformance im Forum CSS
    Antworten: 2
    Letzter Beitrag: 05.09.08, 20:59
  3. CSS-Layout aus drei Zeilen, dritte soll immer unten bleiben
    Von elecfuture im Forum CSS
    Antworten: 9
    Letzter Beitrag: 31.07.06, 15:23
  4. Frame Layout oder Table Layout?
    Von steff aka sId im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 09.03.04, 15:01
  5. document.write - Zeilen über bereits geschriebene Zeilen schreiben
    Von Sven Petruschke im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 14.07.03, 08:37