"Simples" Html/css prob

[Newbielein]

Wahrscheinlich ist die Lösung sehr simpel... aber ich find den Fehler einfach nicht


Die Buttons wollen sich nicht nebeneinander auflisten, sondern reihen sich untereinander auf...

Html teil:

 Spoiler

<div id="navi">
<p align="center">
<a href="index.html">Home</a>
<a href="index.html">Über uns</a>
<a href="index.html">Kontakt</a>
<a href="index.html">Gallerie</a>
<a href="index.html">Impressum</a>

</p>



</div>

Css Teil

 Spoiler

p a:link
{
display:block;
width:140px;
height:30px;
background-image:url(pic/button.png);
color: white;
text-decoration : none;
text-align:center;
padding:10px;
font-size:27px;
}
p a:visited
{
color: white;
text-decoration : none;
text-align:center;
}
p a:hover
{
background-image:url(pic/buttonh.png);
color: white;
text-decoration : none;
text-align:center;
}
p a:active
{
background-image:url(pic/buttonh.png);
color: white;
text-decoration : none;
text-align:center;
}

Ich hoffe es findet sich wer der mir kurz sagen kann worans liegt, danke

[ExChill]

Eine Navigation erstellst du am besten mit einer Liste ().

Diese kannst du dann über CSS mit dem Befehl display:inline horizontal ausrichten.

[Newbielein]

Erstmal danke.

Ich musste Inline-block verwenden..sonst zeigt es keinen Effekt.

Jedoch hat dies ein weiteres Problem geschaffen... diese Methode schein sich iwi am Anfang Platz zu reservieren... dadurch passt ein Button nicht mehr in die Reihe und das ganze wird unsymetrisch.

 Spoiler

<div id="navi">
<ul>
<a style="display:inline-block" href="index.html">Home</a>
<a style="display:inline-block" href="index.html">Über uns</a>
<a style="display:inline-block" href="index.html">Kontakt</a>
<a style="display:inline-block" href="index.html">Gallerie</a>
<a style="display:inline-block" href="index.html">Impressum</a>
</ul>




</div>

[KoKsPfLaNzE]

du solltest auch die a tags innerhalb der lis machen, hast du deine css bearbeitet, da es nun das p tag nicht mehr gibt.

[MrPuschel]

<ul>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
</ul>

ul li {
  display:inline-block;
}

[__BuRn3R]

mach einfach beim css teil bei li float:left;

[KoKsPfLaNzE]

was auch helfen könnte, wenn noch net klar kommst, noch ma das ganze ding posten, da sich ja bestimmt einiges geändert hat und dazu noch ein kleines bild wie es aussehen soll, dann wird dir sicher schneller geholfen.

[Newbielein]

Originally Posted by MrPuschel

<ul>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
</ul>

ul li {
  display:inline-block;
}

Diese Lösung bringt die Button s zwar in eine Reihe..aber verändert die Buttongrößen unnd der reservierte Platz ist auch da...

[MrPuschel]

Ich weis nicht genau was du meinst aber der Fehler liegt vermutlich in deinem CSS.

[Newbielein]

Css Teile die Beteiligt sind:

 Spoiler

div#navi {


width:850px;
height:120px;





}



ul a:link
{
width:140px;
height:30px;
background-image:url(pic/button.png);
color: white;
text-decoration : none;
text-align:center;
padding:10px;
font-size:27px;
}
ul a:visited
{
color: white;
text-decoration : none;
text-align:center;
}
ul a:hover
{
background-image:url(pic/buttonh.png);
color: white;
text-decoration : none;
text-align:center;
}
ul a:active
{
background-image:url(pic/buttonh.png);
color: white;
text-decoration : none;
text-align:center;
}



ul li {
display:inline-block;
width:160px;
height:50px;
}

[KoKsPfLaNzE]

ul li a {
display:inline-block;
}

und bitte link bei dem a tag entfernen

hilft soll es vielleich so aussehen?

[ExChill]

Was genau bringt das "block"?
Bei mir reicht einfach nur inline.

ul.navbar li {
	display:inline;
}

[MrPuschel]

[KoKsPfLaNzE]

das block ist dafuer das man dem inline tag eine breite und hoehe setzen kann, sonst geht es net so einfach.

[Slubbix]

Der reservierte Platz könnte durch den standardmäßigen Außenabstand (margin) des ul-Tags ausgelöst werden:

ul {margin: 0;}