Page 1 of 1

issue with CSS

Posted: Mon Jun 24, 2013 2:41 pm
by rfurdzik
I am trying to position "Post Free Ad", a green button on http://allmyads.com/index.php?use_template_set=abc

It should be:

1) On the left of social sharing buttons (it is already like that in HTML code)
2) It should be centered in the white space between user welcome message and social icons. Social icons should be aligned to the right.

Re: issue with CSS

Posted: Mon Jun 24, 2013 3:08 pm
by VirtualBoost
CSS
Give #user_bar a text-align:center.
Remove float:right from .post_ad_button
Put a div with float:left around the "Welcome"-part.

It sounds illogical, but the ad button div must be placed after the social media div, because a css float must be declared before the 'main' content.

HTML is something like this

Code: Select all

<div id="user_bar">
<div style="float:left">
Welcome, <span class="text_highlight">
			Guest
	</span> (   
<a href="register.php">Register</a> | <a href="index.php?a=10">Login</a>  ) 
	
	</div>





<!-- START SOCIAL LINKS -->

	
<div id="social_links"> 

	

	
<!-- Social Media Buttons - jQuery -->
<ul id="social_hovers" class="social">
<li class="facebook" style="opacity: 1;"><a href="https://www.facebook.com/pages/Zikbaycom/105629334387?ref=hl"><strong style="opacity: 0;">Facebook</strong></a></li>
<li class="twitter" style="opacity: 1;"><a href="http://twitter.com/rfurdzik"><strong style="opacity: 0; top: -1px;">Twitter</strong></a></li>
<li class="linkedin" style="opacity: 1;"><a href="http://www.linkedin.com/pub/rafal-furdzik/8/667/745"><strong style="opacity: 0; top: -1px;">LinkedIn</strong></a></li>	
<li class="rss" style="opacity: 1;"><a href="http://zikbay.com/rss_listings.php"><strong style="opacity: 0; top: -1px;">RSS</strong></a></li>
<!-- 	
<li class="delicious"><a href="http://www.delicious.com/"><strong>Delicious</strong></a></li>
<li class="flickr"><a href="http://www.flickr.com/"><strong>Flickr</strong></a></li>
<li class="[red dit]"><a href="http://www.[red dit].com/"><strong>[red dit]</strong></a></li>
-->
</ul>
</div>
<!-- END SOCIAL LINKS -->

<!-- Button added by MR 06/09/12 -->		
<div class="post_ad_button"><a href="index.php?a=cart&action=new&main_type=classified" class="button-modern medium green"><span style="">Post FREE Ad</span></a></div>
<!-- ***** -->	

<div class="clr"></div>
</div>

Re: issue with CSS

Posted: Tue Jun 25, 2013 6:24 pm
by rfurdzik
HI,

Thanks! Seems order did not make any difference. I have button BEFORE social icons and it works.

I almost got it, except that the second button ("Post Free Ad") should have text in green color! It seems it is taking the setting from higher class .button-modern span. I set:

.button-modern.white {
color: #91bd09;

}

It seems to be ignored as Chrome Inspect Element is showing this setting as crossed.

I do not want to change the original class .button-modern span as it will affect other buttons.

Please recommend how to set this second button's text to GREEN

The link is again: http://allmyads.com/index.php?use_template_set=abc

Re: issue with CSS

Posted: Tue Jun 25, 2013 8:23 pm
by VirtualBoost
You're right, before works! Always thought it couldn't.. :)

Do you mind using and ID? If this will be just one block with green text, css ID's where specially designed for individual layout.

HTML

Code: Select all

<a href="http://allmyads.com" class="button-modern large white">
     <span id="post-free-ad">Post FREE Ad</span>
</a>
CSS

Code: Select all

#post-free-ad{
    color:#91bd09;
}