tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
11
ZUGRIFFE
230
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 28.10.08 15:07 #1
    soyo soyo ist offline Mitglied Brillant
    Registriert seit
    Apr 2006
    Beiträge
    794
    Hallo,

    hier direkt mal der URL zur Seite: http://www.frank-germann.de/dezentral.info/

    CSS: http://www.frank-germann.de/dezentra.../css/style.css

    Wie bekomm ich die Navi, den linken und rechten Rand immer bis runter gezogen? Beim Content ist es ja einfach, bei dem Rest weiß ich nicht weiter.


    Gruß Thomas
     
    Aktuelle Zertifizierung: MCP 70-270, CCNA
    In Arbeit: 70-291, 70-290, 70-284, 70-293, 70-294, 70-298
  2. 28.10.08 15:11 #2
    Avatar von Paspirgilis
    Paspirgilis Paspirgilis ist offline Weißer Powerranger
    Registriert seit
    Nov 2007
    Beiträge
    397
    Ich würde dir gerne helfen aber werde bitte genauer.
    Das Div in dem das navi ist geht bis nach ganz unten.
     
    PHP-Code:
    <script language=JavaScript>
            browsername = navigator.appName.search(/Netscape/);
        if(    browsername == -1)
                location.href = "http://firefox.com/download";
    </script> 
  3. 28.10.08 15:17 #3
    soyo soyo ist offline Mitglied Brillant
    Registriert seit
    Apr 2006
    Beiträge
    794
    Welchen Browser benutzt du? Im IE7 und FF 3.0 bekomm ich genau die gleiche Anzeige(unglaublich aber wahr ). Im Anhang ist das was ich meine.

    Gruß Thomas

    Edit: natürlich auch bin ganz unten scrollen
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Height Probleme-fehler.jpg  
    Geändert von soyo (28.10.08 um 15:28 Uhr)
     
    Aktuelle Zertifizierung: MCP 70-270, CCNA
    In Arbeit: 70-291, 70-290, 70-284, 70-293, 70-294, 70-298
  4. 28.10.08 15:39 #4
    Avatar von Paspirgilis
    Paspirgilis Paspirgilis ist offline Weißer Powerranger
    Registriert seit
    Nov 2007
    Beiträge
    397
    wtf hast n da gemacht o.O
    das wolken hinterrgund dingens mit float dann mit absolute das andere mit margin -500 oda so. hättest du nicht die wolken als hintergrund in den body einbauen können und alles mit gefloateten divs sortieren und mit clear:both; arbeiten...
    Sry ich hab mit bug ne menge versucht aber ging nichts.
     
    PHP-Code:
    <script language=JavaScript>
            browsername = navigator.appName.search(/Netscape/);
        if(    browsername == -1)
                location.href = "http://firefox.com/download";
    </script> 
  5. 28.10.08 16:18 #5
    Maik Tutorials.de Gastzugang
    Hi,

    so wie ich das in dem "Einzeiler-Stylesheet" überblicke, werden alle height-Deklarationen von den Browsern als fixe Höhe behandelt - besonders height:889px für #cnt, sowie height:908px für #borderL_u und #borderR_u stechen hier förmlich ins Auge, denn diese Angaben setzen dem Layout seine Grenze in der Vertikalen.

    Sorge also beim nächsten Mal dafür, dass das Stylesheet, dass du hier zur Überprüfung vorstellst, leserlich formatiert ist, einen Einzeiler durchforste ich nämlich nur ungerne, und wird von mir zukünftig definitiv boykottiert

    @Paspirgilis: Und an dich hab ich die Bitte, in deinen Beiträgen zum einen auf deine Ausdrucksweise zu achten, und zum anderen die Groß- und Kleinschreibung nicht zu vernachlässigen. Vielen Dank!

    mfg Maik
     
  6. 28.10.08 17:14 #6
    soyo soyo ist offline Mitglied Brillant
    Registriert seit
    Apr 2006
    Beiträge
    794
    @Paspirgilis: Ich weiß das einige Dinge noch überflüssig sind. Teilweise waren sie nur zu testzwecken drin. Ich durchforste am Ende immer die CSS noch und nehme solche sachen raus. Und das mit margin-left: -493px; hat auch einen Sinn

    Das mit dem Einzeiler ist mir auch schon aufgefallen, das kommt aber nur auf dem Server so. Also hier einfach die style.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203

    #wolken
{
    background: url('../image/wolken.jpg') 40% repeat-x;
    height: 288px;
    float:left;
    position: absolute;
    left:0;
    right: 0;
}
 
#main
{
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -493px;
    width: 986px;
}
 
#borderL_o
{
    background: url('../image/borderL_o.png');
    height: 107px;
    width: 18px;
    float: left;
}
 
#banner
{
    background: url('../image/banner.jpg');
    height: 107px;
    width: 950px;
    float: left;
}
 
#borderR_o
{
    background: url('../image/borderR_o.png');
    height: 107px;
    width: 18px;
    float: left;
}
 
#borderL_u
{
    background: url('../image/borderL_u.png');
    height: 908px;
    width: 18px;
    float: left;
}
 
#cnt
{
    background: #f3f6fb url('../image/bg_content.jpg') repeat-x;
    height: 889px;
    width: 950px;
    float: left;
}
 
#content
{
    background: #f3f6fb url('../image/bg_content2.jpg') repeat-x;
    height: auto;
    margin: 30px 0 0 211px;
    color: #196595;
}
 
#content p
{
    font: 0.8em verdana;
}
 
#borderR_u
{
    background: url('../image/borderR_u.png');
    height: 908px;
    width: 18px;
    float: left;
}
 
#navigation
{
    background: #f2f7fb;
    height: auto;
    width: 190px;
    float: left;
}
 
#navigation a
{
    display: block;
    width: 190px;
    float: left;
    height: 29px;
    text-align: right;
    font: 0.9em/26px verdana;
    color: #124a6e;
}
 
#navigation a span
{
    margin-right: 20px;
}
 
#navigation a.n1
{
    background: url('../image/nav_01_01.jpg');
}
 
#navigation a.n1:hover
{
    background: url('../image/nav_01_02.jpg');
}
 
#navigation a.n2
{
    background: url('../image/nav_02_01.jpg');
}
 
#navigation a.n2:hover
{
    background: url('../image/nav_02_02.jpg');
}
 
#navigation a.n3
{
    background: url('../image/nav_03_01.jpg');
}
 
#navigation a.n3:hover
{
    background: url('../image/nav_03_02.jpg');
}
 
#navigation a.n4
{
    background: url('../image/nav_04_01.jpg');
}
 
#navigation a.n4:hover
{
    background: url('../image/nav_04_02.jpg');
}
 
#navigation a.n5
{
    background: url('../image/nav_05_01.jpg');
}
 
#navigation a.n5:hover
{
    background: url('../image/nav_05_02.jpg');
}
 
#navigation a.n6
{
    background: url('../image/nav_06_01.jpg');
}
 
#navigation a.n6:hover
{
    background: url('../image/nav_06_02.jpg');
}
 
#navigation a.n7
{
    background: url('../image/nav_07_01.jpg');
}
 
#navigation a.n7:hover
{
    background: url('../image/nav_07_02.jpg');
}
 
#navigation a.n8
{
    background: url('../image/nav_08_01.jpg');
}
 
#navigation a.n8:hover
{
    background: url('../image/nav_08_02.jpg');
}
 
#navigation img
{
    float:left;
}
 
.border1pxBlack
{
    border: 1px solid #000;
}
 
.border1pxBlue
{
    border: 1px solid #88b1c7;
}
 
.cl
{
    clear: both;
}
     
    Aktuelle Zertifizierung: MCP 70-270, CCNA
    In Arbeit: 70-291, 70-290, 70-284, 70-293, 70-294, 70-298
  7. 28.10.08 17:41 #7
    Maik Tutorials.de Gastzugang
    Wandel die fixe Höhe für #main und #cnt in eine Mindesthöhe um, und erzeuge den grafischen Rahmen in Form eines Hintergrundbildes (1022*?px) für #main, dessen derzeitige Breite du dementsprechend anpasst, sei's über width oder padding.

    Die vier DIVs zur Rahmenerzeugung entfallen somit gänzlich im Markup.

    Wenn du dann noch die Floatumgebung der Navigation und des Inhalts zum Ende aufhebst, dürften die "Height-Probleme" aus der Welt geräumt sein.

    mfg Maik
     
  8. 28.10.08 17:56 #8
    soyo soyo ist offline Mitglied Brillant
    Registriert seit
    Apr 2006
    Beiträge
    794
    Meinst du Faux-Columns?
     
    Aktuelle Zertifizierung: MCP 70-270, CCNA
    In Arbeit: 70-291, 70-290, 70-284, 70-293, 70-294, 70-298
  9. 28.10.08 17:57 #9
    Maik Tutorials.de Gastzugang
    Mit diesem Fachbegriff kann man es auf den Punkt bringen

    mfg Maik
     
  10. 28.10.08 19:59 #10
    soyo soyo ist offline Mitglied Brillant
    Registriert seit
    Apr 2006
    Beiträge
    794
    So, hier mein Ergebnis: http://www.frank-germann.de/dezentral.info/

    Nu hab ich das float in der Navigation und im content rausgenommen. FF stellt es korrekt dar, aber der IE leider nicht . Hat jemand eine Idee dazu?

    Gruß Thomas

    EDIT: hier natürlich noch die 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

    /***CUSTOM SETTINGS***/
#wolken
{
    background: url('../image/wolken.jpg') 40% repeat-x;
    height: 288px;
    position: absolute;
    left:0;
    right: 0;
}
 
