tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
586
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 22.06.11 16:34 #1
    Avatar von 3dstyler
    3dstyler 3dstyler ist offline Mitglied Bronze
    Registriert seit
    Dec 2004
    Beiträge
    28
    Hallo Kollegen,

    im link könnt ihr das momentane ergebnis meiner CSS Seite sehen, doch leider ist im IE 8 der letzte Menu button *KONTAKT* total verrutscht. Ich suche schon seit zwei Tagen herumzu fitzeln und nach einer Lösung im Web usw. aber ich komm nicht drauf.
    Bitte helft mir, denn ich werde schon bald wahninnig; möchte dieses Problem ja so gerne mit CSS lösen. Übrigens, ich arbeite mit dem Kompozer NVU.

    http://www.3dstyler.com/2spalten.html

    hier mal der HTML:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" type="text/css"
 href="styler.css"><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title></title></head><body>
<div id="root">das ist der seiteneinrichter "root"
<div id="head">head bereich für banner</div>
<div class="navigationx">Navigation buttons usw...<br></div>
<div class="navigation"><ul
 style="font-family: Verdana,Arial,sans-serif;"> <li
 style="text-align: center;" class="current_page_item"><a
 href="index.html">HOME</a></li>
<li style="text-align: center;"><a href="firma.html">FIRMA</a></li>
<li style="text-align: center;"><a href="page.html">LEISTUNGEN</a></li>
<li style="text-align: center;"><a href="archives.html">REFERENZEN</a></li>
<li style="text-align: center;"><a href="empty.html">KONTAKT</a></li>
</ul></div><div class="navi_left">Navigation<br>&nbsp;links<br>a<br>b<br>c<br>d<br></div>
<div class="content_right">Inhalt rechts<br>hier
sollte etwas stehen</div>
<div class="clear"></div><div id="footer">footer
unten</div>
</div></body></html>
    und der CSS aus der Datei:
    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

    body
{
    text-align: center;
    font-size: 1.5em;
    font-family: courier;
}
 
#root
{
    width:850px;
 
    border: 1px solid blue;
    margin: 0 auto;
    text-align: left;
    color: blue;
    background-color: yellow;
}
 
#root a
{
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}
#root a:hover
{
    color: #FF0000;
}
 
#head
{
    border: 0px solid #000000;
    height:100px;
    margin: 0px;
background-color: #dcdcdc;
}
 
.navigationx
{
    width: 850px;
    float: left;
    background: orange;
    border: 0px solid green;
    padding: 0px;
}
 
.navi_left
{
    width: 250px;
    float: left;
    background: grey;
    border: 0px solid green;
    padding: 0px;
}
 
.content_left
{
    width: 250px;
    float: left;
    border: 1px solid #FF0000;
    padding: 10px;
    margin-left: 10px;
}
 
 
.content_right
{
    width: 600px;
    float: right;
background: red;
    border: 0px solid blue;
    padding: 0px;
}
 
 
#footer
{
with: 850px;
background: green;
border: 0px solid yellow ;
}
 
.clear 
{
clear: both;
}
 
 
/* --------------------------------
NAVIGATION: ist die leiste mit menüs nebeneinander!
----------------------------------- */
 
.navigation {
    background: green;
    border-top: 0px solid white;
    border-bottom: 0px solid white;
    font-size: 1.0em;
}
 
.navigation ul {display: inline;}
 
.navigation ul li 
{
    border-right: 0px solid white;
    float: left;
    list-style: none;
    width: 170px;
}
 
.navigation a {
    color: white;
    display: block;
    font: 0.5em verdana, arial;
    padding: 10px 0px 10px 0px;
    text-decoration: none;
}
 
.navigation a:hover 
{
    background: #dcdcdc;
    color: green;
    text-decoration: none;
}
 
 
.current_page_item a {
    background: white;
    color: grey;
}
     
    ... in 3d we trust ... www.3dstyler.com
    Zitieren Zitieren
  2. 24.06.11 01:03 #2
    hoctar hoctar ist offline Mitglied Brokat
    Registriert seit
    Jun 2007
    Beiträge
    344
    Das liegt wohl am width der li's (width: 170px
    Du könntest etwas weniger Breite einegeben, dann würde es beim IE inordnung ausehen.
    Falls du aber die ganze Weite haben möchtest, kannst du versuchen dem IE mit * width: 160px; eine andere Breite der li's zuzuweisen. Ansonsten schau mal was Google zu "css horizotal menu full width" sagt.
     
    Zitieren Zitieren
  3. 24.06.11 10:36 #3
    Avatar von hela
    hela hela ist gerade online Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo,

    m.E. liegt die unterschiedliche Darstellung der Browser in der unterschiedlichen initialen Formatierung der ungeordneten Listen. Ich würde die margin- und auch die padding-Eigenschaft sowohl im UL- als auch im LI-Element auf den Wert Null zurücksetzen. Zudem halte ich das Einhüllen des UL-Elements in den DIV-Block mit dem Klassenattribut "navigation" für unnötig und die Formatierung des UL-Elements zum Inline-Element ist vermutlich aus Verzweiflung geschehen.

    Versuch es mal so:
    HTML-Code:
    <ul class="navigation">
  <li class="current_page_item"><a href="index.html">HOME</a></li>
  <li><a href="firma.html">FIRMA</a></li>
  <li><a href="page.html">LEISTUNGEN</a></li>
  <li><a href="archives.html">REFERENZEN</a></li>
  <li><a href="empty.html">KONTAKT</a></li>
</ul>
    ... und die zugehörige Formatierung in der CSS-Datei "styler.css":
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    ul.navigation {
  margin: 0;
  padding: 0;
  background: green;
  font-size: 1.0em;
  font-family: Verdana,Arial,sans-serif;
  text-align: center;
}
 
ul.navigation li
{
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  width: 170px;
}
     
    Zitieren Zitieren
  4. 25.06.11 09:47 #4
    Avatar von 3dstyler
    3dstyler 3dstyler ist offline Mitglied Bronze
    Registriert seit
    Dec 2004
    Beiträge
    28
    Guten Morgen @ all,

    erstmal vielen Dank für eure Antworten, ist ja echt super hier, dass Experten sich so schnell und ausführlich melden! *großes Lob*

    und nun zu euren Meldungen, dass auch andere User hier den Sinn eines Forums nutzen können:

    @hoctar:
    Das mit der kleineren Breite der einzelnen Buttons habe ich auch schon versucht, das hat auch wunderbar funtkioniert, trotzdem wollte ich umbedingt alle Buttons in der Menuleiste über die gesamte Breite haben.


    @hela: - du bist mein Held!
    danke für deine ausführliche Hilfe!
    Es lag genau daran, dass ich den Div classes ul.navigation und ul.navigation li explizit die Werte margin und padding auf 0px setzte, wobei ich nun glaube, dass es vor allem der Wert padding = 0px ausmachte...!

    Und nebenbei noch, danke für deinen Tip mit den überflüssigen Divs, ich habe hier wirklich zwei Divs zuviel verschachtelt, nun sieht der Code wirklich sauberer und besser aus!


    Wie immer tolles Forum und tolle Leute hier - THXs @ all
    greetz 3dstyler
     
    ... in 3d we trust ... www.3dstyler.com
    Zitieren Zitieren
« Links in Tabellenspalten kommplet klickbar | CSS Problem keine Ahnung wo »

Ähnliche Themen

  1. Problem mit Ungleich
    Von Philipopilli im Forum PHP
    Antworten: 2
    Letzter Beitrag: 15.04.10, 10:38
  2. Dateien löschen (ungleich name)
    Von yidaki im Forum Linux & Unix
    Antworten: 3
    Letzter Beitrag: 01.07.08, 05:07
  3. Ungleich Zeichen
    Von brinsche im Forum Visual Basic 6.0
    Antworten: 2
    Letzter Beitrag: 22.06.05, 09:41
  4. where ungleich?
    Von 2Pac im Forum PHP
    Antworten: 7
    Letzter Beitrag: 17.08.03, 04:17
  5. file ungleich dir
    Von DevEye im Forum PHP
    Antworten: 3
    Letzter Beitrag: 28.02.03, 17:26

Stichworte