"Simples" Html/css prob

02/10/2013 21:26 Newbielein#1
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:


Css Teil



Ich hoffe es findet sich wer der mir kurz sagen kann worans liegt, danke
02/11/2013 01:35 ExChill#2
Eine Navigation erstellst du am besten mit einer Liste ([Only registered and activated users can see links. Click Here To Register...]).

Diese kannst du dann über CSS mit dem Befehl display:inline horizontal ausrichten.
02/11/2013 06:56 Newbielein#3
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.


02/11/2013 08:00 KoKsPfLaNzE#4
du solltest auch die a tags innerhalb der lis machen, hast du deine css bearbeitet, da es nun das p tag nicht mehr gibt.
02/11/2013 09:42 MrPuschel#5
HTML Code:
<ul>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
</ul>
HTML Code:
ul li {
  display:inline-block;
}
02/11/2013 12:36 __BuRn3R#6
mach einfach beim css teil bei li float:left;
02/11/2013 13:11 KoKsPfLaNzE#7
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.
02/11/2013 14:16 Newbielein#8
Quote:
Originally Posted by MrPuschel View Post
HTML Code:
<ul>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
   <li>
      <a></a>
   </li>
</ul>
HTML Code:
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...
02/11/2013 14:31 MrPuschel#9
Ich weis nicht genau was du meinst aber der Fehler liegt vermutlich in deinem CSS.
02/11/2013 14:35 Newbielein#10
Css Teile die Beteiligt sind:
02/11/2013 14:42 KoKsPfLaNzE#11
ul li a {
display:inline-block;
}

und bitte link bei dem a tag entfernen

hilft soll es vielleich so aussehen?
02/11/2013 18:04 ExChill#12
Was genau bringt das "block"?
Bei mir reicht einfach nur inline.

Code:
ul.navbar li {
	display:inline;
}
02/11/2013 20:39 MrPuschel#13
[Only registered and activated users can see links. Click Here To Register...]
02/12/2013 07:42 KoKsPfLaNzE#14
das block ist dafuer das man dem inline tag eine breite und hoehe setzen kann, sonst geht es net so einfach.
02/12/2013 12:47 Slubbix#15
Der reservierte Platz könnte durch den standardmäßigen Außenabstand (margin) des ul-Tags ausgelöst werden:
Code:
ul {margin: 0;}