tutorials.de Buch-Aktion 02/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
2818
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 01.03.07 21:38 #1
    Giggles91 Giggles91 ist offline Rookie
    Registriert seit
    Sep 2006
    Beiträge
    8
    Hallo Leute

    Ich kriegs einfach nicht hin mein CSS layout so zu coden das das Submenu 100% hoch wird! Ich hab nun schon diverse Beiträge zu dem Thema gelesen, finde den fehler aber einfach nicht... Könnt ihr mir helfen?

    Hier der CSS-Code:
    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

    body {
 
width:100%;
 
margin:0 auto;
 
text-align:center;
 
}
 
#header {
 
/* DIVformatierung */
 
overflow:hidden;
height:50px;
width:100%;
display:inline-block;
background-color:#FFFFFF;
 
/* Textformatierungen */
 
padding-top:10px;
text-align:center;
font-size:28px;
font-family:Arial;
font-weight:bold
 
}
 
#menu {
 
/* DIVformatierung */
 
overflow:hidden;
display:inline-block;
height:70px;
width:100%;
background-image:url(../graphics/header_background.jpg);
border-bottom: 1px solid black;
 
/* Textformatierungen */
 
text-align:left;
 
}
 
#content {
 
/* DIVformatierung */
 
overflow:hidden;
display:inline-block;
height:100%;
width:79.9%;
float:left;
 
/* Textformatierungen */
 
text-align:left;
 
}
 
#sub-section{
 
/* DIVformatierung */
 
float:right;
margin:0px;
padding:0px;
right:0px;
bottom:0px;
visibility:visible;
background-image:url(../graphics/sub-section_background.jpg);
background-repeat:repeat-y;
background-color:#004F00;
width:20%;
height:100%;
 
/* Textformatierungen */
 
text-align:left;
color:#FFFFFF;
 
}
 
#div-text{
 
padding:25px;
 
}
 
#footer {
 
/* DIVformatierung */
 
overflow:hidden;
display:inline-block;
height: 50px;
vertical-align:bottom;
bottom:0px; 
left:0px; 
right:0;
border-top:1px solid black;
widt:100%;
clear:left;
 
/* Textformatierungen */
 
text-align:left;
 
}

    Und hier das HTML:
    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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/layout.css" rel="stylesheet" type="text/css">
</head>
 
<body>
 
<div id="header">New Project</div>
 
<div id="menu">_</div>
 
<div id="sub-section">
  <p id="div-text">Die Klasse 1L </p>
</div>
 
<div id="content"><p id="div-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut lacus. Mauris in elit. Praesent vehicula lobortis orci. Fusce ac turpis ac sapien molestie aliquam. Sed sit amet augue. Integer posuere lorem at libero. Quisque et sem non magna aliquet rhoncus. Mauris eros odio, mattis vestibulum, facilisis et, consequat eu, dui. Nulla ac libero eu metus sollicitudin dapibus. Donec vitae metus. Mauris nec leo id risus sodales elementum. Fusce ornare felis. Pellentesque fringilla hendrerit arcu. Nunc velit. Aliquam quis mauris eget pede gravida ultrices. Etiam varius nunc porttitor eros. Vivamus arcu. Phasellus ipsum sem, elementum in, elementum quis, porttitor eget, lacus. Sed interdum nisi vitae magna. In a nibh.
 
Fusce turpis. Donec feugiat. Aenean ultricies, est id eleifend posuere, enim orci varius sapien, vitae placerat justo dolor eget neque. Quisque congue porta dui. In hac habitasse platea dictumst. Praesent eros tellus, fermentum lobortis, semper et, commodo sit amet, ante. Sed diam. Quisque suscipit, urna porta rhoncus iaculis, nunc enim volutpat sem, ut ullamcorper massa massa tincidunt augue. Fusce congue, dui at blandit cursus, ante dolor cursus odio, non blandit dui erat et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sit amet est. Vivamus a nunc a felis ultrices egestas. Sed non urna. Nam id lectus. Nam in mi. Donec tristique. Ut ac odio faucibus lorem iaculis feugiat.</p> </div>
 
<div id="footer">Footer</div>
 
</body>
</html>

    Danke für jede Hilfe!
     
  2. 01.03.07 21:51 #2
    Maik Tutorials.de Gastzugang
    Hi,

    erweiter das Stylesheet mal mit folgender Regel:

    Code :
    1
2
3

    html, body {
height:100%;
}
    Siehe hierzu auch Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt? in den Webmaster-FAQ.
     
  3. 01.03.07 21:54 #3
    Giggles91 Giggles91 ist offline Rookie
    Registriert seit
    Sep 2006
    Beiträge
    8
    Super! Danke!

    Aber noch ein schönheitsfehler: Wieso muss ich nach unten scrollen um den footer zu sehen?
     
  4. 01.03.07 22:03 #4
    Maik Tutorials.de Gastzugang
    Das liegt derzeit an der "Konstruktion", in der die Höhenangaben für das DIV #header und #menu zum Anzeigebereich hinzuaddiert werden.

    Abhilfe könnte da mein Lösungsbeispiel in dem Thread div height=100% nur im IE? schaffen.
     
  5. 01.03.07 22:49 #5
    Giggles91 Giggles91 ist offline Rookie
    Registriert seit
    Sep 2006
    Beiträge
    8
    OK... wenn ich dieses wrapperteil konstruire dann siehts wieder ganz anders aus, aber ich mach wahrscheinlich falsch.

    CSS
    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
