tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
311
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 23.01.07 13:14 #1
    godfather_al godfather_al ist offline Mitglied Bronze
    Registriert seit
    Jan 2007
    Beiträge
    41
    Hallo zusammen,

    ich bin bei einer Testseite und komme leider nicht weiter, HTML und CSS - Dokumente habe ich Euch unten eingefügt. Meine Frage ist, was muss ich im Code ändern, damit das zweite Menü (div #kopf2 genannt) genau über dem Inhalt und nicht nach links versetzt dazu erscheint und nicht mehr scrollt ?

    Vielen Dank vorab für Euere Hilfe.

    Viele Grüße
    Godfather


    HTML-Dokument:
    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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

    <!-- Put IE into quirks mode -->
<!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">
 
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>godfathers Testseite</title>
  <style type="text/css"> @import url(layout_neu.css);</style>
</head>
 
 
<body>
    
    <body style="overflow-x: hidden; overflow-y: hidden">
 
<body style="padding : 0px; 
margin : 0px; 
height : 100% ; 
width : 100% ; 
overflow : auto;">
 
    <div id="kopf"><h1>Godfathers Testseite für ganz Deutschland</h1></div>
 
    <div id="kopf2"><h1>zweites Menu</h1></div>
    
    <div id="navigation">
    <ul>
      <li><a href="#">Uebersicht </a></li></br>
      <li><a href="#">Menu 1 </a></li></br>
      <li><a href="#">Menu 2 </a></li></br>
      <li><a href="#">Menu 3 </a></li></br>
      <li><a href="#">Menu 4 </a></li></br>
      <li><a href="#">Menu 5 </a></li></br>
      <li><a href="#">Menu 6 </a></li></br>
    </ul>
    </div>
 
    <div id="inhalt"><h1>Inhalt</h1>
      <p>Willkommen bei Godfathers Testseite für ganz Deutschland.</br></br></br></br></br></br>
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest 
 
testext testtest testext testtest testext testtest testext testtest testext testtest testext testtest testext 
 
testtest testext testtest testext testtest testext </br></br></p>
    </div>
 
  
</body>
 
</html>


    CSS-Dokument:


    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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

    body, html, #navigation, #container, #inhalt { 
margin : 0;
padding : 0;
} 
html { 
height : 100%;
max-height : 100%;
padding : 0;
margin : 0;
border : 0;
background : #fff;
font-size : 100%;
font-family : georgia, palatino linotype, times new roman, serif;
overflow : hidden;
} 
body { 
height : 100%;
max-height : 100%;
overflow : hidden;
padding : 0;
margin : 0;
border : 0;
font : 100.01% sans-serif;
margin : auto;
background-color : #e6dccf;
} 
#centerBox { 
width : 100%;
height : 100%;
border : 1px solid #000;
overflow : auto;
} 
#kopf { 
position : fixed;
width : 100%;
height : 70px;
min-height : 70px;
border : 0 solid #000;
background-color : rgb(207, 48, 207);
color : #e6dccf;
text-align : left;
z-index : 1;
overflow : auto;
} 
#kopf2 { 
position : fixed;
width : 80%;
height : 30px;
min-height : 30px;
left : 20%;
top : 70px;
border : 0 solid #000;
background-color : rgb(207, 150, 207);
color : #e6dccf;
text-align : left;
z-index : 1;
overflow : auto;
} 
#navigation { 
position : fixed;
margin-top : 0;
width : 20%;
min-width : 170px;
height : 100%;
border : 0 solid #000;
background-color : #e6b873;
color : #3054bf;
z-index : 3;
text-align : left;
} 
#inhalt { 
overflow : auto;
position : absolute;
z-index : 2;
top : 105px;
bottom : 0;
left : 20%;
right : 0;
width : 100%;
} 
* html #inhalt { 
top : 105px;
left : 20%;
right : 0;
bottom : 0;
height : 90%;
max-height : 90%;
width : 80%;
overflow : auto;
position : absolute;
z-index : 2;
border-left : 0 solid #fff;
border-right : 0 solid #fff;
} 
#inhalt p { 
padding : 0;
} 
#inhalt h1 { 
padding : 0;
} 
p { 
margin : 25px 25px 0 25px;
} 
p1 { 
font-size : 1em;
} 
h1 { 
margin : 0 25px;
padding : 25px 0 0;
font-size : 1.3em;
} 
#navigation ul { 
list-style-type : none;
margin : 25px 0 0 0;
padding : 0;
} 
#navigation a:link, #navigation a:visited { 
text-decoration : none;
color : #806640;
display : block;
font-weight : bold;
padding : 2px;
border-left : 23px solid #e6b873;
background-color : #e6b873;
color : #3054bf;
} 
#navigation a:hover { 
color : #3054bf;
background-color : #e6dccf;
border-left : 23px solid white;
color : #806640;
}
     
  2. 23.01.07 13:25 #2
    Maik Tutorials.de Gastzugang
    Hi,

    probier es mal hiermit:

    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

    #kopf2 {
