Objekt rechts platzieren

sinankurt · 5 Juni 2011

Hallo, ich habe dank euch auch die zwei Sichtbaren RSS und Twitter Buttons an die Rechte seite platziert.

Nun möchte ich einen zweiten Twitter Button genau ein wenig rechts von dem rechteckigen Twitter Button mit dem "t" platzieren. Doch irgendwie schein es nicht zu klappen.
Habe diese Werte im Moment.

Dieser Code ist in der CSS für die rechteckigen 2 Buttons rechts an der Seite:

HTML:

div#icons {      
color: #ffffff;      
margin-top:50px; 
    height:33px; 
    width:33px; 
    float: right 
}  


#icons a {
    margin-bottom: 15px;
}

Und diesen Code habe ich für den Button auf dem "Folgen" steht benutzt:

HTML:

div#followbutton {      
color: #ffffff;      
margin-top:94px; 
    height:33px; 
    width:33px; 
    float: right;    
}  

#followbutton a {
    margin-bottom: 15px;
}

Doch wie kriege ich den jetzt an die im Bild markierte Position?

Grüße und guten Abend,
euer Kurt

T!P-TOP · 5 Juni 2011

Ich würde mal sagen, dass Du den HTML Code für das Icon an der falschen Stelle hast. Zeige den HTML Code mal bitte her. Mit position absolute könntest du den html code zwar so lassen, aber sauber ist das nicht.

PHP:

div#followbutton { 
         color: #ffffff;           
         position: absolute;
         top:94px; 
         right: 0px;
         height:33px;      
         width:33px;     
}

sinankurt · 5 Juni 2011

Ok, danke! Hier ist der komplette header.php, mit dem "followbutton":

HTML:

<?php

    // Creating the doctype
    thematic_create_doctype();
    echo " ";
    language_attributes();
    echo ">\n";
    
    // Creating the head profile
    thematic_head_profile();

    // Creating the doc title
    thematic_doctitle();
    
    // Creating the content type
    thematic_create_contenttype();
    
    // Creating the description
    thematic_show_description();
    
    // Creating the robots tags
    thematic_show_robots();
    
    // Creating the canonical URL
    thematic_canonical_url();
    
    // Loading the stylesheet
    thematic_create_stylesheet();

    if (THEMATIC_COMPATIBLE_FEEDLINKS) {    
        // Creating the internal RSS links
        thematic_show_rss();
    
        // Creating the comments RSS links
        thematic_show_commentsrss();
       }
    
    // Creating the pingback adress
    thematic_show_pingback();
    
    // Enables comment threading
    thematic_show_commentreply();

    // Calling WordPress' header action hook
    wp_head();
    
?>

</head>

<?php 

thematic_body();

// action hook for placing content before opening #wrapper
thematic_before(); 

if (apply_filters('thematic_open_wrapper', true)) {
    echo '<div id="wrapper" class="hfeed">';
}
    
    // action hook for placing content above the theme header
    thematic_aboveheader(); 
    
    ?>   

    <div id="header">

    <div id="icons">
    <a href="http://feeds.feedburner.com/Quartel"><img src="http://www.quartel.de/rss.png" alt="RSS" title="RSS"> </a>
    <a href="http://twitter.com/#!/QuartelBlog"><img src="http://www.quartel.de/twitter-2.png" alt="Twitter" title="Twitter"> </a>
    </div>

   <div id="followbutton">
   <a href="http://twitter.com/QuartelBlog" class="twitter-follow-button" data-show-count="false" data-lang="de">Follow @QuartelBlog</a>
   <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
   </div>


    
        <?php 
        
        // action hook creating the theme header
        thematic_header();
        
        ?>

    </div><!-- #header-->
    <?php
    
    // action hook for placing content below the theme header
    thematic_belowheader();
    
    ?>   
    <div id="main">

PS: Bei Webrex muss ich leider immer wieder Bezahlart auswählen :-S

T!P-TOP · 5 Juni 2011

2 Divs für Icons ist eher sinnlos. Schließ mit dem icons-div auch gleich den inhalt des followbuttons div ein, sprich:

HTML:

<div id="icons">     
<a href="http://feeds.feedburner.com/Quartel"><img src="http://www.quartel.de/rss.png" alt="RSS" title="RSS"> </a>     
<a href="http://twitter.com/#!/QuartelBlog"><img src="http://www.quartel.de/twitter-2.png" alt="Twitter" title="Twitter"> </a>    
<a href="http://twitter.com/QuartelBlog" class="twitter-follow-button" data-show-count="false" data-lang="de">Follow @QuartelBlog</a>    
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>    
</div>