133
134
135

    html, body {
height:100%;
}
 
body {
 
width:100%;
 
margin:0 auto;
 
text-align:center;
 
}
 
#wrapper {
 
min-height: 100%;
height:auto !important;
height: 100%;
margin: 0 auto;
 
}
 
#header {
 
/* DIVformatierung */
 
top:0px;
overflow:hidden;
height:50px;
width:100%;
display:inline-block;
background-color:#FFFFFF;
 
/* Textformatierungen */
 
padding-top:10px;
text-align:center;
font-size:28px;
font-family:Arial;
font-weight:bold
 
}
 
#menu {
 
/* DIVformatierung */
 
overflow:hidden;
display:inline-block;
height:70px;
width:100%;
background-image:url(../graphics/header_background.jpg);
border-bottom: 1px solid black;
 
/* Textformatierungen */
 
text-align:left;
 
}
 
#content {
 
/* DIVformatierung */
 
overflow:hidden;
display:inline-block;
height:100%;
width:79.9%;
float:left;
 
/* Textformatierungen */
 
text-align:left;
 
}
 
#sub-section{
 
/* DIVformatierung */
 
float:right;
margin:0px;
padding:0px;
right:0px;
bottom:0px;
visibility:visible;
background-image:url(../graphics/sub-section_background.jpg);
background-repeat:repeat-y;
background-color:#004F00;
width:20%;
height:100%;
 
/* Textformatierungen */
 
text-align:left;
color:#FFFFFF;
 
}
 
#sub-section p,a,ul{
 
padding-left:35px;
 
}
 
#content p{
 
padding:25px;
 
}
 
#footer {
 
/* DIVformatierung */
 
overflow:hidden;
display:inline-block;
height: 50px;
vertical-align:bottom;
bottom:0px; 
left:0px; 
right:0;
border-top:1px solid black;
widt:100%;
clear:left;
background-color:#004F00;
 
/* Textformatierungen */
 
text-align:center;
color:#FFFFFF;
font-size:24px;
 
}

    HTML
    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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/layout.css" rel="stylesheet" type="text/css">
</head>
 
<body>
 
<div id="wrapper">
    <div id="header">New Project</div>
    
    <div id="menu">_</div>
    
    <div id="sub-section">
      <p>Die Klasse 1L </p>
    </div>
    
    <div id="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut lacus. Mauris in elit. Praesent vehicula lobortis orci. Fusce ac turpis ac sapien molestie aliquam. Sed sit amet augue. Integer posuere lorem at libero. Quisque et sem non magna aliquet rhoncus. Mauris eros odio, mattis vestibulum, facilisis et, consequat eu, dui. Nulla ac libero eu metus sollicitudin dapibus. Donec vitae metus. Mauris nec leo id risus sodales elementum. Fusce ornare felis. Pellentesque fringilla hendrerit arcu. Nunc velit. Aliquam quis mauris eget pede gravida ultrices. Etiam varius nunc porttitor eros. Vivamus arcu. Phasellus ipsum sem, elementum in, elementum quis, porttitor eget, lacus. Sed interdum nisi vitae magna. In a nibh.
    
    Fusce turpis. Donec feugiat. Aenean ultricies, est id eleifend posuere, enim orci varius sapien, vitae placerat justo dolor eget neque. Quisque congue porta dui. In hac habitasse platea dictumst. Praesent eros tellus, fermentum lobortis, semper et, commodo sit amet, ante. Sed diam. Quisque suscipit, urna porta rhoncus iaculis, nunc enim volutpat sem, ut ullamcorper massa massa tincidunt augue. Fusce congue, dui at blandit cursus, ante dolor cursus odio, non blandit dui erat et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sit amet est. Vivamus a nunc a felis ultrices egestas. Sed non urna. Nam id lectus. Nam in mi. Donec tristique. Ut ac odio faucibus lorem iaculis feugiat.</p> </div>
    
    <div id="footer">Footer</div>
</div>
 
