tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
1466
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 04.11.05 12:39 #1
    Fiberman Fiberman ist offline Mitglied Bronze
    Registriert seit
    Feb 2004
    Beiträge
    38
    Hallo, ich habe mir eine CSS Navigation gebastelt und bekomme es nicht hin, dass sie im Firefox und IE sauber untereinander angezeigt wird. Ich glaube ich habe hier irgendeine Kleinigkeit übersehen oder was vergessen.

    Meine Probleme:

    - Die Navigation soll allgemein zentriert in dem Div stehen mit 5px Abstand zwischen den Buttons
    - Die Subnavigation soll genau passend zentriert unter den Buttons sein
    - Das wichtigste und größte meiner Probleme es soll mindestens mit FF und IE funktionieren.

    Zur verdeutlichung hab ich mal den Quelltext und einen Link zur Seite gepostet. Die Rahmen zeigen Graphische Elemente.

    Danke für euere Hifle...

    Hier der Link zur Seite: http://fiberman.fi.funpic.de/

    und hier der HTML code ohne Javascript:
    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

     
<html>
<head>
<title>Horizontale Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</style>
</head>
<body>
<div id="main"> 
 <div id="top"></div> 
 <div id="navileiste">
   <div id="nav">
     <li id="neu"><a href="#">Hauptseite</a>
       <ul>
         <li id="neu"><a href="#">Hauptseite 1</a></li>
         <li id="neu"><a href="#">Hauptseite 2</a></li>
         <li id="neu"><a href="#">Hauptseite 3</a></li>
         <li id="neu"><a href="#">Hauptseite 4</a></li>
         <li id="neu"><a href="#">Hauptseite 5</a></li>
         <li id="neu"><a href="#">Hauptseite 6</a></li>
         <li id="neu"><a href="#">Hauptseite 7</a></li>
         <li id="neu"><a href="#">Hauptseite 8</a></li>
         <li id="neu"><a href="#">Hauptseite 9</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#index.php?id=6">Zeite Seite</a>
       <ul>
         <li id="neu"><a href="#">Seite 2.1</a></li>
         <li id="neu"><a href="#">Seite 2.2</a></li>
         <li id="neu"><a href="#">Seite 2.3</a></li>
         <li id="neu"><a href="#">Seite 2.4</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#index.php?id=5">Rest</a>
       <ul>
         <li id="neu"><a href="#">Sonstiges</a></li>
         <li id="neu"><a href="#">Blindtext</a></li>
         <li id="neu"><a href="#">Nur mal so</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#index.php?id=4">Reisen</a>
       <ul>
         <li id="neu"><a href="#">Ausland</a></li>
         <li id="neu"><a href="#">Inland</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#">Tutorials</a>
     </li>
   </div> 
 </div>
 <div id="content"></div>
 <div class="clear"></div>
 <div id="footer"><p> Ein ganz normaler Footer</p></div> 
</div> 
</body>
</html>

    Hier 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

    html,body {
  height: 100%;
  background: #006600;
  color: #FFFFFF;
  text-align:center;
  min-height: 100.05%;
  margin: 0 auto;
  padding: 0;
  font-family: Arial,Verdana, Helvetica, sans-serif;
  font-size: 85%;
  
} 
 
#main {
   margin : 0 auto;
   width : 800px;
   min-height: 100.05%;
   height: auto !important;
   position: relative;
   height:100.05%;
}
 
#top {
   height: 150px;
   width: 800px;
   border:1px #FFFFFF solid;
   background-image: url('images/kopf-1.jpg');
   background-repeat: no-repeat;
   margin : 0 auto;
   
}
 
#navileiste {
    width : 800px;
    margin : 0 auto;
    height: 29px;
    background-image: url('images/kopf-2.jpg');
    background-repeat: no-repeat;
}
 
 
#content {
    margin: 0 auto;
    height: 351px; 
    width: 800px;   