Mach erstmal das und dann schauen wir weiter.

PS: Bei Webrex muss ich leider immer wieder Bezahlart auswählen :-S

ist jetzt nicht mehr Notwendig. Einfach auf WebRex :: Home den Download Button anklicken, dann startet der Download.

grüße
Nico

sinankurt · 5 Juni 2011

Ok, habe ich jetzt gemacht. Wie geht es weiter?

T!P-TOP · 5 Juni 2011

Tausch den HTML Code bitte nocheinmal aus, und zwar durch folgenden:

HTML:

<div id="icons">      <a href="http://feeds.feedburner.com/Quartel"><img src="http://www.quartel.de/rss.png" alt="RSS" title="RSS"> </a>      <div id="twitter"><a href="http://twitter.com/#!/QuartelBlog"><img src="http://www.quartel.de/twitter-2.png" alt="Twitter" title="Twitter"> </a>     <a href="http://twitter.com/QuartelBlog" class="twitter-follow-button" data-show-count="false" data-lang="de">Follow @QuartelBlog</a></div>   <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div>

Und den CSS Code:

PHP:

div#icons {       color: #ffffff;       margin-top:50px;      height:33px;      width:100px;      float: right  }

Und folgenden CSS Code fügst noch hinzu:

PHP:

#twitter a {
    float: left;
    height: 33px;
}

sinankurt · 5 Juni 2011

Habe ich auch gemacht. Hat sich nicht viel verändert, außer das sich die 3 Icons ein wenig nach links und der twitter button sich ein wenig nach unten bewegt hat.

T!P-TOP · 5 Juni 2011

Erhöhe mal die width vom div#icons:

PHP:

div#icons {       
color: #ffffff;       
margin-top:50px;     
height:33px;      
width:200px;      
float: right  
}

sinankurt · 5 Juni 2011

Habe ich, ändert sich nicht viel...

Marv · 5 Juni 2011

Hallo, habe mir gerade deine aktuelle Seite angeguckt : Quartel
Das Iframe im <div id="twitter"> hat eine width von 300px änder die Styles des Iframes mal um folgende Angaben:

HTML:

width:150px;
margin:6px 0px 0px 5px;

Dann sollte der Folgen-Button ungefähr da sein, wo du ihn haben wolltest.

sinankurt · 5 Juni 2011

Habe ich gemacht, hat sich leider nichts geändert, außer dass der Button weiter nach oben gerutscht ist.

EDIT:

Habe ausversehen etwas bei #icons verändert, jetzt habe ich alles verkackt :cry:

Sieht im Moment so aus:

HTML:

div#icons {       
color: #ffffff;       
margin-top:50px;     
height:33px;      
width:200px;      
}   

#icons a {
    margin-bottom: 15px;
}  

#twitter a {
    float: left;
    height: 33px;
}

Marv · 5 Juni 2011

Hm, also du hast dem div#icons Das float:right; weggenommen, und die Angaben im IFrame sehen bei deiner Seite immer noch wie vorher aus.
Das IFrame hat immernoch widht:300px;

Mit den von mir im obigen Post erwähnten Angaben im Style des IFrames sollte es nämlich gehen.

sinankurt · 6 Juni 2011

Doch wo soll ich die "300px" ändern?

Marv · 6 Juni 2011

Wie ich oben erwähnt habe, im IFrame
also bei

HTML:

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/follow_button.html?_=1307371069238&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=de&amp;link_color=&amp;screen_name=QuartelBlog&amp;show_count=false&amp;show_screen_name=&amp;text_color=" class="twitter-follow-button" style="width: 300px; height: 20px;" title=""></iframe>

im Style margin auf 150px setzten und noch margin damit der Button richtig positioniert wird:

HTML:

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/follow_button.html?_=1307371069238&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=de&amp;link_color=&amp;screen_name=QuartelBlog&amp;show_count=false&amp;show_screen_name=&amp;text_color=" class="twitter-follow-button" style="width: 150px; height: 20px; margin:6px 0px 0px 5px;" title=""></iframe>

Und damit alle Buttons wieder rechts sind, der ID "icons" wieder float: right; zuweisen.

sinankurt · 6 Juni 2011

Danke dir, jedoch verstehe ich nicht, wo ich den zweiten iframe hinzufügen soll? In die CSS?

EDIT: Habe ich gemacht, jedoch verändert sich dann alles im Blog: der Header ist plötzlich ganz unten, die Buttons ganz wo anders... womöglich habe ich etwas falsch gemacht :S

Marv · 6 Juni 2011

Sorry, wenn ich dich verwirrt habe,
du solltest lediglich die style Angaben im IFrame verändern damit das IFrame so aussieht, wie das IFrame in meinem zweiten Codebeispiel, also so:

HTML:

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/follow_button.html?_=1307371069238&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=de&amp;link_color=&amp;screen_name=QuartelBlog&amp;show_count=false&amp;show_screen_name=&amp;text_color=" class="twitter-follow-button" style="width: 150px; height: 20px; margin:6px 0px 0px 5px;" title=""></iframe>

hier wurde die width: auf 150px geändert, damit dein Button auch neben den anderen Twitter-Button passt.

sinankurt · 6 Juni 2011

Das Problem ist, dass ich gar kein iFram habe: Da mit Twitterfollowbutton ist nicht als iframe eingebunden. Da steht kein <iframe>...

Marv · 6 Juni 2011

Kannst du dann mal den Code zeigen mit dem du den Follow-Button eingebunden hast?

ps: Ich glaube das Script was zu dem Link von Twitter gehört wandelt diesen Link um, sodass da ein IFrame entsteht.
Dem Link style-Angaben zu gaben hat nichts gebracht.

Deswegen würde ich dir vorschlagen den Button nicht per Link und Skript (wie es aktuell ist) einzubinden, sondern eben per IFrame.

Dazu musst du den Folgenden Code (ca. bei Zeile 60)

HTML:

<a href="http://twitter.com/QuartelBlog" class="twitter-follow-button" data-show-count="false" data-lang="de">Follow @QuartelBlog</a>

durch dieses iFrame ersetzen

HTML:

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/follow_button.html?_=1307371069238&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=de&amp;link_color=&amp;screen_name=QuartelBlog&amp;show_count=false&amp;show_screen_name=&amp;text_color=" class="twitter-follow-button" style="width: 150px; height: 20px; margin:6px 0px 0px 5px;" title=""></iframe>

ersetzten

-Das script (in der selben Zeile)

HTML:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

kannst du dann auch entfernen.

sinankurt · 6 Juni 2011

Klar,
hier den ich in der header.php habe (da sich auch die rss und twitter icons drin):

HTML:

<div id="icons"> <a href="http://feeds.feedburner.com/Quartel"><img src="http://www.quartel.de/rss.png" alt="RSS" title="RSS"> </a> <div id="twitter"><a href="http://twitter.com/#!/QuartelBlog"><img src="http://www.quartel.de/twitter-2.png" alt="Twitter" title="Twitter"> </a> <a href="http://twitter.com/QuartelBlog" class="twitter-follow-button" data-show-count="false" data-lang="de">Follow @QuartelBlog</a></div> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div>

und hier die in der CSS komplett für alle 3:

HTML:

div#icons {    
float: right;   
color: #ffffff;       
margin-top:50px;     
height:33px;      
width:200px;      
}   

#icons a {
    margin-bottom: 15px;
}  

#twitter a {
    float: left;
    height: 33px;
}

Marv · 6 Juni 2011

Ok,
der Code von Dir oben, müsste durch meine Veränderungen dann so aussehen (Der komplette geänderte icons-Div)

HTML:

<div id="icons"> <a href="http://feeds.feedburner.com/Quartel"><img src="http://www.quartel.de/rss.png" alt="RSS" title="RSS"> </a> <div id="twitter"><a href="http://twitter.com/#!/QuartelBlog"><img src="http://www.quartel.de/twitter-2.png" alt="Twitter" title="Twitter"> </a> <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/follow_button.html?_=1307371069238&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=de&amp;link_color=&amp;screen_name=QuartelBlog&amp;show_count=false&amp;show_screen_name=&amp;text_color=" class="twitter-follow-button" style="width: 150px; height: 20px; margin:6px 0px 0px 5px;" title=""></iframe></div>  </div>

Wenn du also deinen obigen Code jetzt durch diesen icons-Div ersetzt müsste dass dann hoffentlich jetzt so aussehen wie gewollt.

Objekt rechts platzieren

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied