|
|||
Grafische Navigation aus FAQ Probleme im IE
Hallo zusammen,
ich versuche gerade meine Webseite: Die Seite über den Halo Clan 360 D'shiznit von einem Tabellenlayout mit Net Objects Fusion auf ein CSS basiertes Layout umzuschreiben. Die Seite über den Halo Clan 360 D'shiznit Habe hierzu folgende Box für den grafischen Rahmen verwendet: Box by tedd Für die Navigation bin ich das Tutorial auf der FAQ-Seite durchgegangen. Im Firefox sieht das ganze auch schon entsprechend aus. Nur im IE werden die Grafiken gar nicht angezeigt, es wird nur eine vertikale Liste dargestellt. Wieso bekomme ich im IE eine falsche Darstellung? Ich verstehe auch die Angaben für die Zustände der Navi nicht ganz. #home a span steht für den Zustand link, oder? Für was stehen die Angaben a:focus span und strong span? Außerdem ist das Logo und die Navi nicht zentriert, obwohl ich in CSS text-align: center angegeben habe. Ich hoffe ihr könnt mir weiter helfen. Hier ein Teil des CSS Code: Code:
/* \*/ * html #tlc, * html #trc {height: 1%;} /* */ body { margin: 0; padding: 0; background-color: #66ff66; font-size: 100.01%; text-align: center; font-family : Georgia, Palatino, "Times New Roman", Times, Serif; } #box { position: relative; margin-left: auto; margin-right: auto; margin-top: 0.5em; padding: 0; text-align: left; width:80%; /* <-- use this to tie width to viewport size */ width: 40em; /* <-- use this for a set width */ background-color: #ffffff; min-width:950px; } #content { padding:1.5em; } #content h1 { color:#0354c2; font-weight: bold; font-size: 1.2em; } #content p { color:#3b3b3b; font-size: 1em; line-height: 1.3em; } /* ---=== border code follows ===--- */ /* tlc = top left corner trc = top right corner blc = bottom left corner brc = bottom right corner lb = left border rb = right border tb = top border bb = bottom border */ #tlc, #trc, #blc, #brc { background-color: transparent; background-repeat: no-repeat; } #tlc { background-image:url(../images/grafik/oben_links.jpg); background-position: 0% 0%; } #trc { background-image:url(../images/grafik/oben_rechts.jpg); background-position: 100% 0%; } #blc { background-image:url(../images/grafik/unten_links.jpg); background-position: 0% 100%; } #brc { background-image:url(../images/grafik/unten_rechts.jpg); background-position: 100% 100%; } #tb, #bb { background-color: transparent; background-repeat: repeat-x; } #tb { background-image:url(../images/grafik/mitte_oben.jpg); background-position: 0% 0%; } #bb { background-image:url(../images/grafik/mitte_unten.jpg); background-position: 50% 100%; } #rb { background-image:url(../images/grafik/mitte_rechts.jpg); background-position: 100% 0%; background-repeat: repeat-y; } #lb { background-color: #ffffff; background-image:url(../images/grafik/mitte_links.jpg); background-position: 0% 100%; background-repeat: repeat-y; } #logo { vertical-align:text-top; text-align:center; } /* ---=== Navigation ===--- */ #navi li { float: left; width: 142px; list-style:none; text-align:center; } #navi a, #navi strong { display: block; height: 55px; width: 100%; position: relative; overflow: hidden; } #navi span { position: absolute; width: 100%; height: 55px; top: 0; left: 0; background: url(../images/navi/navi_gesamt.jpg) no-repeat; } /* #navi #home */ #navi #home a span { /* Erste die horizontale und der Zweite die vertikale Position */ background-position: 0 0; } #navi #home a:hover span { background-position: 0px -55px; } #navi #home a:active span { background-position: 0px -110px; } #navi #home a:focus span, #navi #home strong span { background-position: 0px -110px; } Geändert von mastermartin (22.08.2008 um 15:20 Uhr) |
Sponsored Links |
|
||||
Zitat:
Zitat:
#home a:focus span = Link im markierten Zustand #home strong span = Link im aktiven Zustand (z.B. bist du auf der Seite: "Home" kommt dies zum Einsatz) Zitat:
Moderne Browser brauchen im zuzentrierenden Element "margin: 0 auto".
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
||||
Zitat:
Zitat:
PS: [Invalid] Markup Validation of http://www.dshiznit.de/withouttd/html/ - W3C Markup Validator
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
Die IE Developer Toolbar zeigt, dass der IE ein Element <br id="navi"> sieht.
Ja, es wäre wirklich sinnvoll, die HTML-Fehler zu beheben.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Interessanter Fehler. Dem br fehlt ein ">" und schon denkt der IE
Code:
<br <ul id="navi"> Code:
<br id="navi"> |
|
|||
Blöde Fehler CSS im html Code. In Zukunft benutz ich immer den Validator.
Werd mir mal die Internetseite fwpf-webdesign.de anschauen um den Rest meines Layouts zu realisieren. Ich hoffe damit steig ich ein wenig mehr hinter die Regeln von CSS. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Probleme mit horizontaler Navigation | Bollmann | CSS | 2 | 05.10.2008 02:25 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |