Diverse Fragen zu meiner Homepage

[prm]

Der Abstand zwischen blauen und weißen Rahmen rührt daher, dass li mit display: inline; definiert ist.
Du kannst es mal so versuchen, indem du li floatest:

ul {
width: 500px; margin: 0 auto;  
  padding: 0;
}

li {
  border-left: 0.1em solid white;
  border-right: 0.1em solid blue;
float: left;
  font-size: x-large;
  list-style: none;
}

Nach </ul> musst du dann noch clearen.

Besser wäre es m.E., wenn alle li eine gleiche Breite hätten. Dann könntest du unter Berücksichtigung der Rahmen die genaue Breite von ul ermitteln und dann ul auch exakt zentrieren. Der von mir verwendete Wert von 500px ist nur ein Annäherungswert.

 

[W31L1]

Hallo, ich habe gemacht was du vorgeschlagen hast, siehe hier: W31L1 | Home
Jedes li-Element hat die Breite 120 Pixel, jeder Border 2 Pixel: 5 x 120 Pixel + 4 x 2 Pixel = 608 Pixel Breite für ul.

Allerdings... finde ich, sieht es jetzt nicht so toll aus mit fester Breiter für jedes li-Elementen. Ich wusste schon, dass man mit float:left die Abstände zwischen den Rahmen von den li-Elementen wegmachen kann, von hier: Listamatic: Rollover horizontal list navbar

Aber es war halt das Problem, dass die ganze Navi dann nach links oder rechts verschoben ist, je nachdem, ob man float:left oder right gewählt hat. Weder mit text-align:center nocht mit margin: auto konnte ich die Navi zentrieren. So, wie du es vorgeschlagen hast mit fester Breite für jedes li-Element geht es, aber wie gesagt, ich finde es sieht nicht besonders gut aus. Gibt es noch eine andere Möglichkeit, die Navi zu zentrieren?

Noch was: Ich konnte die Tabellen auf meiner Homepage nur mit margin:auto zentrieren, text-align: center funktionierte nicht. Weiß jemand vielleicht warum?

Edit: Hab es mal versucht, die ganze Liste in ein <div>-Tag zu packen und den <div>-Tag per margin:auto und text-align:center zu zentrieren, hat nicht geklappt.

 

[neuroleptika]

... sieht es jetzt nicht so toll aus mit fester Breiter für jedes li-Elementen.

Dann bleibe bei display: inline;
Die Abstände sind nur die Abstände/Zeilenumbrüche zwischen den Elementen im Quelltext. Die werden bei inline-Elementen bzw. display:inline genauso dargestellt wie Leerzeichen im Fließtext. Entweder du schreibst sie alle direkt nebeneinander oder du kommentierst die Umbrüche aus:

<ul id="navlist">
<li id="first"><a id ="currentpage" href="index.html">Home</a></li><!--
--><li><a href="biographie.html">Biographie</a></li><!--
--><li><a href="galerie/index.php">Galerie</a></li><!--
--><li><a href="downloads.html">Downloads</a></li><!--
--><li><a href="links.html">Links</a></li>
</ul>

...
Noch was: Ich konnte die Tabellen auf meiner Homepage nur mit margin:auto zentrieren, text-align: center funktionierte nicht. Weiß jemand vielleicht warum?
...

Mit text-align: center; werden nur Inline-Inhalte zentriert. Also inline-Elemente bzw (display: inline) oder text-Inhalt.
Blockelemente kann man nur über die Außenabstände (margin) zentrieren.

Nur Internetexplorer zentrieren ganze Blöcke.

(Ab IE8 und ff3 (Safari?) geht das es auch mit dem display-Wert inline-Block.)

 

[W31L1]

Entweder du schreibst sie alle direkt nebeneinander oder du kommentierst die Umbrüche aus.

Danke, hat perfekt geklappt! Vielen Dank auch an alle anderen, die mir geholfen haben. Habe keine weiteren Fragen mehr... vorerst... ;)