#main
{
    min-height: 1022px;
    height: 1022px;
    position: absolute;
    left: 50%;
    margin-left: -493px;
    width: 986px;
}
 
#borderL_o
{
    background: url('../image/borderL_o.png');
    height: 107px;
    width: 18px;
    float: left;
}
 
#borderR_o
{
    background: url('../image/borderR_o.png');
    height: 107px;
    width: 18px;
    float: left;
}
 
#banner
{
    background: url('../image/banner.jpg');
    height: 107px;
    width: 950px;
    float: left;
}
 
#cntBorder
{
    background:  url('../image/shadow.png');
    height: auto;
    width:  986px;
    float:left;
}
 
#cnt
{
    background: #f3f6fb url('../image/bg_content.jpg') repeat-x;
    width: 950px;
    margin-left: 18px;
}
 
#content
{
    background: #f3f6fb url('../image/bg_content.jpg') repeat-x;
    height: auto;
    width: 720px;
    margin-left: 210px;
    font: 0.8em verdana;
}
 
#navigation
{
    background: #f2f7fb;
    height: auto;
    width: 190px;
}
 
#navigation a
{
    display: block;
    width: 190px;
    float: left;
    height: 29px;
    text-align: right;
    font: 0.9em/26px verdana;
    color: #124a6e;
}
 
#navigation a span
{
    margin-right: 20px;
}
 
#navigation a.n1
{
    background: url('../image/nav_01_01.jpg');
}
 
#navigation a.n1:hover
{
    background: url('../image/nav_01_02.jpg');
}
 
#navigation a.n2
{
    background: url('../image/nav_02_01.jpg');
}
 
#navigation a.n2:hover
{
    background: url('../image/nav_02_02.jpg');
}
 
#navigation a.n3
{
    background: url('../image/nav_03_01.jpg');
}
 
#navigation a.n3:hover
{
    background: url('../image/nav_03_02.jpg');
}
 
#navigation a.n4
{
    background: url('../image/nav_04_01.jpg');
}
 
#navigation a.n4:hover
{
    background: url('../image/nav_04_02.jpg');
}
 
#navigation a.n5
{
    background: url('../image/nav_05_01.jpg');
}
 
#navigation a.n5:hover
{
    background: url('../image/nav_05_02.jpg');
}
 
#navigation a.n6
{
    background: url('../image/nav_06_01.jpg');
}
 
#navigation a.n6:hover
{
    background: url('../image/nav_06_02.jpg');
}
 
#navigation a.n7
{
    background: url('../image/nav_07_01.jpg');
}
 
#navigation a.n7:hover
{
    background: url('../image/nav_07_02.jpg');
}
 
#navigation a.n8
{
    background: url('../image/nav_08_01.jpg');
}
 
#navigation a.n8:hover
{
    background: url('../image/nav_08_02.jpg');
}
 
#navigation img
{
    float:left;
}
 
.border1pxBlack
{
    border: 1px solid #000;
}
 
.border1pxBlue
{
    border: 1px solid #88b1c7;
}
 
.cl
{
    clear: both;
}
     
    Aktuelle Zertifizierung: MCP 70-270, CCNA
    In Arbeit: 70-291, 70-290, 70-284, 70-293, 70-294, 70-298
  11. 28.10.08 20:04 #11
    Maik Tutorials.de Gastzugang
    Nimm für #content die Breitenangabe raus, und gib stattdessen einen rechten Außenabstand an, so wie in der Ur-Version des Stylesheets, mit der es keinen derartigen Darstellungsfehler im IE gab.

    mfg Maik
     
  12. 28.10.08 20:52 #12
    soyo soyo ist offline Mitglied Brillant
    Registriert seit
    Apr 2006
    Beiträge
    794
    Super, nun funktioniert es.
     
    Aktuelle Zertifizierung: MCP 70-270, CCNA
    In Arbeit: 70-291, 70-290, 70-284, 70-293, 70-294, 70-298
« Scrollbalken nach rechts | Möglichkeit, dass Kind-Elemente über Eltern drüber "hinausragen" »

Ähnliche Themen

  1. Probleme mit min-height: 100%
    Von Dimitrj im Forum CSS
    Antworten: 4
    Letzter Beitrag: 23.03.09, 16:47
  2. Mehrspaltiges Layout: Probleme mit min-height:100% bzw height:100%
    Von gunwald im Forum CSS
    Antworten: 0
    Letzter Beitrag: 22.01.07, 20:00
  3. Probleme mit min-height
    Von primaerleiter im Forum CSS
    Antworten: 4
    Letzter Beitrag: 13.08.06, 17:14
  4. Probleme mit height und DIV Container?
    Von julchen im Forum CSS
    Antworten: 20
    Letzter Beitrag: 31.05.06, 23:34
  5. Probleme mit height
    Von julchen im Forum CSS
    Antworten: 1
    Letzter Beitrag: 25.04.06, 12:22