issue with CSS

Discuss the development and implementation of Joomla! 1.0.x templates here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
rfurdzik
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Mon Jun 24, 2013 2:37 pm

issue with CSS

Post by rfurdzik » Mon Jun 24, 2013 2:41 pm

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.

VirtualBoost
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jun 10, 2013 9:01 am

Re: issue with CSS

Post by VirtualBoost » Mon Jun 24, 2013 3:08 pm

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>

rfurdzik
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Mon Jun 24, 2013 2:37 pm

Re: issue with CSS

Post by rfurdzik » Tue Jun 25, 2013 6:24 pm

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

VirtualBoost
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jun 10, 2013 9:01 am

Re: issue with CSS

Post by VirtualBoost » Tue Jun 25, 2013 8:23 pm

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;
}


Locked

Return to “Templates & CSS - 1.0.x”