tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
5
ZUGRIFFE
7775
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 12.10.06 17:06 #1
    rethus rethus ist offline Mitglied Gold
    Registriert seit
    Sep 2006
    Beiträge
    179
    Ich habe eine Navigation erstellt, die aus normalen Listen-Elementen generiert wird.

    In allen Browsern werden die Links richtig dargestellt, ausser im IE 6.0.2900.2180
    Der macht unter jedem Button einen Abstand der nochmal die Höhe des Buttons selbst hat.

    Hier ist das Stylesheed zur Navigation;
    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

    /* Haupt-NAVI */
    div#navi
    {
                position:relative;
                top:0px;
                left:0px;
                background-image: url(../upload/Layout/redPanel.png);
        background-repeat:repeat-y;
        float:left;
        width:159px;
                height:10px;
        text-align:left;
    }
    ul#Navigation
    {
        position:relative;
                left:0px;
                padding:0px;
                margin:0px;
        background-color:white;
    }
    #Navigation li 
    {
        padding:0px; 
        margin:0px;
        list-style-type: none;
        font-size: 1em;
        white-space: nowrap;
 
        text-align:left;
        text-transform:uppercase;
        text-decoration:none;
    }
    ul#Navigation a 
    {
                display:block;
                background-color:#fff;
                magrin:0px;
                padding:5.5px;
        padding-left:35px;
        background-image: url(../upload/Layout/button.gif);
        background-repeat:no-repeat;
        background-position:left;
        
        font-family:verdana, sans serif;
        font-size: 0.825em;
        font-weight: bold;
        color: white; 
    }
    ul#Navigation a:link 
    {
        text-decoration:none;
    }
    ul#Navigation a:visited 
    {
        color:#fff;
                text-decoration:none;
    }
    ul#Navigation a:hover 
    {
        text-decoration:underline;
        font-style:normal;
        font-weight: bold;
    }
    ul#Navigation a:active 
    {
        color:gold;      
    }
 
/* META-Navi
==============*/
div#metaNavi
{
        position:relative;
        top:57px; 
        left:205px;
        width:800px;
}
#MetaNavigation
{
    display:inline;
 
}
#MetaNavigation li
{
    display:inline;
    font-weight: bold;
    font-family: arial;
    font-size: 0.95em;
    padding:0px 4px;
    white-space: nowrap;
        text-decoration:none;
}
 
ul#MetaNavigation a 
{
    color: #616161; 
}
 
ul#MetaNavigation a:link 
{
    text-decoration:none;
  /*text-transform:uppercase;*/
}
 
ul#MetaNavigation a:visited 
{
    color: #616161; 
    text-decoration:none;
}
 
ul#MetaNavigation a:hover 
{
    text-decoration:none;
    font-style:normal;
}
 
ul#MetaNavigation a:active 
{
    text-decoration:none;
    color: darkred;
}
 
 
/* Bottom-Navi
==============*/
div#bottomNavi
{
        position:relative;
        top:8px;
        left:230px;
        width:800px;
}
#BottomNavigation
{
    display:inline;
 
}
#BottomNavigation li
{
    display:inline;
    font-weight: bold;
    font-family: arial;
    font-size: 0.95em;
    padding:0px 4px;
    white-space: nowrap;
        text-decoration:none;
}
 
ul#BottomNavigation a 
{
    color: #616161; 
}
 
ul#BottomNavigation a:link 
{
    text-decoration:none;
  /*text-transform:uppercase;*/
}
 
ul#BottomNavigation a:visited 
{
    color: #616161; 
    text-decoration:none;
}
 
ul#BottomNavigation a:hover 
{
    text-decoration:none;
    font-style:normal;
}
 
