Relative Positionierung mehrerer Buttons in einem Layer

[Matti_Maniac]

Hallo Zusammen!
In meiner Urlaubswoche habe ich auf Grund des einigermaßen schlechten
Wetters in den letzten Tage mal wieder Zeit gehabt etwas mit PHP, CSS
und co zu fummeln... Dabei habe ich mir etwas gebaut was ich aber irgend-
wie eleganter gestalten möchte! Folgendes:

Ich habe diese Navi Grafik..



Das ganze hab ich jetzt als <map> mit <areas> belegt. Tolle Effekte und
Mouseover kommen dann, aber darum geht es gerade nicht
Kann ich irgendwie einen div Layer anlegen mit 600 px Breite, darin möchte
ich jetzt diese klickbaren Buttons als sechs Einzelnbuttons haben. Aber "re-
lativ" angeordnet immer mit demselben Abstand zueinander und nach außen.
Ist sowas überhaupt ganz unkompliziert möglich?

Danke euch! Liebe Grüße Matti

[sejuma]

Eine relative Positionierung brauchst du dazu nicht, auch kein img-map.
Du schreibst deine Navi in Form einer ul-Liste und definierst per CSS die einzelnen Listeneinträge und Links.
Denen kannst du eine fixe Breite geben, z.B. orientiert am längsten Link und den Text dann mittig ausrichten.
Genügend Beispiele findest du hier.

[mogidala]

oder anstatt der fixen breite (was zu unterschiedlichen abständen zwischen den einzelnen "bildwörtern" führen würde) einfach mit margin (außenabstand) oder padding (innenabstand) arbeiten.

[Matti_Maniac]

Super! Das sind schon mal Anhaltspunkte, die ich zur Realisation befolgen
werde! Danke euch für die Hilfe! Das Board ist wahnsinnig gut, ich habe
hier auch noch ein paar andere Sachen gefunden, die mir weitergeholfen
haben! Danke quasi allen Schreibern hier!!

[Matti_Maniac]

Nochmal eine Frage von mir, die ich beim allerbesten Willen
nicht lösen kann... Ich stehe quasi am Rand der Verzweiflung
und sehe das Problem nicht..?!
Warum ist das hier nicht zentriert sondern etwas nach rechts
verschoben?????
Ich checks nich.. Kann mich jemand vielleicht in die richtige
Richtung stoßen??
Funktioniert weder in FF noch in IE........
Danke und Liebe Grüße, Matti!

ul#logos li {
    display: inline;

}

<center>
<ul id="logos">
<li><img src="img/logos/1.jpg"></li>
<li><img src="img/logos/2.jpg"></li>
<li><img src="img/logos/3.jpg"></li>
<li><img src="img/logos/4.jpg"></li>
<li><img src="img/logos/5.jpg"></li>
</ul>
</center>

[Matti_Maniac]

Ich hab nochmal was ausprobiert... Ich meine der DIV Layer
"logo" ist ja jetzt schön zentriert.. Aber der Inhalt darin nicht!
Ich checks nich

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

ul#logos li {
    display: inline;
}

div#logo {
    margin-left: auto;
    margin-right: auto;
    width:950px;
}

[sejuma]

Definiere mal noch

ul {margin: 0;}

Ansonsten poste bitte einen Link zur Seite, damit man alles im Zusammenhang sieht.

[mogidala]

und ggf. auch das padding auf 0 setzen!