Objektausrichtung Buttons in CSS

    Guten Tag liebes Forum,
    von der Seite http://www.zella.de/code/social-media-01.html habe ich mir die Buttons, Quellcode und CSS Einträge geholt (Social 1 Beispiel). Die Buttons sind sehr schön und alles funktioniert schick. Allerdings würde ich gerne die Buttons vertikal untereinander rechts am Bildschirmrand platzieren und nicht horizontal.
    Nach allen möglichem ausprobieren habe ich aufgegeben, da ich sehr wenig HTML u.Ä. Kenntnisse besitze. Wer hilft mir vielleicht weiter? Ist bestimmt nur ein Eintrag zu ändern :/ .
    Hier der CSS Eintrag:

    <style>
    body {
    text-align: center;
    }

    .buttons {
    margin-top: 20px;
    margin-bottom: 20px;
    }

    .buttons a {
    margin-right: 30px;
    width: 64px;
    height: 64px;
    display: inline-block;
    position: relative;
    line-height: 64px;
    background-color: #eaeaea;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
    background-image: -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: -moz-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: -ms-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: -o-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: linear-gradient(top, #f6f6f6, #eaeaea);
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
    }

    .buttons a:active {
    top: 1px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));
    background-image: -webkit-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: -moz-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: -ms-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: -o-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: linear-gradient(top, #eaeaea, #f6f6f6);
    }

    .buttons a::before{
    content: '';
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    background-color: #eaeaea;
    -moz-border-radius: 140px;
    -webkit-border-radius: 140px;
    border-radius: 140px;
    opacity: 0.5;
    }

    .buttons a:active::before {
    top: -9px;
    }

    .buttons a:hover::before { opacity: 1; }

    .buttons a.twitter:hover::before {
    background-color: #c6f0f8;
    }

    .buttons a.youtube:hover::before {
    background-color: #ff0202;
    }

    .buttons a.facebook:hover::before {
    background-color: #33487f;
    }

    .buttons a img { border: 0; }
    </style>

    Danke und liebe Grüße! :*

    Und hier noch der Quelltext des Widgets - vielleicht ist hier der Hund begraben?!


    <div style="position: fixed; top: 90px; margin-right: 25px; right: 0%; z-index:7000;" >
    <div class="buttons">
    <a class="facebook" href="http://www.facebook.com/acustico.terzetto" target="_blank"> <img src="http://marina-band.de/icons/fb.png" /></a>
    <a class="youtube" href="http://www.youtube.com/user/acusticoterzetto" target="_blank"> <img src="http://marina-band.de/icons/yt.png" /></a>
    <a class="twitter" href="http://twitter.com/TerzettoTweet" target="_blank"> <img src="http://marina-band.de/icons/tw.png" /></a>
    </div>
    </div>

    Hallo,

    versuche es mal so:

    1. Ändere im CSS-Code den Wert "display: inline-block;"" um auf "display: block;".
    2. Füge folgendes "margin-bottom: 20px;" unter der "margin-right: 30px;" bei ".buttons a {" zusätzlich noch mit ein.
    Die 20px hier, sind für den Abstand zwischen den Buttons.

    Damit sollte es dann gehen.

    Gruß
    Jochen

    Hallo Jochen

    ich habe ein ähnliches Problem: ich habe die Button zunächst nur über den Quelltext gestern eingebunden, verlinkt und dann auf meiner Seite veröffentlicht: https://community.zeta-producer.com/www.szymanski-rechtsanwaelte.de

    Da auch bei mir die Buttons nicht horizontal waren und auch nicht hervortraten, wenn man mit der Mouse drüber geht, habe ich heute noch ein bisschen im Forum gelesen und deinen Beitrag gefunden. Ich habe dann den CSS wie beschrieben eingebunden (auch mit <style> am Anfang und ende), hat alles geklappt.... jetzt ist die Startseite, wo ich das eingebunden habe, aber in der Vorschau nicht mehr zu sehen, alle anderen Seiten aber schon. Ich habe die Seite erst einmal nicht veröffentlicht... woran kann das liegen?

    Viele Grüße,
    Jan

    P.S.: ich habe, da ich die Buttons nur auf der Startseite möchte, den CSS auch nur auf der Startseite eingebunden, dort unter Attribute, alle anzeigen, mobile script. Lösche ich den CSS wird die Seite wieder in der Vorschau angezeigt...was mich schon einmal beruhigt.

    Hier der CSS den ich eingefügt habe:

    <style>
    .social-popout {

    height: 48px;

    width: 48px;

    margin: 15px 10px;

    float: left;

    -webkit-transition: all ease 0.5s;

    -moz-transition: all ease 0.5s;

    -o-transition: all ease 0.5s;

    -ms-transition: all ease 0.5s;

    transition: all ease 0.5s;

    }

    .social-popout img {

    border-radius: 50%;

    margin: 8px;

    width: 100%;

    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);

    -webkit-transition: all ease 0.5s;

    -moz-transition: all ease 0.5s;

    -o-transition: all ease 0.5s;

    -ms-transition: all ease 0.5s;

    transition: all ease 0.5s;

    }

    .social-popout img:hover {

    margin: 0px;

    box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);

    }
    <style>


    und hier der Quelltext:

    <div class="social-popout">

    <a href="https://www.facebook.com/szymanski.rechtsanwaelte"><img src="http://zella.de/code/bilder/facebook-48circle.png" /></a>

    </div>

    <div class="social-popout">

    <a href="https://plus.google.com/+Szymanski-rechtsanwaelteDe"><img src="http://zella.de/code/bilder/googleplus-48circle.png" /></a>

    </div>

    Hallo,

    Du hast den </style> Tag nicht geschlossen !
    So sollte es richtig sein und funktionieren ...

    Wer lesen kann ist klar im Vorteil!!! Vielen Dank für den schnellen Support am Sonntagmorgen, den Slash hatte ich übersehen. Hat geklappt!!

    VG
    Jan

    Hallo FOS,


    kleiner Tipp:
    du solltest diese beiden Icons (Fazebok und Kugel) nicht von Marios Seite aus verlinken sondern von deiner Webseite aus. Falls Marion sie auf seiner Seite löscht oder in einen anderen Ordner verschiebt dann hast du ein Problem.

    Gruß wurzelsepp

    Hallo Wurzelsepp,

    vielen Dank für den Tipp..nur wie mache ich das? Ich weiß natürlich, wie ich ein Bild hochlade und mit Zeta verlinke, aber hier habe ich nach der Anleitung einen Quelltext über ein Widget eingefügt und über die Attribute der Seite das CSS... wo muss ich denn jetzt meine Seite eintragen? Sorry für die wahrscheinlich dämliche Frage, aber ich stehe jetzt grade auf dem Schlauch.

    VG
    Jan

    Hallo Jan,

    auf der Seite von Mario ist das doch schön beschrieben

    Mit einem Rechtsklick speicherst du dir die Bilder auf deiner Festplatte. Ins entsprechende Verzeichnis auf deinem Webspace dann hochladen und die Pfade im CSS-Code anpassen.

    Gruß wurzelsepp

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden