✔ Button in center setzen

[Jam-Mc]

Guten Tag

Ich habe ein problem mit dem css da bin ich leider noch nicht so gut drin

Ich habe 5 Buttons die sind immoment von links nach rechts was ja auch sein soll aber ich habe eine funktion ein gebaut das ich die buttons sperren lassen kann oder oder der user die sperrt

mein problem ist wenn ein button gesterrt ist bleiben die anderen buttons an dieser position stehen

ich würde es aber gerne so machen wollen wenn in der mitte ein button weg ist das die anderen buttons in center gehen und nicht links und rechts stehen bleiben und die mitte weg ist

mein css bis jetzt

.mediaplayer
{
  position: absolute;
  top: 130px;
  left: 55px;
  z-index: 5;
}

ich habe schon rum gefummelt wie ein doofen aber nichts hatts gebracht

das habe ich auch schon versucht

.mediaplayer
{
  position: relative;
  top: 130px;
  left: 0px;
  z-index: 5;
text-align:center;
}

da passiert das die buttons in der mitte sind aber untereinander und nicht neben einander

wäre sehr froh wenn man mir helfen könnte

 

[djheke]

Ich vermute mal, du nimmst JS . Vielleicht nimmst du ein falsches Style, wie bspw. visibility:hidden.

Na auf jeden Fall hast du hier mal eine CSS Variante.
http://www.gipspferd.de/forumhilfe/linksausblenden/

 

[Jam-Mc]

ich nutze php

muss sagen habe ich vergesen das sind player Buttons mit grafiken

das sieht so aus

echo "<div class=\"mediaplayer\"><a href=\"/generator/streambox_v2/wmpa/wmp_".$radlock->radio_name.".asx\" onclick=\"window.open(this.href);return false\"><img src=\"design/".$bset."/wmp.gif\" border=\"0\" width=\"25\" height=\"25\"/></a></div>";

 

[threadi]

text-align: center;

wäre die Lösung, vorausgesetzt innerhalb von dem Element mit der Klasse .mediaplayer sind keine Blockelemente. Links (<a>) und Bilder (<img>) sind dies normalerweise nicht, aber es könnte sein, dass Du sie per CSS dazu gemacht hast (was uns hier nicht bekannt ist).

 

[djheke]

Na wenn du Zugang zum PHP Code hast, dann ersetze doch bitte das div durch ein li und formatiere den Rest so wie im Beispiel bereits gezeigt.

Bsp;
<ul class mediabuttons">
<?php ..... ?>
</ul>

Oder sehe ich etwas falsch.

 

[Jam-Mc]

Bevor ein Misverstädnis kommt

nicht das ihr denkt das ich ein code ändern will und zusätzlich css einbauen will ne ne

ich bin der inhaber des script da ich ja streambox generatoren schreiben mit verschiedene funktionen nur was ich nicht so kann ist css das ist noch mein problem

@threadi

mit text-align: center; habe auch schon versucht aber klappt nicht

@djheke

habe ich uch versucht da werden nur die playerbuttons verschoben aber wenn ich ein player button sperre bleiben die anderen buttons auf ihre position stehen und wandern nicht wie gewollt in der mitte bzw in das leere feld wo der andere vorher war

 

[Slin61]

Hast du das schonmal mit html versucht? Einfach per <center>. Einen Bereich um das Ganze definieren und sobald etwas in der Mitte passiert(oder auch wo anders) verschieben sich die Elemente automatisch(zumindest bei Opera, aber nicht beim IE)

 

[Jam-Mc]

ja habe ich auch versucht bringt auch nichts

damit ihr mal es sieht wie es auf zum teil gebaut ist

PHP

echo "<div class=\"onlineplayer\"><a href=\"#\" onclick=\"window.open('/generator/streambox_v2/wmps/wmp_".$radlock->radio_name.".php','displayWindow', 'width=420,height=200');\"><img src=\"design/".$bset."/online-play.png\" border=\"0\" width=\"25\" height=\"25\"/></a></div>";

echo "<div class=\"flashplayer\"><a href=\"#\" onclick=\"window.open('/generator/streambox_v2/flashplayer/wmp_".$radlock->radio_name.".php','displayWindow', 'width=420,height=200');\"><img src=\"design/".$bset."/flashplayer.jpg\" border=\"0\" width=\"25\" height=\"25\"/></a></div>";

if ($radlock->winamp == 0)
echo "<div class=\"winamp\"><a href=\"http://".$server.":".$server_port."/listen.pls\" onclick=\"window.open(this.href);return false\"><img src=\"design/".$bset."/wamp.gif\" border=\"0\" width=\"25\" height=\"25\"/></a></div>";

if ($radlock->reals == 0)
echo "<div class=\"realplayer\"><a href=\"http://".$server.":".$server_port."/listen.pls\" onclick=\"window.open(this.href);return false\"><img src=\"design/".$bset."/rep.gif\" border=\"0\" width=\"25\" height=\"25\"/></a></div>";

if ($radlock->wmps == 0)

echo "<div class=\"mediaplayer\"><a href=\"/generator/streambox_v2/wmpa/wmp_".$radlock->radio_name.".asx\" onclick=\"window.open(this.href);return false\"><img src=\"design/".$bset."/wmp.gif\" border=\"0\" width=\"25\" height=\"25\"/></a></div>";

CSS

.winamp
{
  position: absolute;
  top: 130px;
  left: 4px;
  z-index: 5;
text-align: center;
}

.realplayer
{
  position: absolute;
  top: 130px;
  left: 30px;
  z-index: 5;
}

.mediaplayer
{
  position: absolute;
  top: 130px;
  left: 55px;
  z-index: 5;
text-align: center;
}

.flashplayer
{
  position: absolute;
  top: 130px;
  left: 110px;
  z-index: 5;
text-align: center;
}

.onlineplayer
{
  position: absolute;
  top: 130px;
  left: 80px;
  z-index: 5;
text-align: center;
}

Grafik wie ich es mir vorstelle

Wenn alle Buttons da sind

Wenn ein Button weg ist so ist es jetzt

So Stell ich mir das vor

 

[Jan-Frederik Stieler]

Hi,
schonmal mit

{display: inline;}

oder per Float versucht?

Grüße

 

[djheke]

Wenn du alle Buttons absolut positionierst wird es wohl nichts werden. Wenn du dich dazu durchringen könnest eine ungeordnete Liste zu benutzen und die li's etweder mit display:inline oder float:left formatieren, wird es wohl doch noch klappen.

Achso, wenn du schon js benutzt kannst du den Rest auch mit js formatieren.