</body>
</html>
     
  6. 01.03.07 22:57 #6
    Maik Tutorials.de Gastzugang
    Der Trick liegt darin, die senkrecht zu wiederholende Hintergrundgrafik sub-section_background.jpg in dem übergeordneten DIV #wrapper einzusetzen, und auf die 100%-Höhendefinition für die Spalten zu verzichten.

    Vergleiche hierzu das Stylesheet in meinem empfohlenen Demo und studiere mal die Konstruktion des Layouts im Detail.
     
  7. 03.03.07 12:49 #7
    Giggles91 Giggles91 ist offline Rookie
    Registriert seit
    Sep 2006
    Beiträge
    8
    Na gut, ich komme der sache etwas näher, glaub ich jedenfalls. Könntest du mir noch verraten wie ich die Hintergrundgrafik auf die Grösse der Subsection krieg, jetzt wo sie sich im wrapper befindet? oder sollte ich einfach die Schrift in der Sub-section Rechtsbündig machen?

    Aktueller Stand:

    http://www.giggles.lebanese.nl/New%2...html/index.htm
     
  8. 03.03.07 13:01 #8
    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

    #content {
 
        /* DIVformatierung */
 
        overflow:hidden;
        display:inline-block;
        [b]/*height:100%;*/[/b] /* auskommentiert = deaktiviert */
        width:79.9%;
        float:left;
 
        /* Textformatierungen */
 
        text-align:left;
 
}
 
#sub-section{
 
        /* DIVformatierung */
 
        float:right;
        margin:0px;
        padding:0px;
        right:0px;
        bottom:0px;
        visibility:visible;
        [b]/*background-color:#004F00;*/[/b] /* auskommentiert = deaktiviert */
        [b]width:200px;[/b] /* entspricht der Breite von sub-section_background.jpg */
        [b]/*height:100%;*/[/b] /* auskommentiert = deaktiviert */
        z-index:1;
 
        /* Textformatierungen */
 
        text-align:left;
        color:#FFFFFF;
 
}
     
  9. 03.03.07 14:58 #9
    Giggles91 Giggles91 ist offline Rookie
    Registriert seit
    Sep 2006
    Beiträge
    8
    Das ist zwar eine Verbesserung aber noch keine Lösung. Problem:

    Je nach auflösung sehe ich den Text in Sub-section nicht.

    Also wenn ich 800x600 einstelle, dann kommt der Content Text der Hintergrundgrafik in die Quere.
    Bei 1024x768 ist das Layout im Prinzip perfekt aber naja...
    Bei 1280x1024 verschwindet der Text schon im Content, da er ja weiss ist.
    Bei meiner aktuellen Auflösung von 1680x1050 sehe ich überhautb keine Text mehr!

    Ich weiss worans liegt. Die Subsection ist auf eine Breite von 20% festgelegt, der content bereich auf 79.9%, wenn die hintergrundgrafik nun eine absolute grafik
    von 200px beträgt dann geht sie bei geringer auflösung in den Content bereich und bei hoher auflösung gerät der text in der subsection in den content bereich...

    Doch: wie löse ich das Problem?

    Gleicher Link wie vorher...

    PS: Ich möchte den Text in der Sub-section nicht nach rechts ausrichten...
     
  10. 03.03.07 15:33 #10
    Maik Tutorials.de Gastzugang
    Und hier der nächste Vorschlag:

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

    #content {
 
        /* DIVformatierung */
 
        overflow:hidden;
        display:inline-block;
        margin-right: 200px;
 
        /* Textformatierungen */
 
        text-align:left;
        padding: 0;
}
    Zudem musst du noch in der ID #sub-section die rotmarkierte Breitenangabe entfernen:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    #sub-section{
 
    /* DIVformatierung */
 
    float:right;
    margin:0px;
    padding:0px;
    right:0px;
    bottom:0px;
    visibility:visible;
    /*background-color:#004F00;*/
    width:200px;
    [color=red]width:20%;[/color]
    /*height:100%;*/
 
    /* Textformatierungen */
 
    text-align:left;
    color:#FFFFFF;
}
     
  11. 04.03.07 20:38 #11
    Giggles91 Giggles91 ist offline Rookie
    Registriert seit
    Sep 2006
    Beiträge
    8
    Danke vielmals...

    Das Margin 200px ist nicht mal notwendig, es funktioniert auch ohne. Keine Ahnung wieso.

    Mfg
     
« Lücke zwischen Bild und Text | Tabelle mit scrollbarem bereich und Höhe dem Fenster angepasst. (css formatiert) »

Ähnliche Themen

  1. CSS-Layout Höhe ist größer als 100%
    Von Necro_nomicon im Forum CSS
    Antworten: 46
    Letzter Beitrag: 30.09.08, 16:53
  2. Layout 100% höhe & 100% Breite mit Rahmen
    Von staypunk im Forum CSS
    Antworten: 8
    Letzter Beitrag: 21.08.08, 16:25
  3. Layout mit 100% Höhe
    Von redbecks im Forum CSS
    Antworten: 2
    Letzter Beitrag: 06.05.08, 18:43
  4. Layout und div in passender Höhe
    Von wachteldonk im Forum CSS
    Antworten: 14
    Letzter Beitrag: 26.08.07, 11:51
  5. Divs Höhe/Spalten Layout
    Von thetrue im Forum CSS
    Antworten: 7
    Letzter Beitrag: 26.05.06, 16:34