position : absolute;
width : 80%;
min-height : 30px;
height:auto !important;
height : 30px;
left : 20%;
top : 70px;
border : 0 solid #000;
background-color : rgb(207, 150, 207);
color : #e6dccf;
text-align : left;
z-index : 1;
}
#navigation {
position : absolute;
top : 70px;
width : 20%;
min-width : 170px;
height : 100%;
border : 0 solid #000;
background-color : #e6b873;
color : #3054bf;
z-index : 3;
text-align : left;
}
#inhalt {
overflow : auto;
position : absolute;
z-index : 2;
top : 120px;
bottom : 0;
left : 20%;
right : 0;
width : 100%;
}
* html #inhalt {
top : 120px;
left : 20%;
right : 0;
bottom : 0;
height : 90%;
max-height : 90%;
width : 80%;
overflow : auto;
position : absolute;
z-index : 2;
border-left : 0 solid #fff;
border-right : 0 solid #fff;
}

    und verwende das body-Element nur einmal in dem Dokument:

    Code :
    1

    <body style="padding:0px;margin:0px;height:100%;width:100%;overflow:auto;overflow-x:hidden;overflow-y:hidden">
     
  3. 23.01.07 15:20 #3
    godfather_al godfather_al ist offline Mitglied Bronze
    Registriert seit
    Jan 2007
    Beiträge
    41
    Hi,

    vielen Dank für die geänderten Zeilen, aber leider hat das bei mir keine Änderung bewirkt, zum Anschauen nehme ich derzeit den IE7, kann es sein dass es am Browser liegt ?

    Viele Grüße
    Godfather


    EDIT: Sorry jetzt gehts, vielen Dank sieht super aus so !
    Geändert von godfather_al (23.01.07 um 15:34 Uhr)
     
« Mehrspaltiges Layout: Probleme mit min-height:100% bzw height:100% | Opacity über Flash-Elemente »

Ähnliche Themen

  1. Dynamics Frage / allg. Frage
    Von dixone im Forum Cinema 4D
    Antworten: 7
    Letzter Beitrag: 01.09.10, 23:00
  2. Frage-Antwort-Frage Spiel...
    Von Vitus im Forum Fun-Forum
    Antworten: 15
    Letzter Beitrag: 26.08.08, 20:14
  3. [Frage:] Frage zu Passgen
    Von Liftboy im Forum PHP
    Antworten: 6
    Letzter Beitrag: 04.08.05, 19:03
  4. MySQL Tabellen verknüpfen (Anfänger Frage) + Frage zu Get
    Von benurb im Forum PHP
    Antworten: 5
    Letzter Beitrag: 01.04.05, 13:00
  5. Frage zu DW4.0
    Von Jack the Ripper im Forum HTML-Editoren
    Antworten: 4
    Letzter Beitrag: 16.03.03, 10:49