ul#BottomNavigation a:active 
{
    text-decoration:none;
    color: darkred;
}

    Betrachten und prüfen könnt Ihr die Sache hier: http://www.bost-pc-service.de/cms/

    Wenn ich display:block; entferne, werden die Buttons direkt untereinander dargestellt (also nicht optisch schön, aber zumindest ist der Absatz weg).

    Kann mir jemand einen Tip geben, wo da der Fehler liegt, oder ist das ein Bug vom IE
     
  2. 12.10.06 17:27 #2
    Maik Tutorials.de Gastzugang
    Lösungsvorschlag:

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

    ul#Navigation a
        {
                display:block;
                [b]height: 1%;[/b]
                background-color:#fff;
                margin:0px;
                padding:5.5px;
                padding-left:35px;
                background-image: url(../upload/Layout/button.gif);
                background-repeat:no-repeat;
                background-position:left top;
 
                font-family:verdana, sans serif;
                font-size: 0.825em;
                font-weight: bold;
                color: white;
        }
    Zudem hast Du in diesem Selektor einen Buchstabendreher bei der margin-Eigenschaft:

    Code :
    1
2
3
4
5
6

    ul#Navigation a 
    {
                [...]
                ma[color=red]gr[/color]in:0px;
                [...]
    }
     
  3. 12.10.06 17:57 #3
    rethus rethus ist offline Mitglied Gold
    Registriert seit
    Sep 2006
    Beiträge
    179
    Wow... Klasse
    Das hat geklappt, obwohl ich jetzt in der Unternavigation einen feinen weißen Strich habe...

    Kannst du mir vielleicht auch einen Tip geben, wie ich unterhalb der Navigation im Rot-Gepunkteten Bereich den Abschluss an den Fuß des Layers bekomme?

    Derzeit ist das Konstrukt so aufgebaut:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <div id="container">
    <div id="wrapper">
            <div id="navi">
            <ul id="Navigation"><li><a href="beispiellink" title="Beispiellink">Beispiellink</a></li></ul>
        
                    <div id="redPanel">
            <div id="oben"></div>
            <div id="mitte"></div>
            <div id="unten"></div> 
            </div>
            </div>
            <div id="content"> bla bla inhalte...</div>
    </div>
               
</div>

    Und die Stylesheeds:
    HTML-Code:
    html
{    
        min-height: 100%;
	height:auto !important; /* moderne Browser */
	height:100%; /* IE */
        width:100%;
}

body
{
        width:100%;
        margin:0%;
        padding:0%;
        font: 76% arial,sans-serif;
}
	p
	{	
		margin:0 10px 10px;
	}
	a
	{	
		color: #006;
	}

	div#container
	{
//		min-height: 100% !important;
//		height: auto;
//		height:100%;
                background-color:#fff;
	}
/* HEADER 
===========*/
	div#header
	{
		position:relative;
		width:100%;
	}
	div#right
	{
		background-color:inherit;
		position:relative;
		width: 100%;
		background-image: url(../upload/Layout/header_rechts.png);
		background-repeat:repeat-x;
		float: right;
	}
	div#left
	{
		position:relative;
		width: 256px;
		height:245px;
		display: block;
		background-image:url(../upload/Layout/header_links.gif);
		background-repeat:no-repeat;
	}
	
	div#light
	{
		background-color:inherit;
		position:absolute;
		left:0px;
		top:0px;
		z-index:10;
		width: 656px;
		height:22px;
		background-image: url(../upload/Layout/header_light.png);
		background-repeat:no-repeat;
	}
	div#logo
	{
		background-color:#fff;
		position:absolute;
		left:65px;
		top:80px;
		width: 154px;
		height:160px;
		border:gray solid 2px;
		background-image: url(../upload/Layout/logo.png);
		background-repeat:no-repeat;
		background-position:center center;
	}	
	

/* CONTENT 
===========*/
	div#wrapper
	{
		position:relative;
                left:65px;
                float:left;
                
                height:auto;
                height:100%;		
                
                width:100%;
		margin:0px;
                background-image: url(../upload/Layout/redPanel.png);
		background-repeat:repeat-y;
	        background-color:#fff;
		}
	div#content
	{
		width:70%;
                background-color:#fff;
		min-height:100% !important;
                height:auto;
                height:100%;
		//overflow:auto;
		padding:20px;
		
	}
	div#content p
	{
		line-height:1.4;
                width:95%;
	}
	

/* RED_PANEL 
==============*/
	div#redPanel
	{
		//background-color:transparent;
                //min-height:auto;
                //height:100%;
                margin:1px 0px 0px 0px;
	}
	div#oben
	{
		margin-top:0px;
		margin-bottom:0px;
		background-image: url(../upload/Layout/redPanel_oben.png);
		background-repeat:no-repeat;
		height:40px;
	}
	div#mitte
	{
		margin-top:0px;
		margin-bottom:0px;
		//height:200px;
	}
	div#unten
	{
		position:relative;
                bottom:0px;
                margin:0px;
		background-image: url(../upload/Layout/redPanel_unten.png);
		background-repeat:no-repeat;
		height:40px;
	}
    Ich hatte auch schn versucht, den Layer <div id="unten"> mit in den Layer "Content" hinein zu ziehen und Ihn bei bottom:0px; auszurichten. Allerdings hat er da das Problem, beim IE, das er - sobald der Content Kleiner ist als die Navi - das er dann den roten Footer unter den Content zieht.
     
  4. 12.10.06 18:08 #4
    Maik Tutorials.de Gastzugang
    Korrigiere mal die fettmarkierten Eigenschaften in den folgenden Selektoren:

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

    div#container
    {
[b]//       min-height: 100% !important;
//      height: auto;
//[/b]      height:100%;
                background-color:#fff;
        }
div#content
    {
        width:70%;
                background-color:#fff;
        [b]min-height:100% !important;
                height:auto;[/b]
                height:100%;
        [b]//overflow:auto;[/b]
        padding:20px;   
    }

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

    div#container
    {
        [b]min-height: 100%;
        height: auto !important;[/b]
        height:100%;
                background-color:#fff;
}
div#content
        {
                width:70%;
                background-color:#fff;
                [b]min-height:100%;
                height:auto !important;[/b]
                height:100%;
                [b]overflow:auto;[/b]
                padding:20px;
        }

    Zudem hatte ich height:1% und nicht 0.1% empfohlen, sowie Dich auf einen Buchstabendreher hingewiesen.
     
  5. 12.10.06 18:17 #5
    rethus rethus ist offline Mitglied Gold
    Registriert seit
    Sep 2006
    Beiträge
    179
    Du hast recht, ich habe da etwas durcheinander geworfen.

    Nun habe ich es nochmal so gemacht, das der Layer "unten" in dem Layer "Wrapper" mit drin ist.. so scheint es zu gehen

    Das einzige was noch fehlt ist meine 100%-Geschichte... kriegs einfach nicht hin, das er mir die Seite auf 100% skaliert.

    PS: Vielen Dank schon mal für die guten Tips.
     
  6. 13.10.06 13:24 #6
    rethus rethus ist offline Mitglied Gold
    Registriert seit
    Sep 2006
    Beiträge
    179
    So, ich habe jetzt mal das Layout in diversen Browsern gestestet.

    In allen GUTEN Browsern funktioniert das Layout, Probleme machen lediglich

    IE 5.01 (http://browsershots.org/png/full/f8/...fad4780fdf.png)
    IE 7.0 (http://browsershots.org/png/full/22/...52a689c087.png)

    Kann mir jemand einen Tip geben, woran das liegt?
    Was wurde im IE geändert, das es beim 5.5 & 6.0 noch funktionierte, aber beim 7.0 nicht mehr?

    Und warum zerhaut der IE 5.01 das Layout dermaßen?

    Bin für jeden Tipp dankbar.
     
« Tabelle ersetzen durch css | ul - display:inline mit Aufzählungszeichen »

Ähnliche Themen

  1. Wenn status = 1 aus style display:none display:block machen
    Von spikaner im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 16.01.11, 09:04
  2. CSS hilfe bei display:block
    Von Sk8terboi im Forum CSS
    Antworten: 6
    Letzter Beitrag: 14.05.08, 09:31
  3. DIV: display: block und none
    Von mschlegel im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 17.02.08, 14:26
  4. display block / display none ?
    Von nordi im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 09.01.08, 11:43
  5. display: block bei IE und Firefox
    Von CrushLog im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 26.11.04, 23:47