border:1px #FFFFFF solid;
    background-image: url('images/kids-blanco1.jpg');
    background-repeat: no-repeat;
}
#spacer {
    padding-top:    1px; 
    height: 25px;  /* damit der footer nicht über das content rutscht */
}
 
#content h1, #content p {
    padding:0;
    margin:0;
}
 
#footer{
    width: 800px;
    position: absolute; 
    background: #006600;
    bottom: 0 !important; 
    bottom: -1px; 
    height: 25px; 
    left: 50%;
    margin-left: -400px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 85%;
    color: #FFFFCC;
    
}
 
.clear {
    clear: both;
    margin: 0;
    padding: 0;
}
 
#nav { 
    padding: 0px;
    margin-left: 55px !important;
    margin: 0 auto;
    list-style: none;
    display:block;
    width: 700px; /* important for Opera7 */
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    
}
 
#nav ul { 
    padding: 0px;
    margin: 0 auto;
    list-style: none;
    position:absolute; 
    display:block;
    width: 112px;   
}
 
#nav a {
    display: block;
    width: 110px;
    text-align:center;
    text-decoration:none;
    padding: 2px ;
    margin: 0 auto;
    color: #FFFFFF;
    background-color:#008000
 
}
#nav a:hover {
    display: block;
    width: 110px;
    text-align:center;
    text-decoration:none;
    padding: 2px;
    margin: 0 auto;
    color: #96F358;
    background-color:#00622c;
    
}
 
#nav li { 
    float: left;
    width: 110px;
    border:1px #68a370 solid;
    margin: 0px;
    
    
    
}
#neu li {
    width: 120px; 
    border:1px #68a370 solid;
    margin: 0 auto;
    background-color:#008000;
    color:#ffffff;
    
}
 
#nav li ul { 
    margin: 0px;
    width: 110px;
    left: -999em; 
}
 
#nav li ul ul { 
    margin: 0px;
}
 
#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
    background-color:#00622c;
    color: #96f358;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    background-color:#00622c;
    color: #96f358;
    
}
 
#nav li:hover , #nav li li:hover, #nav li.sfhover, #nav li li.sfhover { /* lists nested under hovered list items */
    left: auto;
    background-color:#00622c;
    color: #ffffff;
    
}
#content {
    clear: left;
}

    Danke
     
  2. 09.11.05 12:22 #2
    Fiberman Fiberman ist offline Mitglied Bronze
    Registriert seit
    Feb 2004
    Beiträge
    38
    kann mir den keiner helfen? ich hab schon hunderttausend verschiedene Möglichkeiten durchprobiert und finde keine Lösung!

    Gruß
     
  3. 09.11.05 12:48 #3
    Maik Tutorials.de Gastzugang
    Mir ist aufgefallen, daß im Online-Demo zwischen DIV#navileiste und UL#nav ein weiteres DIV eingebettet ist. Vielleicht ist das der Grund für den Darstellungsfehler?
     
  4. 09.11.05 13:25 #4
    Fiberman Fiberman ist offline Mitglied Bronze
    Registriert seit
    Feb 2004
    Beiträge
    38
    nein, das war es auch nicht!

    das war bestimmt ein überbleibsel von meinen vielen Versuchen!
     
« Wiedermal IE Problem! | Andere Schriftart Andere Schriftgröße »

Ähnliche Themen

  1. Horizontale Navigation
    Von powerranger2 im Forum CSS
    Antworten: 3
    Letzter Beitrag: 06.09.10, 16:17
  2. Horizontale Navigation mit Umbrüchen
    Von TeBeO im Forum CSS
    Antworten: 11
    Letzter Beitrag: 01.02.10, 13:45
  3. Horizontale Navigation
    Von alex130 im Forum CSS
    Antworten: 30
    Letzter Beitrag: 02.01.08, 23:31
  4. Horizontale Navigation
    Von Arndtinho im Forum CSS
    Antworten: 4
    Letzter Beitrag: 23.05.06, 15:16
  5. Horizontale Navigation mit CSS
    Von roliboli im Forum CSS
    Antworten: 0
    Letzter Beitrag: 28.01.05, 01:08