Ergebnis 1 bis 9 von 9
  1. #1
    thesa ist offline Jungspund
    registriert
    28-02-2006
    Beiträge
    10

    CSS Navigation in Firefox

    Hallo erstmal
    Ich hab ein Problem mit meiner Navigation. Ich erstelle eine Homepage mit einer Navigation aus CSS.

    Ansicht im Internet-Explorer
    Ansicht im Firefox

    Auf den 2 Bildern seht ihr meinen jetztigen Stand. Das Problem ist das die Navigation im Firefox kein Block ist und ich somit keine Hintergrundfarbe darstellen kann und es meinen Text von unten immer zu weit hochnimmt. (Das zweite sieht man auf dem Bild nicht)
    Ich habe auf dem Bild vom Firefox alle Blöcke mit dem Webentwicklungserweiterung dargestellt. Die vorhandenen Blöcke bekommen einen farbigen Rand, wobei die Navigation leider leer ausgeht. Ich hab die ganze Navigation in einem div tag, welchem ich zustäzlich noch eine Klasse zugewiesen habe. Und da ich das ganze im css definiert habe, sollte das eigentlich einen Block sein.

    Der Code sieht bissher so aus:
    HTML:
    Code:
        <div class="navdiv">
          <ul class="navlist">
            <li class="active"><span>Home</span></li>
            <li><a href="#">Angebot</a></li>
            <li><a href="navbar-kunst2.html">Betriebe</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Wollen Sie helfen?</a></li>
            <li><a href="#">Kontaktanfrage</a></li>
          </ul>
        </div>
    CSS:
    Code:
    .navdiv {
    	margin-right: 10%;
    	background: red;
    	padding: 0;
            height: 0px;
    }
    
    .navdiv .navlist a, .navlist span{	
    	white-space:nowrap;										
    	display:inline;
    	display:block;
    	color: #444444;											
    	width: auto;
    	text-decoration: none;										
    	background: #73b06d;
    	padding: 0.15em 0.7em;
    	margin: 0;
    	border-left: 1px solid #ffffff;								
    	border-top: 1px solid #ffffff;
    	border-right: 1px solid #096826;
    	border-bottom: 1px solid #096826;
    }
    
    .navdiv .navlist ul{											
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	border: none;
    }
    
    .navdiv .navlist li{											
    	display: block;
    	float: left;												
    	width: auto;
    	margin: 0;
    	padding: 0;
    }
    
    .navdiv .navlist span{
    	border-left: 1px solid #096826;
    	border-top: 1px solid #096826;
    	border-right: 1px solid #fff;
    	border-bottom: 1px solid #fff;
    	background-color: white;
    	color: black;
    }
    
    .navlist a:hover, .navlist A:active { 
    	background: #096826; 
    	color: white;
    }
    Ich hoffe ihr versteht mein Problem und könnt mir helfen. Ich gebe echt bald auf mit dem Zeugs.
    Ach jo und ich weiss der Code ist noch nicht sauber, das display:inline;display:block; wird sicher noch bereinigt, sollte aber für das Block zeug nicht entscheidend sein.

    Thesa

  2. #2
    blindalley ist offline Grünschnabel
    registriert
    28-02-2006
    Ort
    Hamburg
    Beiträge
    1

    AW: CSS Navigation in Firefox

    Möglicherweise tut es:

    background-color:#red;

  3. #3
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: CSS Navigation in Firefox

    Wenn du in deinem Navicontainer ne Höhe von 0px definierst, dann haste auch 0px Hintergrundfarbe, also gar keine.
    bine

  4. #4
    thesa ist offline Jungspund
    registriert
    28-02-2006
    Beiträge
    10

    AW: CSS Navigation in Firefox

    Und wie kann ich diese Höhe genau so anpassen, dass sie genau so hoch ist wie die Navigation. Ich meine egal wie gross die Schriftgrösse ist, oder ob das Menü wegen zu knapper Bildschrimbreite zusammklappt. Das height: ??; soll immer so hoch wie die Navigation sein.

  5. #5
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: CSS Navigation in Firefox

    Das kann ich Dir anhand deines Codes nicht so einfach erklären, weil ich das ganz anders aufbaue.

    Deshalb hier mal der komplette Code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *	{
    margin:0;
    padding:0;
    }
    
    #navicontainer	{
    	position:absolute;
    	width:90%;
    	background:#FF5F00;
    	float:left;
             border-left: 1px solid #ffffff;
    	border-top: 1px solid #ffffff;
    	border-right: 1px solid #096826;
    	border-bottom: 1px solid #096826;
             font-size:100%;
             color: #444444;
    }
    
    #navicontainer ul	{
    	list-style-type: none;
    }
    
    #navicontainer ul li{
    	float:left;
           	border-left: 1px solid #096826;
    	border-top: 1px solid #096826;
    	border-right: 1px solid #fff;
    	border-bottom: 1px solid #fff;
    }
    
    #navicontainer ul li a:link, #navicontainer ul li a:visited	{
             padding:0.15em 0.7em;
    	display:block;
    	text-decoration:none;
    	color: #000;
             background: #73b06d;
    }
    
    #navicontainer ul li a:hover, #navicontainer ul li a:active {
    	background:#096826;
    	color: #fff;
    }
    
    .active	{
    	background:#fff;
             padding:0.15em 0.7em;
    }
    
    </style>
    </head>
    <body>
    <div id="navicontainer">
    	                 <ul>
    	                         <li class="active">Home</li>
    	                          <li><a href="#">Angebot</a></li>
    	                          <li><a href="navbar-kunst2.html">Betriebe</a></li>
    	                          <li><a href="#">Über uns</a></li>
    	                          <li><a href="#">Wollen Sie helfen?</a></li>
    	                          <li><a href="#">Kontaktanfrage</a></li>
     </div>
    </body>
    </html>
    http://www.2median.de/zeug/navbackground.html
    Geändert von bine (01-03-2006 um 21:07 Uhr)
    bine

  6. #6
    Avatar von slosd
    slosd ist offline Kaiser
    registriert
    19-02-2006
    Beiträge
    1.359

    AW: CSS Navigation in Firefox

    Das Problem bei FF ist ja, dass es solche Größenangaben haargenau umsetzte. Auch wenn z.b. ein Div-Element ein anderes umschließt.
    Du musst halt schaun wieviel pixel das Menü hoch ist. Einfach herum probieren.

    Ehrlich gesagt gefällt mir das Menü ohne roten Hintergrund viel besser !

  7. #7
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: CSS Navigation in Firefox

    @slost:

    1. ist die genaue Umsetzung der Angaben die man macht kein Firefox Problem sondern der Firefox ist zum Glück ein Browser der das richtig umsetzt was man schreibt.

    2. Versteh ich nicht. Wieso soll man rumfummeln und schaun wieviel Pixel das Menü groß ist, schließlich kann die Schriftgröße vom Betrachter verändert werden und dann muß es immer noch passen. In diesem Beispiel gibt es keine Festlegung auf eine Größe.

    3. Mir gefällt das Menü auch ohne den roten Hintergrund besser, aber wie sagt man so schön... "Der Kunde ist König"
    bine

  8. #8
    thesa ist offline Jungspund
    registriert
    28-02-2006
    Beiträge
    10

    AW: CSS Navigation in Firefox

    Hi
    Um hier mal die wichtigste Frage zu klären, NEIN der Hintergrund bleibt sicher nicht rot, sondern wird das gleiche grün annehmen wie das Menü. Damit ich aber weiss welche Farbe was macht hab ich das übergangsweise rot gewählt. So viel zum Thema.

    @bine danke viel mal für deine Arbeit, nur bin ich immernoch überfordert. Ich hab zu dem ganzen Menü auch noch ein Untermenü und ich versuchte nun deinen Code zu erweitern damit das ganze auch noch ein Untermenü gibt. Leider bin ich kläglich gescheitert. Und da mein code doch sehr verschieden ist von deinem kann ich auch meinen fast fertigen code nicht noch ausbessern, denn ich weiss nicht wie.

    Wenn du also noch ne Idee hättest währ ich dir sehr sehr dankbar.

    Hier nochmals mein bisherigen stand.
    Code:
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *	{
    margin:0;
    padding:0;
    }
    
    .navcontainer {
    	margin: 0;
    	padding: 0;
    	height: 3.8em;
    }
    
    .navcontainer ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    .navcontainer li {
    	display: block;
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: auto;
    }
    
    .navlist, .navlist2 {
    	padding: 0;
    	margin: 0;
    	clear: both;
    }
    
    .navcontainer a, .navcontainer span {	
    	white-space: nowrap;
    	display: inline;
    	display: block;
    	color: #444444;
    	width: auto;
    	text-decoration: none;
    	background: #73b06d;
    	margin: 0;
    	padding: 0.15em 0.7em;
    	border-left: 1px solid #ffffff;
    	border-top: 1px solid #ffffff;
    	border-right: 1px solid #096826;
    	border-bottom: 1px solid #096826;
    }
    
    .navlist2 a /*.navlist2 span*/ {
    	white-space: nowrap;
    	display: inline;
    	display: block;
    	color: #444444;
    	width: auto;
    	text-decoration: none;
    	background: #a1a1a1;
    	margin: 0;
    	padding: 0.15em 0.7em;
    	border-left: 1px solid #ffffff;
    	border-top: 1px solid #ffffff;
    	border-right: 1px solid #595959;
    	border-bottom: 1px solid #595959;
    }
    
    .navcontainer a:hover, .navcontainer a:active {
    	background: #096826;
    	color: white;
    }
    
    .navcontainer a.active:link, .navcontainer a.active:visited {
    	background: #096826;
    	color: white;
    	font-weight: bold;
    }
    
    .navlist span {
    	border-left: 1px solid #096826;
    	border-top: 1px solid #096826;
    	border-right: 1px solid #ffffff;
    	border-bottom: 1px solid #ffffff;
    	background-color: white;
    	color: black;
    }
    
    .navlist2 span {
    	border-left: 1px solid #595959;
    	border-top: 1px solid #595959;
    	border-right: 1px solid #ffffff;
    	border-bottom: 1px solid #ffffff;
    	background-color: white;
    	color: black;
    }
    
    </style>
    </head>
    <body>
        <div class="navcontainer">
          <ul class="navlist">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Angebot</a></li>
            <li><span>Betriebe</span></li>
            <li><a href="navbar-kunst2.html">Über uns</a></li>
            <li><a href="#">Wollen Sie helfen?</a></li>
            <li><a href="#">Kontaktanfrage</a></li>
          </ul>
          <ul class="navlist2">
            <li><a href="#">Café</a></li>
            <li><a href="#">Mechanik</a></li>
            <li><a href="#">Montage</a></li>
            <li><a href="#">Ausrüsterei</a></li>
            <li><span>Kunsthandwerk</span></li>
            <li><a href="#">Hauswirtschaft</a></li>
            <li><a href="#">Ausbildung</a></li>
          </ul>
        </div>
    </body>
    </html>

  9. #9
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: CSS Navigation in Firefox

    Du kannst Dir auch mal ansehen was hier gestrickt wurde (siehe die letzten Beiden Beispiele auf der Seite) um die Navi zu erarbeiten.
    Eine dynamische Unternavigation die ein und ausblendet wird allerdings nur unter zuhilfenahme von javascript möglich sein.

    http://de.selfhtml.org/css/layouts/a...javascript.htm
    bine

Ähnliche Themen

  1. Firefox will meine Navigation nicht anzeigen
    Von blockbuster im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 06-12-2005, 00:19
  2. Firefox ärgert mich Part 2/?: CSS -Styles
    Von bubu-der-uhu im Forum Allgemeines
    Antworten: 3
    Letzter Beitrag: 31-05-2005, 16:08
  3. CSS & FireFox
    Von bossi im Forum CSS und (X)HTML
    Antworten: 6
    Letzter Beitrag: 25-03-2005, 15:11
  4. firefox & iframe & css
    Von thorge im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 07-03-2005, 11:39
  5. CSS -/- Mozilla Firefox
    Von Domovoi im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 12-12-2004, 20:28

Lesezeichen

Berechtigungen

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