Icon an der falschen Stelle

[sinankurt]

Hallo,
ich habe auf meinem Blog (die Icons sind oben rechts zu sehen) einige Social Icons angebracht. Doch leider steht der Button für Google+ etwas falsch, sollte eigentlich unter Twitter genauso wie die anderen stehen. Weiß einer was ich an meinem Code falsch habe und ändern muss?

Code in der header.php

<DIV id=icons>	<A style="DISPLAY: block" href="http://feeds.feedburner.com/Quartel"><IMG title=RSS alt=RSS src="http://www.quartel.de/rss.png"></A>	<DIV id=facebook style="margin-bottom:3px">		<A href="http://www.facebook.com/pages/Quartel/227439220617041"><IMG title=Facebook alt=Facebook src="http://www.quartel.de/facebook.png"> </A>                 <IFRAME style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; MARGIN: 6px 0px 0px 5px; WIDTH: 120px; HEIGHT: 28px; OVERFLOW: hidden; BORDER-TOP: medium none; BORDER-RIGHT: medium none" src="http://www.facebook.com/plugins/like.php?app_id=216927938347247&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FQuartel%2F227439220617041&amp;send=false&amp;layout=button_count&amp;width=250&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" frameBorder=0 allowTransparency scrolling=no></IFRAME>         </DIV>	<DIV id=twitter>         	<A href="http://twitter.com/#!/QuartelBlog"><IMG title=Twitter alt=Twitter src="http://www.quartel.de/twitter-2.png"> </A>                 <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/follow_button.html?_=1307371069238&align=&button=blue&id=twitter_tweet_button_0&lang=de&link_color=&screen_name=QuartelBlog&show_count=&show_screen_name=false&text_color=" class="twitter-follow-button" style="width: 150px; height: 20px; margin:6px 0px 0px 5px;" title=""></iframe>         </DIV><DIV id=twitter>         	<A href="https://plus.google.com/108918039599078940586/posts?hl=de"><IMG title=Google+ alt=Google+ src="http://www.quartel.de/google.png"> </A>                          </DIV></DIV>

Und der dazugehörige Code in der CSS:

div#header{width:960px;
margin:0 auto;
padding-top:8px;
position: relative;
} 




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


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

 

[vast]

dein google-icon ist in einem div, welches ebenfalls die ID "twitter" hat. Am Besten da draus zB id="google" machen, und dann:

#google {
clear: both;
position: relative;
z-index: 1000;
}

sollte die Position fixen.
Die relative Positionierung und der z-index sind nur ein quickfix, weil sonst #access über dem Link liegt, das müsste ggf dann mal neu positioniert werden, wenn #access Inhalt hat.

Dann bitte nochmal validieren, da ist einiges nicht ganz ok...zb besser id="icons" als id=icons etc...

 

[sinankurt]

Habe es genau so gemacht, doch leider geht es immer noch nicht. Kannst es dir anschauen auf quartel.de.... Trotzdem danke!

 

[vast]

hm, strange.
ich hab mal geschaut, das google-Logo ist nun weg, aber ich kann zB das Twitter Logo wie oben beschrieben drunter duplizieren, vor einfügen des style-Attributs hing das genauso schief wie zuvor das google Logo:



Edit: sorry, der screenshot ist was klein. Bei Klick darauf kann mans aber erkennen, denke ich.

 

[mermshaus]

Bitte befasse dich erst mal mit den Grundlagen von HTML und CSS.

• Einführende Lektüre
• Validator für HTML-Syntax
• Validator für CSS-Syntax