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

Facebook Button mittig plazieren?

R

Rennsemmel

Neues Mitglied
Hallo,

hab meine Homepage soweit fertig und würde gerne eine Facebook "gefällt mir" Button drauf verlinken. Leider erscheint der Button bei mir ganz links-unten in der Ecke. Weiß jemand wie ich ihn in die Mitte unter den Text bekomme?
Vielen Dank im Vorraus.

Hier der Code
Code: 
<style type="text/css">
<!--
body {
    background-color: #FFF;
    text-align: center;
    padding: 0px;
    width: auto;
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0px;
}
#container {
    text-align: left;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    height: 150px;
    background-color: #FFF;
    text-align: center;
    width: auto;
    font-family: "Kelt Caps Freehand";
    line-height: 5px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 45px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    color: #000;
}
#inhalt {
    margin-top: 0px;
    padding-top: 30px;
    height: auto;
    background-color: #FFF;
    width: auto;
    text-align: center;
    font-size: 24px;
    font-family: "Comic Sans MS", cursive;
    line-height: 3px;
}
#footer {
    height: 10px;
    background-color: #FFF;
    width: auto;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 12px;
    color: #000;
    text-align: left;
    font-style: normal;
    padding-left: 5px;
}
a:link {
    color: #F00;
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
    font-family: Kelt Caps Freehand;
    font-style: italic;
    font-size: 36px;
}
h1 {
    font-size: 90px;
    color: #000;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
h2 {
    font-size: 50px;
}
body,td,th {
    font-family: Lucida Console, Monaco, monospace;
    font-size: 50px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Button/Links1 OV.jpg','Button/Impressum1 OV.jpg','Button/Portrait, Fashion1 OV.jpg','Button/Kontakt1 OV.jpg','Button/Hochzeitsfotos1 OV.jpg')">
<div id="container">
  <div id="header"><img src="banner/banner.jpg" width="1050" height="150" /></div>
    <table width="1272" border="0" align="center">
    <tr>
      <td width="250"><a href="hochzeitsfotos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild10','','Button/Hochzeitsfotos1 OV.jpg',1)"><img src="Button/Hochzeitsfotos1.jpg" name="Bild10" width="250" height="70" border="0" id="Bild10" /></a></td>
       <td width="250"><a href="http://www.adam-m-foto.de" target="_parent" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild6','','Button/Portrait, Fashion1 OV.jpg',1)"><img src="Button/Portrait, Fashion1.jpg" name="Bild6" width="250" height="70" border="0" id="Bild6" /></a></td>
      <td width="250"><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild7','','Button/Kontakt1 OV.jpg',1)"><img src="Button/Kontakt1.jpg" name="Bild7" width="250" height="70" border="0" id="Bild7" /></a></td>
      <td width="250"><a href="impressum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild8','','Button/Impressum1 OV.jpg',1)"><img src="Button/Impressum1.jpg" name="Bild8" width="250" height="70" border="0" id="Bild8" /></a></td>
      <td width="250"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild9','','Button/Links1 OV.jpg',1)"><img src="Button/Links1.jpg" name="Bild9" width="250" height="70" border="0" id="Bild9" /></a></td>
    </tr>
  </table>
  <div id="inhalt">
    <blockquote>
      <p>Als Hochzeitsfotograf biete ich Ihnen gefühlvolle Hochzeitsreportagen und natürliche </p>
      <p>Hochzeitsportraits Ihres schönsten Tages. Gerne begleite ich Ihre Hochzeit und </p>
      <p>halte die schönsten Momente  für Sie in gefühlvollen Fotos fest. Dabei arbeite ich so unauffällig wie </p>
    <p>möglich und versuche die Emotionen, die Nervosität, die Freudetränen und die kleinen Patzer  </p>
    <p>festzuhalten, um eine lebendige Erinnerung für Sie zu schaffen an die Sie sich noch Jahre später </p>
    <p>gerne zurückerinnern. Eine Hochzeitsreportage ist da genau das Richtige. Sie beginnt mit dem Kaffee </p>
    <p>morgens, dem Termin beim Friseur, Braut und Bräutigam machen sich fertig, die Aufregung steigt, </p>
    <p>der Gang zum Standesamt, Ringe, Küsse, Freudetränen, Kirche, die Hochzeitsfeier bis in die Nacht hinein.</p>
    <p>Das alles sind Augenblicke die so lebendig wie möglich Ihre Geschichte erzählen sollen. Bin als </p>
    <p>Hochzeitsfotograf-Heinsberg im Kreis Heinsberg, Erkelenz,Mönchengladbach, Düsseldorf und Aachen tätig.</p>
    <p>Meine weiteren Einsatzgebiete sind: Fashion, Feiern, Paarshootings, Erotik uvm. Schauen Sie einfach unter </p>
    <p><a href="http://www.adam-m-foto.de" target="_parent">www.adam-m-foto.de</a></p>
    </blockquote>
</div>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=157727550969642&amp;href=http%3A%2F%2Fwww.hochzeitsfotograf-heinsberg.de&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
  <div id="footer">© 2011 Adam Marcinowski</div>
</div>
</body>
</html>
 
HTML: 
<div style="text-align:center">
<iframe src="...." 
style="margin:0 auto;border :none; overflow:hidden; width:150px; height:21px;" ....>
</iframe>
</div>

So in etwa, musst noch die width anpassen.

Zusatz: schick dein Dokument mal durch den Validator The W3C Markup Validation Service und beseitige die Fehler. Sonst kannst nicht erwarten, dass die Seite http://hochzeitsfotograf-heinsberg.de/ korrekt angezeigt wird.
 
Zuletzt bearbeitet:
http://www.html.de/members/netaktiv/@ NetAktiv,

hab den Code jetzt so gut ich konnte eingesetzt, bekomme den Botton zwar mittiger aber nicht mittig unter dem Text plaziert.
Nachdem ich die Homepage durch den Validation Service hab laufen lassen bekomme ich 4 Fehler angezeigt:-?. Leider reichen meine HML Kentnisse nicht ansatzweise aus um diese Fehler zu verstehen, geschweige denn zu beheben.

Gruß
Rennsemmel

NetAktiv schrieb:
HTML: 
<div style="text-align:center">
<iframe src="...." 
style="margin:0 auto;border :none; overflow:hidden; width:150px; height:21px;" ....>
</iframe>
</div>

So in etwa, musst noch die width anpassen.

Zusatz: schick dein Dokument mal durch den Validator The W3C Markup Validation Service und beseitige die Fehler. Sonst kannst nicht erwarten, dass die Seite Hochzeitsfotograf Adam Marcinowski, Hochzeitsreportagen und Hochzeitsfotos aus Heinsberg korrekt angezeigt wird.
Zum Vergrößern anklicken....
 
Nicht ganz mittig kann auch daran liegen, dass der (linksbündige facebook-)Inhalt des Frames nicht die volle Framebreite ausnutzt. Dann ist der breite Frame in der Mitte, aber das kleine Icon linksbündig. Kann auch sein, dass irgendeine (vererbte) margin/padding-Eigenschaft den Frame verschiebt. Arbeite mal mit dem style attribut background-color und färbe die verschiedenen Blockelemente unterschiedlich ein, dann siehst, was wo und wie sitzt.

Musst dich halt ein wenig einarbeiten in html oder hier einen gutmütigen finden, der sich nun hinsetzt, und dir die Fehler in deine Sprache übersetzt. Ich finde, der Validator gibt in deinem Fall schon recht gute Hinweise und teilweise sogar weiterführende Links.
 
Ich sehe nicht mal das Facebook-Iframe und könnte somit nicht erkennen was genau falsch läuft. Valider Code sollte jedoch wie schon gesagt der erste Schritt sein.
 
Ja genau,

der Button ist noch nicht auf dem Server ist nur aus dem Dreamweaver kopiert.

Vielen Dank bis dahin, werde dann mal eine Jobanfrage hier starten.

Gruß
Rennsemmel
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben