ilch Forum » Allgemein » HTML, PHP, SQL,... » Bildlinks horizontal ausrichten

Geschlossen
  1. #1
    User Pic
    Maretz Hall Of Fame
    Registriert seit
    28.02.2009
    Beiträge
    740
    Beitragswertungen
    74 Beitragspunkte
    Hallo.

    Ich habe folgendes Problem.
    Es soll eine SocialIconpanel erstellt werden.Nur leider will sich dieser partout nicht horizontal ausrichten.Die 5 Icons richten sich nur untereinander aus.Einen fehler kann ich leider auch nicht erkennen.Auch mit div. mitteln ( <nobr> / white-space: nowrap; ...) wurde versucht dagegen zu halten.

    Hier mal der htm Code und der dazugehörige css...

    <div id="socialicons" style="position:relative;width:400px;height:53px;top: 56px;right: 35px;float: right;border: none;white-space: nowrap;overflow:hidden;"><a href="http://www.facebook.com" class="facebook"></a><a href="http://www.youtube.com" class="youtube"></a><a href="#" class="ownd3d"></a><a href="http://www.twitter.com" class="twitter"></a><a href="http://www.esl.com" class="esl"></a></div>


    .facebook               {display:block;width:53px;height:53px;background:transparent url('buttons/facebook.png') no-repeat top left;}
    .facebook:hover         {display:block;width:53px;height:53px;background:transparent url('buttons/facebook.png') no-repeat bottom right;}
    .youtube                {display:block;width:53px;height:53px;background:transparent url('buttons/youtube.png') no-repeat top left;}
    .youtube:hover          {display:block;width:53px;height:53px;background:transparent url('buttons/youtube.png') no-repeat bottom right;}
    .ownd3d                 {display:block;width:53px;height:53px;background:transparent url('buttons/ownd3d.png') no-repeat top left;}
    .ownd3d:hover           {display:block;width:53px;height:53px;background:transparent url('buttons/ownd3d.png') no-repeat bottom right;}
    .twitter                {display:block;width:53px;height:53px;background:transparent url('buttons/twitter.png') no-repeat top left;}
    .twitter:hover          {display:block;width:53px;height:53px;background:transparent url('buttons/twitter.png') no-repeat bottom right;}
    .esl                    {display:block;width:53px;height:53px;background:transparent url('buttons/esl.png') no-repeat top left;}
    .esl:hover              {display:block;width:53px;height:53px;background:transparent url('buttons/esl.png') no-repeat bottom right;}


    Alles weitere geht ohne Fehler an dem Template.Es wurde auch schon versucht dies an anderen stellen einzusetzen,wo leider auch keine Besserung hervor kam.
    Würde mich über evtl. Tipps freuen.

    Mfg maretz
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    IRvD Mitglied
    Registriert seit
    30.03.2010
    Beiträge
    460
    Beitragswertungen
    31 Beitragspunkte
    Wenn du die alle nebeneinander setzen willst musst du denn nicht einfach float left setzen?

    Oder hilft es vllt mit display:inline-block;


    Sind grad so gedanken
    1 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Maretz Hall Of Fame
    Registriert seit
    28.02.2009
    Beiträge
    740
    Beitragswertungen
    74 Beitragspunkte
    Ojee, ich Depp. Danke für den Tipp. Es war display:inline-block; . Thanks.

    Mfg maretz
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    IRvD Mitglied
    Registriert seit
    30.03.2010
    Beiträge
    460
    Beitragswertungen
    31 Beitragspunkte
    Yeeah! Ich konnt helfen :=)

    Aber manchmal kommt man einfach nicht auf die einfachsten Sachen.
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten