|
|||
![]()
Hallo, ich bin CSS Einsteiger und baue gerade mein erstes CSS Menue.
Das ganze basiert auf einer Navi von Stu NicholsJeweills links und rechts sind zwei pics - dazwischen die 6 Buttons als Hintegrundbilder realisiert. Alle 8 Pics sind zusammen 844px breit (2x23px und 6x 114px) Die Navigation ist in einem 844px breiten Frame eingebettet. Es läuft im Firefox einwandfrei nur im IE7 wird mir das letze pic umgebrochen. Hab schon mal durch austesten festgestellt das dem IE irgendwie 14px fehlen um es einwandfrei darzustellen. Habe hier schon gesucht und gelesen - komme aber nicht wirklich weiter. Kann mir jemand helfen? Hier nachfolgend der Code - habs leider noch nirgendwo online <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> BlowtermPC-KLinik Limburg 2007</title> <style type="text/css"> /* ================================================== ============== PC-Klinik Limburg 2007 - inspired by Stu Nicholls | CSSplay | A Professional drop-down menu Das Copyright in diesem Stylesheet muss zu jederzeit unangetastet bleiben. Alle Rechte vorbehalten. Dieses Stylesheet und dazugehörige (x)html dürfen für persönliche Zwecke modifiziert werden. ================================================== ================= */ #multi-level {height:42px; position:relative; z-index:100; } #multi-level .pad {float:left;} /* Das Menue Styling */ /* Entfernen der paddings, margins and bullets aus der Liste */ .menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:verdana, arial, sans-serif;} /* Set up der Top-Level Listenteile und float nach links um diese inline zu plazieren */ .menu li.top {display:block; float:left; position:relative; } /* Style and Positionierung der Tabelleso das diese in der Menuefunktion keine Rolle merh spielt. Die Font-Groesse ist fuer den IE5.5 notwendig */ .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Standlayout der Top links */ .menu li.top a.top_link {display:block; float:left; height:42px;} .menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* schiebt den link text aus dem bildschirm */ /* Pre-Loaden der Hover-Grafiken in die Listen */ .menu li.p1 {width:114px; background:url(images/start.jpg) no-repeat;;} .menu li.p2 {width:114px; background:url(images/pkw-lackieranlage.jpg) no-repeat;;} .menu li.p3 {width:114px; background:url(images/lkw-lackieranlage.jpg) no-repeat;;} .menu li.p4 {width:114px; background:url(images/industrielackieranlage.jpg) no-repeat;;} .menu li.p5 {width:114px; background:url(images/vorbereitung.jpg) no-repeat;;} .menu li.p6 {width:114px; background:url(images/farbmisch.jpg) no-repeat;;} .menu li.p7 {width:114px; background:url(images/service.jpg) no-repeat;;} /* SetUp der unhovered Grafiken in den Links */ .menu li a#start {width:114px; background:url(images/start-over.jpg) no-repeat;} .menu li a#pkwlackierkabine {width:114px; background:url(images/pkw-lackieranlage-over.jpg) no-repeat;} .menu li a#lkwlackierkabine {width:114px; background:url(images/lkw-lackieranlage-over.jpg) no-repeat;} .menu li a#industrielackierkabine {width:114px; background:url(images/industrielackieranlage-over.jpg) no-repeat;} .menu li a#vorbereitung {width:114px; background:url(images/vorbereitung-over.jpg) no-repeat;} .menu li a#farbmisch {width:114px; background:url(images/farbmisch-over.jpg) no-repeat;} .menu li a#services {width:114px; background:url(images/service-over.jpg) no-repeat;} /* Styling der Liste oder Link Hover. Abhängig vom verwendeten Browser - besondere Behandlung für die Varianten des Internet Explorers */ .menu a:hover {visibility:visible;} /* fuer IE6 */ .menu li:hover {position:relative; z-index:200;} /* fuer IE7 */ /* Links transparent machen bei Hover- so das die HoverGrafiken in den Listen durchscheinen (fuer sogenannten No-Flicker-Effect) */ .menu li a#start:hover, .menu li:hover a#home, .menu li a#pkwlackierkabine:hover, .menu li:hover a#pkwlackierkabine, .menu li a#lkwlackierkabine:hover, .menu li:hover a#lkwlackierkabine, .menu li a#industrielackierkabine:hover, .menu li:hover a#industrielackierkabine, .menu li a#vorbereitung:hover, .menu li:hover a#vorbereitung, .menu li a#farbmisch:hover, .menu li:hover a#farbmisch, .menu li a#services:hover, .menu li:hover a#farbmisch {background:transparent;} /* Naechste Menuebenen (in diesem Menue werden nur 2 Ebenen benutzt, es sind jeodch weitere moeglich) werden unsichtbar gemacht indem sie mit left:-9999px; top:-9999px; aus dem Bildschirm geschoben wird. */ .menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;} /* Einstellungen fuer das erste Dropdown Sublevel level mit dem Einbinden der Hintergrundgrafiken für Normale und Hoover-Status Beschriftung nicht in der Grafik sondern als Text eingesetzt - Schriftart - ist ganz oben definiert - hier Verdana als erste ausgewaehlt*/ .menu :hover ul.sub {left:0; top:29px; background:url(images/submenue-over.jpg) no-repeat; white-space:nowrap; width:190px; height:auto;} .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:94px;} .menu :hover ul.sub li a {background:url(images/submenue-over.jpg) no-repeat;display:block; font-weight: bold; font-size:10px; height:20px; width:94px; line-height:20px; text-align: center; color:#000; text-decoration:none; border:1px solid #fff; border-width:0 0 0 1px;} .menu :hover ul.sub li a.fly {background:url(images/submenue-over.jpg) no-repeat;} .menu :hover ul.sub li a:hover { background:url(images/submenue.jpg) no-repeat; color:#000000;} .menu :hover ul.sub li a.fly:hover {background:url(images/submenue-over.jpg) no-repeat; color:#fff;} .menu :hover ul li:hover > a.fly {background:url(images/submenue-over.jpg) no-repeat; color:#fff;} /* Set-Up der entsprechende Fly-Out Level bei Hover */ .menu :hover ul :hover ul, .menu :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul :hover ul {left:90px; top:-4px; padding:3px 0; border:1px solid #888; white-space:nowrap; width:94px; z-index:200; height:auto; z-index:300;} </style> </head> <body> <div id="multi-level" > <img class="pad" src="http://xhtmlforum.de/images/quermenue-button-1.jpg" title="" alt="" /> <ul class="menu"> <li class="top p1"><a href="http://www.cssplay.co.uk" id="start" class="top_link"><span>Home</span></a></li> <li class="top p2"><a href="http://www.cssplay.co.uk" id="pkwlackierkabine" class="top_link"><span>pkwlackierkabine</span><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="../ie/" >Standart</a></li> <li><a href="../ie/" >Profi</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top p3"><a href="http://www.cssplay.co.uk" id="lkwlackierkabine" class="top_link"><span>lkwlackierkabine</span></a></li> <li class="top p4"><a href="http://www.cssplay.co.uk" id="industrielackierkabine" class="top_link"><span>industrielackierkabine</span></a></li> <li class="top p5"><a href="http://www.cssplay.co.uk" id="vorbereitung" class="top_link"><span>vorbereitung</span></a></li> <li class="top p6"><a href="http://www.cssplay.co.uk" id="farbmisch" class="top_link"><span>farbmisch</span></a></li> <li class="top p7"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>services</span></a></li> </ul> <img class="pad" src="http://xhtmlforum.de/images/quermenue-button-8.jpg" title="" alt="" /> </div> </body> </html> Wäre toll wenn mir jemand nen Tip geben könnte Danke Frank Hamm Geändert von pcklinik (10.09.2007 um 13:37 Uhr) Grund: Problem gelöst |
Sponsored Links |
|
||||
![]()
Nö, aber nach dem Kopieren deines Code-Beispiels habe ich im FF, IE und Opera nur eine weiße leer Seite
![]() Es wäre besser, wenn du diesen Testcase online stellen würdest, damit man wenigstens deine Images sehen könnte und somit besser einschätzen kann, was falsch läuft. Code:
Das Copyright in diesem Stylesheet muss zu jederzeit unangetastet bleiben. Alle Rechte vorbehalten.
__________________
Personal stuff Geändert von laborix (09.09.2007 um 12:24 Uhr) |
|
|||
![]()
Danke für das erste Feedback. So - ich habe jetzt eine Onlineversion zum schauen eingerichtet.
Hier ist die Online Version Bitte nicht wegen der Frames schimpfen - das will der Inhaber der Seite so haben. Vorgabe ist halt diese Navistruktur mit einem Waagerechten Untermenu sowie das das ganze ohne Java laufen muss. Wie gesagt der Frame in dem die Navigation läuft ist 844 pixel breit. die Summer der Grafiken auch. Ich arbeite auf einem MAC dort wird die Navi im Firefox 2.xx sowie im Safari einwandfrei angezeigt. Auf meinen PCs im IE7 wird dir ganz rechte (rote) Grafik umgebrochen. Hab schon einmal rumprobiert und festgestellt das sobald ich irgendwie 14 Pixel Breite bei irgendeiner Grafik einspare auch der IE7 die Navi einwandfrei anzeigt. Nur dann entsteht in den übrigen Browsern rechts so eine Art weisses Loch. Wäre klasse wenn mir jemand helfen könnte - steige leider erst gerade in CSS etwas tiefer ein. Gruss Frank |
|
||||
![]() Zitat:
- Opera 9 - IE 6/7 - Firefox 2 - Netscape 9 - Safari 3 beta Windows Alle Browser zeigen das weiße Loch, wird eine Auflösung von ein paar Pixel kleiner ( 960x768 ) verwendet, bricht dein letzter Navigationspunkt ebenfalls um. Somit behaupte ich mal, das ganze ist ein Problem mit der Breite und das die ganze Seite mit fixen Werten aufgebaut ist. Dein Problem liegt in den Breitenangaben. Teste ich mit 1280x1024 sehe ich rechts sehr viel weiß. Auch hier ist die fixe Breite das Problem. Empfehlung: Gibt das fixe Positionieren auf und mache deine Seite flexibel aund Skalierbar ![]()
__________________
Personal stuff |
|
|||
![]()
Danke für das Feedback. Auf dauer wird die Seite für größere Auflösungen als 1024x768 noch zentriert.
Das mit den fixen Größenangaben der Gesamtseite ist Vorgabe - daran kann ich nix ändern. Was ich nicht verstehe - wenn ich mir die Seite auf meinem MAC im Firefox bei 1024x768 ansehen, sieht sie wie folgt aus und die Navi wird einwandfrei dargestellt. ![]() Da gleiche im IE7 auf nem PC aber eben nicht. Da muss doch irgendwas im IE7 bezüglich des CSS-Navis anders interpretiert werden wenn das Navi umbricht - der Frame ist doch mit 844px exakt breit genug für die Navi. Also warum reichen 844px in Firefos zum darstellen aus und im IE7 nicht? Und genau danach suche ich schon fast 2 Tage - leider erfolglos Jemand eine Idee? Oder hab ich da mit meinen rudimentären Kenntnissen ein Verständnisproblem? Nachtrag: Ich habe jetzt gerade noch einmal auf dem PC verglichen: Firefox - wenn Fenster manuell auf Maxbreite aufgezogen ist habe ich den Umbruch auch - stelle ich aber oben auf Fenster maximieren - dann sieht es so aus wie auf dem MAC unter Firefox. Beim IE7 kann ich es genauso versuchen - jedoch auch mit maximiertem Fenster habe ich dort den Umbruch Geändert von pcklinik (09.09.2007 um 14:34 Uhr) |
|
||||
![]() Zitat:
Zitat:
Und wenn man deine Seite mit WindowsXP 1024x768 und großem Font (120dpi) betrachtet, macht Firefox im Vollbild ( 1024x768 ) genau das gleiche wie der IE. Bei 1280x1024 passt es wieder. Abgesehen davon, das es bei mir alle Browser waren (WindowsXP mit normalen Font 96dpi und mit großem Font 120dpi bei 1024 Pixel).
__________________
Personal stuff |
|
|||
![]()
Also der weiße Hintergrund wird wohl noch durch einen Farbverlauf ersetzt der bei größeren Auflösungen dann den freiwerdenden Raum füllen soll. Die eigentliche Seite soll dann mittig stehen.
Was ich aber grundsätzlich verstehen möchte ist das unterschiedliche Verhalten der Navigation bei 1024x768 in FF und IE7 Kann mir das jemand erklären? Also warum reicht der Platz im Frame von 844px im FF und nicht im IE7 ?? Dafür muss es doch eine Erklärung geben!?! Mag ja sein das ich da hartnäckig bin. ![]() |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Hilfe bei CSS Navigation | trimalchio | CSS | 7 | 10.01.2011 14:13 |
Performance Problem im IE7 in Zusammenhang mit CSS | RouL | CSS | 2 | 30.07.2007 12:36 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |