Ergebnis 1 bis 8 von 8

Thema: Hilfe mit Navigations CSS - IE klappt, Firefox/Opera nicht

  1. #1
    HTML Newbie
    Registriert seit
    09.08.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hilfe mit Navigations CSS - IE klappt, Firefox/Opera nicht

    Hallo,

    bin etwas am verzweifeln. habe ein Seitenlayout per css definiert. Die bunten Kästen sollen dann mit Inhalt gefüllt werden.

    Ich habe auch zwei Boxen angelegt, die die Haupt- bzw. Unternavigation aufnehmen sollen. Unter IE sieht das ganze sehr vernünftig aus, jedoch unter Firefox/Opera werden die Naviagtionspunkte versetzt angezeigt und auhc das Rollover ist nicht zu sehen.

    Kann mal jemand einen Blick drauf werfen und mir weiterhelfen bitte?

    Hier geht es zur Seite

    Weiss nicht ob das hilft, aber ich schreib hier mal die css-Datei rein:

    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    margin: 0px;
    }

    /* Kopfbereich fuer Logo */
    #header {
    height: 101px;
    padding: 0px;
    background-color: #38ff03;
    }

    /* Container fuer die Hauptnavigation */
    #hNavContainer {
    height: 23px;
    padding: 0px;
    background-color: #FF0000;
    }

    /* Container fuer die Unternavigation */
    #uNavContainer {
    height: 20px;
    padding: 0px;
    background-color: #ff8003;
    }

    /* Bereich rechts fuer Newsbox etc */
    #right {
    background-color: #c30dff;
    width: 141px;
    min-height: 100px;
    float: right;
    margin-left: -3px;
    }

    /* Container fuer Seiteninhalt */
    #content {
    background-color:#ffeb0d;
    width: 579px;
    height: 600px;
    float: left;
    }

    /* Container fuer Seitenfuss */
    #footer {
    background-color: #0dfff6;
    height: 32px;
    font-size: 1px;
    }


    /* Hauptnavigation */
    #hNav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    #hNav ul li {
    display: inline;
    background-color: #e6e6e6;
    }

    #hNav ul li a {
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    height: 23px;
    padding: .3em .6em;
    color: #3d4695;
    background-color: #e6e6e6;
    border: 0px solid #FF0000;
    }

    #hNav ul li a:hover {
    color: #3d4695;
    background-color: #e6e6e6;
    background-image: url(hNavRollover.jpg);
    background-repeat: no-repeat;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Fortgeschrittene/r
    Registriert seit
    07.07.2006
    Beiträge
    160
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    #hNav ul li a:hover { 
        background: url(hNavRoll.jpg) no-repeat; 
    }
    Gruß
    Kathrin

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    09.08.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Danke für die Antwort. Leider behebt das keines meiner Probleme. Im IE sieht es noch wie vor ok aus, aber weder der Versatz der hNav-Elemete wird behoben, noch zeigt Firefox/Opera das Rollover-Bild korrekt an.

    Hat noch jemand eine Idee??

  4. #4
    Meister(in)
    Registriert seit
    04.01.2006
    Ort
    Gotha
    Beiträge
    430
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ich denke das das problem bei ie liegt, weil er ie (soeit ich weiß) höhenangaben von links annimmt, was aber kein anderer browser macht, und das ist glaub ich auch nicht valide. du müsstest nur bei deinen linksdisplay: block angeben. also deine links warn glaub ich #hnav,also würde das dann so aussehen:
    Code:
    #hNav ul li a {
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    height: 23px;
    padding: .3em .6em;
    color: #3d4695;
    background-color: #e6e6e6;
    display: block;
    }
    hoffe das ist richtig was ich hier gesagt habe ..

    mfg

    //edit: leider funtzt das nicht so wie ich es gehofft hatte, deswegen musst du wahrscheinlich jeden link ein class zuweißen, und nicht mit id für den ganzen nav bereich arbeiten. dabei musst du wieder display: block einfügen, bei den class.

    mfg
    Das Leben ist binär. Entweder Du bist eine 0 oder eine 1.
    Meine Seite: sr-web.de

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    09.08.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Uih...bin doch ein Noob. Kannst Du das etwas genauer erklären, wie Du das mit den class für jeden Link meinst?

    Danke sehr ))

  6. #6
    Meister(in)
    Registriert seit
    04.01.2006
    Ort
    Gotha
    Beiträge
    430
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hmm, also war ich mit meinem display block eig völlig flasch, weil er damit alles untereinander anzeigt, ich habe jetzt mal was probiert, doch es ist genauso wie du es haben möchtest ..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <link rel="stylesheet" href="css/standard.css" type="text/css" />
    <style type="text/css">
    <!--
    body &#123;
    font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size&#58; 12px;
    text-align&#58; center;
    margin&#58; 0px;
    &#125;
    
    /* Kopfbereich fuer Logo */
    #header &#123;
    height&#58; 101px;
    padding&#58; 0px;
    background-color&#58; #38ff03;
    &#125;
    
    /* Container fuer die Hauptnavigation */
    #hNavContainer &#123;
    height&#58; 23px;
    padding&#58; 0px;
    background-color&#58; #FF0000;
    &#125;
    
    /* Container fuer die Unternavigation */
    #uNavContainer &#123;
    height&#58; 20px;
    padding&#58; 0px;
    background-color&#58; #ff8003;
    &#125;
    
    /* Bereich rechts fuer Newsbox etc */
    #right &#123;
    background-color&#58; #c30dff;
    width&#58; 141px;
    min-height&#58; 100px;
    float&#58; right;
    margin-left&#58; -3px;
    &#125;
    
    /* Container fuer Seiteninhalt */
    #content &#123;
    background-color&#58;#ffeb0d;
    width&#58; 579px;
    height&#58; 600px;
    float&#58; left;
    &#125;
    
    /* Container fuer Seitenfuss */
    #footer &#123;
    background-color&#58; #0dfff6;
    height&#58; 32px;
    font-size&#58; 1px;
    &#125;
    
    
    
    #hNav&#123;
    display&#58; run-in;
    background-color&#58; #e6e6e6;
    height&#58; 23px;
    &#125;
    
    
    a.link &#123;
    text-decoration&#58; none;
    font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size&#58; 10px;
    font-weight&#58; bold;
    height&#58; 23px;
    padding&#58; .3em .6em;
    color&#58; #3d4695;
    background-color&#58; #e6e6e6;
    border&#58; 0px solid #FF0000;
    display&#58; run-in;
    &#125;
    
    a.link&#58;hover &#123;
    
    color&#58; #3d4695;
    background-color&#58; #e6e6e6;
    background-image&#58; url&#40;hNavRollover.jpg&#41;;
    background-repeat&#58; no-repeat;
    height&#58; 23px;
    display&#58; run-in;
    &#125;
    -->
    </style>
    
    
    
    </head>
    
    <body>
    
    <div style="width&#58;760px;margin&#58;0px auto;text-align&#58;left;background-color&#58;#bdbec6;border&#58;1px solid #000000;">
    
    	<div id="header"></div>
    	<div id="hNavContainer">
    
     		<div id="hNav">
    
    			Unternehmen
    			Dienstleistungen
    			Kontakt
    
    			Informationen
    			Partner
    			Links
    			Referenzen
    			Jobs
    			Impressum
    
    
    		</div>
    
    	</div>
    	<div id="uNavContainer"></div>
    	<div id="content"></div>
    	<div id="right"></div>
    
    	<br style="clear&#58;both;" />
    
    	<div id="footer"></div>
    
    
    </div>
    
    </body>
    </html>
    vlt kannste damit weiterarbeiten. aber wie gesagt, so wie du das haben wolltest hab ich das net hinbekommen

    mfg
    Das Leben ist binär. Entweder Du bist eine 0 oder eine 1.
    Meine Seite: sr-web.de

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    09.08.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Danke schonmal für Deine Mühe,

    im IE sieht es nach wie vor gut aus.

    Der Firefox verschiebt die Hyperlinks irgendwie immer noch 1 oder 2 Pixel nach oben. Sehr seltsam.

    Und komischerweise macht der Opera aus Deinem Sytlesheet eine Liste untereinander.

    Noch eine Idee?

  8. #8
    Meister(in)
    Registriert seit
    04.01.2006
    Ort
    Gotha
    Beiträge
    430
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ich hätte nur noch die idee die ganze navi leiste grau zu machen, und das rot rauszunehmen. mehr würde mir aber auch nicht einfallen, sry

    mfg
    Das Leben ist binär. Entweder Du bist eine 0 oder eine 1.
    Meine Seite: sr-web.de

Ähnliche Themen

  1. probleme mit inet explorer / in firefox klappt es
    Von igeligel im Forum HTML & CSS Forum
    Antworten: 22
    Letzter Beitrag: 10.08.2006, 20:16
  2. Bestellformular geht mit Firefox,Opera aber nicht mit IE
    Von tom88 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 16.07.2006, 01:46
  3. IE-Firefox-Opera
    Von L.L. im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 25.03.2006, 19:18
  4. Hilfe - das klappt so nicht
    Von Minksi im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 15.07.2005, 17:13
  5. Seite wird mit IE nicht dargestellt, Opera & Firefox sch
    Von Bullfrogman im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 28.04.2005, 12:31

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •