✔ Anzeigeproblem im FF!

BSA · 29. Oktober 2005

Hi Leute!

Habe gerade wieder mal nen Problem mit dem IE und dem FF. Der IE zeigt es komischerweise so an wie ich es haben möchte, der FF leider nicht.
Ich habe mal ein Bild mit angehängt damit ihr sehen könnt was ich meine. Ich möchte die Navigationsleiste gerne über die ganze Breite Strecken.
ich FF gelingt das aber leider nicht. Hat jemand eine Idee wie ich das ändern könnte?

Bin über jede Impression Dankbar.

Gruß BSA

Code:

<html>
<head>
<style type="text/css">
<!--
body {
width: 100%;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#navcontainer ul li {
list-style-type: none;
padding-top: 1;
margin: 0;
display: block;
float: left;
background-image:url(img/nav_background.gif);
background-repeat:repeat-x;
font: 10px/30px "Lucida Grande", verdana, sans-serif;
text-align: left;
height:30px;
}

#navcontainer a {
color: #000;
text-decoration: none;
display: block;
width: 80px;
}

#navcontainer li#active {
background-image:url(img/back.gif);background-repeat:repeat-x;
}

#navcontainer a:hover {
background-image:url(img/back.gif);background-repeat:repeat-x;
}
-->
</style>
</head>
<body>

 <!-- Banner -->
 <div id="banner" style="background-image:url(img/ban_background.gif);background-repeat:repeat-x;height:150px;"></div>

 <!-- Navigation -->
       <div style="width:100%;padding-top:0px;background-image:url(img/nav_background.gif);background-repeat:repeat-x;">
        <div id="navcontainer" style="width:100%;">
         <ul id="navlist">
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
          <li><a href="#">&nbsp;&nbsp;Startseite</a></li>
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
          <li><a href="#">&nbsp;&nbsp;News</a></li>
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
          <li><a href="#">&nbsp;&nbsp;Team</a></li>
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
          <li><a href="#">&nbsp;&nbsp;Berichte</a></li>
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
          <li><a href="#">&nbsp;&nbsp;Ergebnisse</a></li>
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
          <li><a href="#">&nbsp;&nbsp;Gallery</a></li>
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
          <li><a href="#">&nbsp;&nbsp;Links</a></li>
          <li><img src="img/nav_trenner.gif" width="3" height="28" border="0" alt=""></li>
         </ul>
        </div>
       </div>
</body>
</html>

P.S.: Sorry wegen dem unscharfen Bild!

Gumbo · 29. Oktober 2005

Weise der Liste mal dieselbe Höhe wie den Listenelementen zu.

Darstellungsbezogene Fragen das nächste Mal bitte im CSS-Forum stellen.

BSA · 29. Oktober 2005

Ok, hab ich getan, aber bringt nichts...
Die Höhe ist ja auch in Ordnung, nur das Strecken über die Breite nicht.

BSA · 29. Oktober 2005

Ich habe zum besseren Verständniss das ganze mal kurz hochgeladen und um den Layer um den es geht schnell nen Rahmen gemacht das man mal sieht was da passiert!

http://onlyapage.de/markus/test/index.html

Maik · 29. Oktober 2005

Probier mal folgendes:

Code:

body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#navcontainer ul
{
list-style-type: none;
float: left;
width: 100%;
background-image: url(img/nav_background.gif);
background-repeat: repeat-x;
}

#navcontainer li {
padding-top: 1px;
margin: 0;
display: block;
float: left;
background-image:url(img/nav_background.gif);
background-repeat:repeat-x;
font: 10px/30px "Lucida Grande", verdana, sans-serif;
text-align: left;
height:30px;
}

#navcontainer a {
color: #000;
text-decoration: none;
display: block;
width: 80px;
}

ul#navcontainer li#active {
background-image:url(img/back.gif);
background-repeat:repeat-x;
}

ul#navcontainer a:hover {
background-image:url(img/back.gif);
background-repeat:repeat-x;
}

BSA · 29. Oktober 2005

Hey Super, im FF funktioniert es jetzt!
Im IE nichts mehr *rofl*

Ich guck gleich mal was du geändert hast....!

#edit

Aber dafür funktioniert der Mouseover jetzt auch nciht mehr, habs auch wieder hochgeladen!

Gumbo · 29. Oktober 2005

HTML:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<style type="text/css">
* {
	margin:			0;
	padding:		0;
}
body {
	padding-top:		150px;
	font-family:		Verdana, Arial, Helvetica, sans-serif;
	background:		url(http://onlyapage.de/markus/test/img/ban_background.gif) repeat-x;
}
#nav {
	list-style:		none;
	height:			30px;
	font-size:		11px;
	background:		url(http://onlyapage.de/markus/test/img/nav_background.gif) repeat-x;
}
#nav li {
	float:			left;
}
#nav li a {
	display:		block;
	padding:		0 2ex;
	line-height:		30px;
	background:		url(http://onlyapage.de/markus/test/img/nav_trenner.gif) no-repeat 100% 0;
}
#nav li a:hover {
	background:		url(http://onlyapage.de/markus/test/img/back.gif) repeat-x;
}
	</style>
</head>


<body>

<ul id="nav">
	<li><a href="#">Startseite</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Team</a></li>
	<li><a href="#">Berichte</a></li>
	<li><a href="#">Ergebnisse</a></li>
	<li><a href="#">Gallery</a></li>
	<li><a href="#">Links</a></li>
</ul>

</body>
</html>

Maik · 29. Oktober 2005

Sorry, hier der vollständige und fehlerfreie CSS-Code

Code:

body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#navcontainer ul
{
padding: 0 0 0 50px;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
background-image: url(img/nav_background.gif);background-repeat:repeat-x;
}

#navcontainer li {
padding-top: 1px;
margin: 0;
display: block;
float: left;
background-image:url(img/nav_background.gif);
background-repeat:repeat-x;
font: 10px/30px "Lucida Grande", verdana, sans-serif;
text-align: left;
height:30px;
}

#navcontainer a {
color: #000;
text-decoration: none;
display: block;
width: 80px;
}

#navcontainer li#active {
background-image:url(img/back.gif);background-repeat:repeat-x;
}

#navcontainer a:hover {
background-image:url(img/back.gif);background-repeat:repeat-x;
}

Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

BSA · 29. Oktober 2005

Na bestens!

@Maik
Vielen Dank so klappt es!

@Gumbo
Dir auch vielen dank, mit ein paar Anpassungen hätte dein Code denke ich auch geklappt hab jetzt aber Maik seinen benutzt!

Thema erledigt!

BSA · 29. Oktober 2005

Jetzt würde ich gerne noch ne Farbe drüber packen, sodass die halbtransparent ist, geht das auch irgendwie? Ich würde das so machen das man jetzt in <li></li> noch mal nen Layer packt, ist das irgendwie möglich?

✔ Anzeigeproblem im FF!

BSA

Erfahrenes Mitglied

Anhänge

Gumbo

Erfahrenes Mitglied

BSA

Erfahrenes Mitglied

BSA

Erfahrenes Mitglied

Maik

BSA

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Maik

BSA

Erfahrenes Mitglied

BSA

Erfahrenes Mitglied

Neue Beiträge