Fehler bei Verwendung von CSS
0 
Felix Riesterer
0 0
Fehler bei Verwendung von CSS
MudGuardHallo.
Aufgrund mehrerer Forum-Beiträge habe ich jetzt angefangen, meinen Seitenaufbau mit CSS zu erstellen.
Aber leider funktioniert das noch nicht ganz so, wie ich mir das vorstelle. Ich poste mal einen Auszug aus meinem Quellcode mit, der im Internet Explorer genau so dargestellt wird, wie ich das möchte. Opera, Firefox und Netscape haben allerdings Probleme mit dem linken Navigationsmenü.
Die Navigation wird in IE untereinander dargestellt, während die Menüpunkte in den anderen Browsern nebeneinander angezeigt werden (die Hovereffekte und Links funktionieren auch nicht!).
Hat jemand eine Idee, was für einen Anfängerfehler(?) ich da gemacht habe?
Hier kommt der Quellcode:
<div style="position:absolute; text-align:center; left:10%; top:3%; width:80%; height:10%; z-index:8;">
<img style="height:100%;" alt="Meine Homepage" src="images/logo.jpg">
</div>
<div style="position:absolute; text-align:center; left:40%; top:4%; width:20%; height:8%; z-index:10; vertical-align:middle;">
<p style="font-size:16px; color:#000099; font-weight:bold;">MEINE HOMEPAGE</p>
</div>
<div style="position:absolute; left:3%; top:15%; width:95%; height:75%; z-index:5;">
<div style="margin-left:188px; background-color:#FFFFFF; z-index:2; text-align:right;">
<a class="navilink" href="index.php?Ziel=Aktuell">Aktuell</a> | <a class="navilink" href="index.php?Ziel=Kontakt">Kontakt</a> | <a class="navilink" href="index.php?Ziel=Sitemap">Sitemap</a> | <a class="navilink" href="index.php?Ziel=Suche">Suche</a>
</div>
</div>
<div style="position:absolute; left:3%; top:15%; width:170px; height:75%; background-color:#000099;
overflow:auto;">
<div style="text-align:center; margin-top:0px;">
<p style="width:100%; line-height:16px; background-color:#FFFFFF;"> </p>
<a href="index.php?Ziel=Websites" class="leftnavi">Websites</a><a href="index.php?Ziel=Privates" class="leftnavi">Privates</a><a href="index.php?Ziel=Galerie" class="leftnavi">Galerie</a><a href="index.php?Ziel=Guestbook" class="leftnavi">Gästebuch</a></div>
</div>
<div style="position:absolute; left:3%; top:15%; width:95%; height:75%; z-index:3;">
<div style="margin-left:188px; background-color:#000099; height:100%; overflow:auto; z-index:1; border-style:solid; border-color:midnightblue; border-width:1px;">
<br><h1>Meine Homepage</h1><p style="text-align:center;">Ich begrüße Sie recht herzlich auf meiner Homepage.</p>
<p style="text-align:center;"><img align="center" src="images/seiteninhalte/gengi.jpg" alt="Bild"></p>
<p style="text-align:center;">- Begruessungstext -</p></div>
</div>
<div style="position:absolute; left:3%; top:92%; width:95%; height:7%;">
<p align="center" style="color:#000099;">
Herzlich willkommen auf meiner Homepage.</p>
</div>
-
Lieber Thomas,
kann man sich das Ganze mal online "in Aktion" ansehen? Gibt es da einen Link?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
wenn hier einer was falsch darstellt ist das der IE!
ansonsten schließe ich mich dem vorredner an
-
Der Link ist www.thomas-gengler.de
Wär super wenn ich ein paar kritische Anmerkungen und ein paar konkrete Tipps bekommen würde (weniger zu den Inhalten usw. sondern zu der Verwendung von CSS - denn bislang habe ich das Layout noch mit Tabellen und Frames gemacht und betrete da gerade Neuland).
-
-
-
Guten Abend Thomas,
...der im Internet Explorer genau so dargestellt wird, wie ich das
möchte. Opera, Firefox und Netscape haben allerdings Probleme mit ...Wenn man einen nicht dem Standard entsprechenden Browser als Referenz nimmt, bekommt man natürlich mit standardkonformen Browser Probleme.
(die Hovereffekte und Links funktionieren auch nicht!).
MS IE kann kein :hover.
was für einen Anfängerfehler(?) ich da gemacht habe?
einen?
Zum Quellcode: Es werden mehrmals Klassen angesprochen - nur welcher Substanz haben diese? Welchem Standard soll der Quelltext denn entsprechen, sprich was für ein doctype? "|" ist mir bis jetzt im html-Code noch nicht untergekommen, aber vielleicht gibt es das Zeichen doch.
Steht die Seite schon im Netz, um sie mal anzusehen?Mit Gruß
Dada-
Hallo Dada.
(die Hovereffekte und Links funktionieren auch nicht!).
MS IE kann kein :hover.
Seit wann das? Für a-Elemente beherrscht er das sehr wohl.
Aber leider nicht für alle anderen Elemente.Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
Meine Browser: Opera 8.0 | Firefox 1.0.3 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0-
Hi,
MS IE kann kein :hover.
Seit wann das?ich erinnere mich dunkel an frühere Versionen. ^^ |scnr|
MfG Hopsel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001 -
Guten Abend Ashura,
(die Hovereffekte und Links funktionieren auch nicht!).
MS IE kann kein :hover.
Seit wann das? Für a-Elemente beherrscht er das sehr wohl.
Aber leider nicht für alle anderen Elemente.da ich nicht unbedingt immer nach Standard 08/15 verfahre, habe ich den Zeigerfokuseffekt bisher für manches eingesetzt, nur nicht für <a> ...
Und habe es dann (falsch) verallgemeinert.Mit Gruß
Dada
-
-
Wenn man einen nicht dem Standard entsprechenden Browser als Referenz nimmt, bekommt man natürlich mit standardkonformen Browser Probleme.
Aber trotzdem ist der IE noch immer der wohl am meisten verbreitete Browser...
Aber ich hab mir schon gedacht, dass ich einen (oder mehrere) Fehler gemacht habe, da die anderen Browser das nicht so interpretiert haben wie ich das gerne möchte.
Trotz einiger Beiträge war jedoch leider noch immer nichts dabei, was mir bei meinem Problem weiter helfen konnte...(die Hovereffekte und Links funktionieren auch nicht!).
MS IE kann kein :hover.
Die Hovereffekte und Links funktionieren im IE und in den anderen nicht.
Steht die Seite schon im Netz, um sie mal anzusehen?
www.thomas-gengler.de
Vor allen Dingen geht es mir erstmal um die Frage, wie ich meinen Code anpassen muss, dass die linke Seite (Naviagtionsführung) sich genau so verhält wie derzeit im IE bzw. woran das im Moment noch hängt.
Vielen Dank für die Hilfe,
Thomas-
Guten Abend Thomas,
Vor allen Dingen geht es mir erstmal um die Frage, wie ich meinen Code
anpassen muss, dass die linke Seite (Naviagtionsführung) sich genau so
verhält wie derzeit im IE bzw. woran das im Moment noch hängt.Bei mir im firefox 1.0 sehe ich links unter anderem ein dunkelblaues Feld mit den (statischen) Wörtern "Websites" und "Privates" auf hellblauem Grunde; aber tote Hose - keine Navigation.
Mit Gruß
Dada-
Bei mir im firefox 1.0 sehe ich links unter anderem ein dunkelblaues Feld mit den (statischen) Wörtern "Websites" und "Privates" auf hellblauem Grunde; aber tote Hose - keine Navigation.
Das ist Problem hab ich entdeckt - und um den Grund dafür heraus zu finden hab ich ja diesen Thread gestartet.
-
-
Hi,
(die Hovereffekte und Links funktionieren auch nicht!).
Gib dem dritten div (dem mit style="position:absolute; left:3%; top:15%; width:95%; height:75%; z-index:5;") mal noch background-color:yellow mit.
Dann wirst Du sehen, warum die Hover-Effekte und Links nicht funktionieren.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Dann wirst Du sehen, warum die Hover-Effekte und Links nicht funktionieren.
Hab den gesamten div-Block raus genommen.
Die Hover-Effekte, Links und auch die Breitenangabe width:99% wird trotzdem nicht umgesetzt!Liegt der Fehler etwa in den css-Angaben?
Quellcode:
a.leftnavi:link {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#99cbff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}
a.leftnavi:visited {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#99cbff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}
a.leftnavi:active {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#99cbff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}
a.leftnavi:hover {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#ff66ff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}a.leftnavichosen:link {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#ff66ff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}
a.leftnavichosen:visited {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#ff66ff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}
a.leftnavichosen:active {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#ff66ff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}
a.leftnavichosen:hover {color:#000099; font-weight:bold; text-align:center; width:99%; line-height:22px; font-size:16px; background-color:#ff66ff; border-style:solid; border-color:#dbdbdb; border-width:2px; font-family:tahoma; text-decoration:none;}-
Hi,
Dann wirst Du sehen, warum die Hover-Effekte und Links nicht funktionieren.
Hab den gesamten div-Block raus genommen.
Die Hover-Effekte, Links und auch die Breitenangabe width:99% wird trotzdem nicht umgesetzt!Benutz mal Firefox, ruf die Seite dort auf, ruf dann den DOM-Inspector auf, benutze "Search - Select Element by Click"
Dann wirst Du sehen, daß das 4. div gefunden wird.
Rechts im DOM-Inspector "DOM Node" auswählen, dann wird das style-Attribut samt Inhalt angezeigt.
Rechtsklick darauf, edit, dann wieder background-color hinzufügen.Staunen.
Vorgehensweise merken und ggf. selbsttätig so oft anwenden, bis die Probleme behoben sind.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Benutz mal Firefox, ruf die Seite dort auf, ruf dann den DOM-Inspector auf, benutze "Search - Select Element by Click"
...
Rechts im DOM-Inspector "DOM Node" auswählen, dann wird das style-Attribut samt Inhalt angezeigt.
Rechtsklick darauf, edit, dann wieder background-color hinzufügen.Das hört sich sehr interessant an, ich würde den DOM-Inspector auch gerne benutzen, habe ihn aber leider nicht finden können.
Ist er beim Firefox im Standardumfang enthalten oder eine Erweiterung?
Falls letzteres der Fall ist, wo gibt es diese Erweiterung?Viele Grüße
Daniel-
Hi,
Das hört sich sehr interessant an, ich würde den DOM-Inspector auch gerne benutzen, habe ihn aber leider nicht finden können.
Tools - Dom Inspector.
Der ist im normalen Installer mit dringewesen (kann sein, daß man Custom-Install machen muß statt Standard-Install.
Ist er beim Firefox im Standardumfang enthalten oder eine Erweiterung?
Im Installer ist er drin, ob er in der Standard-Installation drin ist, weiß ich nicht, die hab ich noch nie gemacht.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
-
Hallo,
Aber trotzdem ist der IE noch immer der wohl am meisten verbreitete Browser...
Das kommt immer darauf an um was für ein Zielpublikum es sich handelt.
Trotz einiger Beiträge war jedoch leider noch immer nichts dabei, was mir bei meinem Problem weiter helfen konnte...
Das ist manchmal ein wirkliches Problem in diesem Forum und es würde uns alle weiterbringen, wenn sich die Herrschaften mal zusammenreisen würden.
Wenn du der Englischen Sprache mächtig bist, dann würde ich dir auf jeden Fall die Seite: http://css.maxdesign.com.au/listamatic/ empfehlen. Dort wird gezeigt, wie man mit einfachen ungeordneten Listen wunderschöne, sogar verschachtelte Menüs erzeugen kann, die dann auch in so ziemlich allen Browsern sehr gute Dienste leisten.
Vor allen Dingen geht es mir erstmal um die Frage, wie ich meinen Code anpassen muss, dass die linke Seite (Naviagtionsführung) sich genau so verhält wie derzeit im IE bzw. woran das im Moment noch hängt.
Als allererstes würde ich dir dringend empfehlen, dass du dich mit der sinnvollen Auszeichnung deiner Inhalte auseinandersetzt. Das Element <div> sollte zum Beispiel eigentlich nur für Gruppierungen verwendet werden. Ein Menü ist eigentlich eine ungeordnete Liste von Links, die irgendwo hin verweisen. Ein Textabsatz sollte immer mittels <p> ausgezeichnet werden, Überschriften mit <h1>-<h6>, usw. usf..
Als guten Einstieg hierfür kann ich dir Björn Seiberts: Sinnhafte Websites - Überschriften, Textabsätze, Listen und Tabellen wirklich ans Herz legen.
Grüße
Jeena Paradies--
Nichts ist besser als Bass!
-
-
-
Hi,
Hat jemand eine Idee, was für einen Anfängerfehler(?) ich da gemacht habe?
Ja.
Hier kommt der Quellcode:
<div style="position:absolute; text-align:center; left:10%; top:3%; width:80%; height:10%; z-index:8;">
Du verwendest ohne Grund absolute Positionierung. Ich empfehle Dir, mal das Kapitel CSS-basierte Layouts durchzulesen. Du wirst feststellen, daß ein Layout ohne absolute Positionierung viele Vorteile hat und viele Nachteile absoluter Positionierung nicht hat.
freundliche Grüße
Ingo