• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Buttons auf Webseite anordnen. Bitte um Hilfe

xxstoney

Neues Mitglied
Guten Abend,
ich bin Anfänger und bekomme bei folgenden Buttons keine gescheite Anordnung hin, kann mir bitte jemand die korrekte Codierung nennen (bitte ohne die hier oft gelesene Belehrung "setz Dich mehr mit xxx auseinander" "ist Schrott" usw.):
HTML:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="[URL]https://developers.facebook.com/docs/plugins/[/URL]" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true">
</div>

<script src="[URL]https://apis.google.com/js/platform.js[/URL]" async defer>
  {lang: 'de'}
</script>
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/118312767548974597051" data-rel="publisher"></div>

</div>
<a href="[URL]http://www.copyscape.com/[/URL]"><img src="[URL]http://banners.copyscape.com/img/copyscape-banner-white-130x46.png[/URL]" width="130" height="46" border="0" alt="Protected by Copyscape" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." /></a>
Besten Dank im Voraus,
Uwe

sieht gerade so aus (s.u.)
 

Anhänge

  • Bildschirmfoto 2016-11-12 um 22.31.25.png
    Bildschirmfoto 2016-11-12 um 22.31.25.png
    44,7 KB · Aufrufe: 4
Zuletzt bearbeitet von einem Moderator:
Werbung:
Die derzeitige Anordnung der Buttons lässt vermuten, dass deren Elternelement die text-align:center-Eigenschaft besitzt.

Und wie hättest Du sie stattdessen lieber angeordnet? Darauf bist Du in Deinem Post mit keiner Silbe näher eingegangen.

Linksbündig? -> text-align:left
Rechtsbündig? -> text-align:right

Nein? Ganz was anderes?

Nicht drei-, sondern einzeilig?
Mehr (vertikaler/horizontaler) Abstand zwischen den Buttons?
... oder oder oder?
bekomme bei folgenden Buttons keine gescheite Anordnung hin, kann mir bitte jemand die korrekte Codierung nennen
Die für Dich gescheit empfundene Anordnung bitte uns gescheit erläutern, und neben dem FB-Codesnippet auch das CSS (in [code=css][/code]) zeigen, da sich offensichtlich eine der darin definierten formalen Rahmenbedingungen für Seite und Inhalt an dieser Stelle des HTML-Codes negativ auf diese Elemente auswirkt.

Der Link zur (Test/Fehler)Seite wird von uns natürlich immer präferiert :)
 
Hallo,
vielen Dank für die Antwort. Hier mal das Resultat meiner verzweifelten und erfolglosen Versuche:

HTML:
<div class="social-single">
  
<div id="likebutton">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="[URL]http://facebook.com/the.socialnetwork.104[/URL]" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div>

<div id="googlebutton">
<div id="google-root"></div> 
<script src="[URL]https://apis.google.com/js/platform.js[/URL]" async defer>
  {lang: 'de'}
</script>
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/118312767548974597051" data-rel="publisher"></div>

<div id="copyscapebutton">
<div id="copyscape-root"></div>
<a href="[URL]http://www.copyscape.com/[/URL]"><img src="[URL]http://banners.copyscape.com/img/copyscape-banner-white-130x46.png[/URL]" width="130" height="46" border="0" alt="Protected by Copyscape" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." /></a>
</div>

Und die CSS dazu:

CSS:
.social-single {
margin: 17px 0 0 30px; width:100%;
}

#likebutton {
float: both;
margin-left: 0px;
margin-top:0px;
}

#googlebutton {
float: both;
margin-left: 0px;
margin-top:6px;
}

#copyscapebutton {
float: both;
margin-left: 0px;
margin-top: 1px;
}

Es wäre schön, wenn der FB und der G+ Button nebeneinander und seitenzentriert und auf gleicher Höhe stünden und der copyscale darunter und zentriert.

Vielen Dank schonmal für die Tipps und übt bitte Nachsicht, ich bin Laie und hab die Seite geerbt und vorher nie etwas mit der Materie zu tun gehabt.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Hallo

und übt bitte Nachsicht, ich bin Laie und hab die Seite geerbt und vorher nie etwas mit der Materie zu tun gehabt.

Von unskannst du jede Menge Nachsicht haben.

Leider sehen HTML, CSS und JavaScript das anders. Ohne ein gewisses Grundwissen geht überhaupt nichts.

Und wir hier im Forum sind damit überfordet dir dieses gesamte Grundwissen beizubringen. Dafür ist der Aufwand schlicht zu hoch.

So gibt es die CSS-Anweisung


nicht. Und wenn der Webseitenersteller (in diesem Fall du) sich nur etwas mit float beschäftigt hätte würde im das auch schon die Logik und fast jede Anleitung (links oder rechts ausrichten) sagen.

Auch werden in dem HTML-Teil mehr Container (in deinem Fall div-Elemente) geöffnet als geschlossen.

Ob das JavaScript Fehler enthält weiß ich nicht.

Mit deinen Quellcodeschnipseln investiert jeder einzelne von uns seine private Zeit, baut eine Webseite und sieht - eine weiße Seite ohne Inhalt. Wie sollen wir dir helfen wenn du nicht mal über die grundlegenden Kenntnisse verfügst eine Seite zu erstellen, auf der überhaupt etwas zu sehen ist?

Zumal die Erfahrung zeigt, dass die Fragesteller bei sollen Wissenslücken mit unseren korrekten Antworten häufig nicht mal etwas anfangen können.

Ich befürchte du überschätzt einerseits deine eigenen HTML-/CSS-Fähigkeiten und erwartest zu viel von dem Forum und den Personen, die dir gerne helfen wollen.

Gruss

MrMurphy
 
Da Dein HTML-Code fehlerbehaftet ist, was die Anzahl der schliessenden </div>-Tags betrifft (9 * <div> VS 6 * </div>), und vom Browser mit Fehlinterpretationen quittiert wird, hier die korrigierte Fassung:
HTML:
<div class="social-single">
  <div id="likebutton">
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://facebook.com/the.socialnetwork.104" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div>
  </div>
  <div id="googlebutton">
    <div id="google-root"></div>
    <script src="https://apis.google.com/js/platform.js" async defer>
        {lang: 'de'}
    </script>
    <div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/118312767548974597051" data-rel="publisher"></div>
  </div>
  <div id="copyscapebutton">
    <div id="copyscape-root"></div>
    <a href="http://www.copyscape.com/"><img src="http://banners.copyscape.com/img/copyscape-banner-white-130x46.png" width="130" height="46" border="0" alt="Protected by Copyscape" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." /></a>
  </div>
</div>
Im Anschluß folgt das korrigierte CSS, denn wie MrMurphy schon darauf hingewiesen hat, gibt es keinen Wert "both" für die float-Eigenschaft.

Gültige Angaben sind none, left, right oder inherit; both hingegen gehört zur clear-Eigenschaft, die einen Float beendet.

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/float
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/clear

Da aber die Elemente im Viewport horizontal zentriert werden sollen, und wir keinen Mehraufwand betreiben wollen, um die Float-Umgebung dorthin zu bugsieren, bedienen wir uns einfach display:inline-block, um die <div>-Elemente nebeneinander anzuordnen, die als Blockelement die typische Eigenschaft besitzen, im Textfluß automatisch einen Absatz zu erzeugen.

Die Klasse .social-single statten wir mit text-align:center aus, um ihren Inhalt horizontal zu zentrieren, und korrigieren den linken Außenabstand von 30px auf 0, damit die Buttons tatsächlich in der Fenstermitte erscheinen.
CSS:
.social-single {
margin: 17px 0 0 0;
text-align:center;
}
#likebutton,
#googlebutton {
display:inline-block;
vertical-align:middle;
margin:5px;
}
#copyscapebutton {
margin-left: 0px;
margin-top: 1px;
}
Das Ergebnis kann sich sehen lassen :)

screenshot.png
 
Mit deinen Quellcodeschnipseln investiert jeder einzelne von uns seine private Zeit, baut eine Webseite und sieht - eine weiße Seite ohne Inhalt. Wie sollen wir dir helfen wenn du nicht mal über die grundlegenden Kenntnisse verfügst eine Seite zu erstellen, auf der überhaupt etwas zu sehen ist?
Wenn der Code auf einem Server (lokal oder online) ausgeführt wird, bleibt die Seite nicht weiß - siehe mein Chrome-Schnappschuß

Der Grund dafür ist diese Zeile, die den URL ohne das https: -Protokoll definiert:
Javascript:
 js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
Wird das Dokument nicht auf dem Webserver, sondern in der herkömmlichen Systemumgebung geöffnet (die Browser-Adreßzeile beginnt mit file:///C:/Users/...), weiß der Browser mit diesem URL nichts anzufangen, das erforderliche Script kann nicht geladen werden, der Facebook-Button bleibt fern, und die Seite leer auf weißem Hintergrund.
 
Werbung:
@Spicelab: vielen Dank für die wirklich hilfreiche Darstellung und die Arbeit, die Du dir damit gemacht hast (den anderen, völlig überflüssigen Kommentar des anderen Users lasse ich mal getrost unbeachtet, da er niemandem hilft).

Es sieht jetzt in der Tat schon viel besser aus, aber FB und G+ Button sind noch immer untereinander

upload_2016-11-14_9-37-52.png

Darf ich Dich noch einmal bitten, einen Blick über die Zeilen zu werfen und mir zu sagen, was dort noch falsch ist?

Im Voraus schonmal vielen Dank.

upload_2016-11-14_9-41-26.png

upload_2016-11-14_9-43-4.png
 
Darf ich Dich noch einmal bitten, einen Blick über die Zeilen zu werfen und mir zu sagen, was dort noch falsch ist?
Nichts, denn das ist die Kopie meines gestrigen Quellcodes.

Binde diese CSS-Datei social-single.css zunächst mal in der Webseite ein, denn derzeit existieren darin nur style.css u. slider.css.
 
Werbung:
Zurück
Oben