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

Kann ich so etwas machen?

sinankurt

sinankurt

Neues Mitglied
Hallo an alle,

ich habe ein Blog, und möchte nun soziale Icons auf dessen Design setzen. Die Buttons zum umleiten habe ich schon per Photoshop erstellt, also Facebook, Twitter, Delicious und RSS.

Ich würde sie gernde hier wier im Screenshot so verteilt haben:



Uploaded with ImageShack.us

Doch leider habe ich keine Ahnung, wie ich dise Icons bzw. Buttons auf diese graue Fläche so in vertikaler Richtunng von oben nach unten hinbekomme.

Hat jemand eine idee?
Ich würde halt die verschiedensten Social-Buttons und Icons auf der rechten Seite schön beschriftet und kategorisiert anzeigen. Doch leiber bin ich der totale Anfänger :cry:
 
Ich weiß, es hört sich so an, als ob ich etwas gemacht haben möchte. Nein, ich habe die Verlinkung von die gelesen, doch weiter komme ich leider nicht :(
 
Hallo,

fangen wir mal von vorne an ;)


++++++++++++++++++++++++++++
Html Code
++++++++++++++++++++++++++++
Nach dem
<body>

<div id="facebook"> <-- bild vom icon --> </div>
<div id="twitter"> <-- bild vom icon --> </div>

++++++++++++++++++++++++++++
CSS Code
++++++++++++++++++++++++++++

div#facebook
{
position: absolute;
color: #ffffff;
z-index: 999;
top: 30px;
height: 20px;
width: 20px;
left: 930px;
}




div#twitter
{
position: absolute;
color: #ffffff;
z-index: 999;
top: 60px;
height: 20px;
width: 20px;
left: 930px;
}


+++++++++++++++++++++++


Die Angaben in der CSS sind optional..


Sollte nun gehen, viel Spaß








Gruß
 
Zuletzt bearbeitet:
Geht nun, doch leider in einigen Browsern inkompatibel. Safari und internet explorer zeigen die buttons entweder gar nicht oder falsch an.
 
sinankurt schrieb:
Geht nun, doch leider in einigen Browsern inkompatibel. Safari und internet explorer zeigen die buttons entweder gar nicht oder falsch an.
Zum Vergrößern anklicken....

den oberen Body..nicht den unteren..

Bitte deine Bilder auch schließen..

<img src="http://www.politikgott.de/rss.png" alt="RSS" <--- falsch

<img src="http://www.politikgott.de/rss.png" alt="RSS"> <-- richtig

++++++++++++++++++++++++++
in deine CSS ergänzen
++++++++++++++++++++++++++

#icons (linie 847)
{
position: absolute;
top: 60px;
z-index: 999;
height: 80px;
width: 20px;
left: 930px;
}


right: 0px; <--- entfernen
 
Zuletzt bearbeitet:
Danke, dank dir habe ich es ein wenig nach meinen Vorstellungen anpassen können. Wie findest du es jetzt? Ist es nun richtig? Die 3 Icons habe ich auf die linke Seite gezogen, und die anderen zwei nun auf die rechte.
Doch kann man auch die Buttons mit eigenen Überschriften auf der grauen Fläche beschriften?

Die letzte Frage bis jetzt: Wenn ich mit meinem iPhone auf die Seite surfe, wird die ganze graue Fläche nicht gezeigt, und somit auch die Icons nicht :/
 
Hm ich glaube du hast das noch nicht zu 100% so eingebunden wie ich das geschrieben habe..

Grund: .. je nach Auflösung meines Monitores bleiben die Buttons an ihrer Stelle.
 
Du hast geschrieben NACH dem Body... Doch sollte es nicht davor sein? Ich versuche es gerade so zu machen wie du geschrieben hast :)
 
HTML: 
</div><!--END WRAPPER-->

<div id="footer" class="clearfloat">
  <div id="copyright">
  © <?php echo date('Y'); ?> <span class="url fn org"><?php bloginfo('name'); ?></span> &bull; 


<?php wp_footer(); ?>
</div>



</div> 
</div><!--END FOOTER-->
</div><!--END PAGE-->
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://politikgott.de/piwik/" : "http://politikgott.de/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://politikgott.de/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Tag -->


<div id="icons">
<a href="http://feeds.feedburner.com/Politikgott"><img src="http://www.politikgott.de/rss.png" alt="RSS" title="RSS">  </a>
<a href="http://www.facebook.com/Politikgott"><img src="http://www.politikgott.de/facebook.png" alt="Facebook" title="Facebook"> </a>
<a href="http://twitter.com/#!/Politikgott"><img src="http://www.politikgott.de/twitter.png" alt="Twitter" title="Twitter"> </a>
</div>

<div id="wikio">
<a href="http://www.wikio.de/" target="_blank"><script src="http://www.wikio.de/getvote?style=squarewhite" type="text/javascript"></script></a>
</div>


<div id="flattr">
<a class="FlattrButton" style="display:none;" href="http://www.politikgott.de"></a>
<noscript><a href="http://flattr.com/thing/104894/Politikgott-de" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
</div>


</body>
</html>

bei mir fehlt der body tag :(
 
Ist der Flattr-Button rechts so gewünscht/gedacht? Empfinden den dort als deplaziert, von der Priorität eines Dienstes wie Flattr mal abgesehen.
Ansonsten um einen weiteren Eindruck zu bieten hier einen Screen.
 
Habe es nun so gemacht:

HTML: 
div#icons {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 60px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 150px;
    }

div#wikio {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 200px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 1200px;
}

div#flattr {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 300px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 1200px;
    }
Für was ist z-index? Und die drei Icons links habe ich unter #icons zusammengefasst alle drei.

Das war die CSS
 
Und so die HTML:

HTML: 
<div id="icons">
<a href="http://feeds.feedburner.com/Politikgott"><img src="http://www.politikgott.de/rss.png" alt="RSS" title="RSS">  </a>
<a href="http://www.facebook.com/Politikgott"><img src="http://www.politikgott.de/facebook.png" alt="Facebook" title="Facebook"> </a>
<a href="http://twitter.com/#!/Politikgott"><img src="http://www.politikgott.de/twitter.png" alt="Twitter" title="Twitter"> </a>
</div>

<div id="wikio">
<a href="http://www.wikio.de/" target="_blank"><script src="http://www.wikio.de/getvote?style=squarewhite" type="text/javascript"></script></a>
</div>


<div id="flattr">
<a class="FlattrButton" style="display:none;" href="http://www.politikgott.de"></a>
<noscript><a href="http://flattr.com/thing/104894/Politikgott-de" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
</div>
 
Hallo,

2 änderungen. die bei mir lokal bei allen auflösungen passt
Aufzeichnen.JPG
Template:
das div icons und die beiden anderen musst verschieben von ganz unten ein paar zeilen nach oben. zwischen denen
HTML: 
</div><!--END FOOTER-->
</div><!--END PAGE-->
hauptsache in div page, das wird gleich gebraucht für die positionierung.
HTML: 
<DIV id=icons><A href="http://feeds.fee....
wenn das hast musst noch 2 kleine änderung in der css machen, was ja wohl mittlerweile kein problem mehr ist.
style.css
nach #page suchen, position: relative; in die {} einfügen.
nach DIV#icons suchen position: absolute; einfügen/in ändern wenn nicht schon vorhanden und left:-40px; ändern.
nach DIV#wiko suchen position:absolute; einfügen/in ändern und left:980px;
das gleiche bei DIV#flattr wie bei DIV#wiko und schon passt das auf allen schirmen.
 
Also die Buttons auf der rechten Seite habe ich verschoben. Sind sie nun richtig?

Ich verstehe aber nicht, was du mit den von dir geschriebenen HTML Codes meinst? Wo soll ich diese einfügen?
 
Das ist aus meiner CSS, also der abschnitt mit Flattr, Wikio und Icons:
HTML: 
div#icons {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 60px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 150px;
    }

div#wikio {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 200px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 1200px;
}


div#flattr {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 300px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 1200px;
    }
 
Und das der HTML Bereich:

HTML: 
<div id="icons">
<a href="http://feeds.feedburner.com/Politikgott"><img src="http://www.politikgott.de/rss.png" alt="RSS" title="RSS">  </a>
<a href="http://www.facebook.com/Politikgott"><img src="http://www.politikgott.de/facebook.png" alt="Facebook" title="Facebook"> </a>
<a href="http://twitter.com/#!/Politikgott"><img src="http://www.politikgott.de/twitter.png" alt="Twitter" title="Twitter"> </a>
<a href="http://del.icio.us/post?v=2&url=http://www.politikgott.de&notes=&tags=&title=Politikgott"><img src="http://www.politikgott.de/delicious.png" alt="Delicious" title="Delicious"> </a>
<a href="http://www.stumbleupon.com/submit?url=http://www.politikgott.de/&title=Politikgott"><img src="http://www.politikgott.de/stumbleupon.png" alt="StumbleUpon" title="StumbleUpon">  </a>
</div>


<div id="wikio">
<a href="http://www.wikio.de/" target="_blank"><script src="http://www.wikio.de/getvote?style=squarewhite" type="text/javascript"></script></a>
</div>


<div id="flattr">
<a class="FlattrButton" style="display:none;" href="http://www.politikgott.de"></a>
<noscript><a href="http://flattr.com/thing/104894/Politikgott-de" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
</div>
 
Hallo,
Also die Buttons auf der rechten Seite habe ich verschoben. Sind sie nun richtig?
Zum Vergrößern anklicken....
nö :O)
Ich verstehe aber nicht, was du mit den von dir geschriebenen HTML Codes meinst? Wo soll ich diese einfügen?
Zum Vergrößern anklicken....
habe ich mir fast gedacht, so im nachhinein etwas kompliziert :O).

neuer Versuch:

der html block aus 20:29h komplett löschen und neu einfügen genau nach das(dies ist fast am anfang):
Code: 
<DIV id=page>

jetzt noch ein paar sachen in der style.css richten.
inkl eines kleinen neuen gimik DIV#icons:hover nur für die linken, bei den rechten könnte man das dann auch machen wenn das gefällt.

ich ändere mal gleich dein block
Code: 
div#icons {
    position: absolute;
    color: #ffffff;
    z-index: -1; /*das icon hinter blog liegt*/
    top: 60px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: -40px; /*das halb über blöck linke seite*/
    }
DIV#icons:hover{ z-index: 1;}

div#wikio {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 200px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 940px; /*das rechte icon halb über blog*/
}


div#flattr {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 300px; /* hier auf einen non-Null Wert setzten, wenn die icons nicht oben anstoßen sollen*/
    height: 80px;
    width: 20px;
    left: 940px; /*das rechte icon halb über blog*/
    }.

Wenn das gemacht hast müssen wir noch mal schauen, da glaube ich etwas mit den divs nicht ganz past.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben