Solved

take transparency off logos

Posted on 2014-01-16
10
258 Views
Last Modified: 2014-01-16
How do I remove the transparency effect from the logos that appear in orange boxes (Control 4 and Cedia) below the navigation?  I tried a couple things and nothing seemed to work.

http://nsitedesigns.com/nsitedesigns/gei/structured_wiring.html
http://nsitedesigns.com/nsitedesigns/gei/gei.css

img.logos_sidebar {
		padding: 10px 0px 2px 12px;
		z-index:999;}

.sidebar_logos {
	float: left;
	width: 180px;
	background-color: #eaa53e;
	border:2px solid #006576;
	margin: 5px 0px;
}

<div class="sidebar_logos"><a href="http://www.control4.com/info/home-automation?gclid=COPQwduB6rsCFclaMgod8H4AKA" target="_blank"><img src="img/logo_control4.png" alt="Control 4 Dealer" width="156" height="155" class="logos_sidebar" /></a></div>
        <div class="sidebar_logos"><a href="http://www.cedia.net/" target="_blank"><img src="img/logo_cedia.png" alt="Cedia Professional Certification" width="155" height="213" class="logos_sidebar" /></a></div>
            <div class="sidebar_logos"><a href="http://www.manitowoccountyhomebuilders.com/" target="_blank"><img src="img/logo_manty.png" alt="Manitowoc County Home Builders Assn" width="160" height="53" class="logos_sidebar" /></a></div>

Open in new window

0
Comment
Question by:nsitedesigns
  • 5
  • 4
10 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 100 total points
ID: 39786820
There's only one way I know of. The class="sidebar_logos"  containers have the transparency so anything inside will have the transparency as well. You need to move the anchors with the images inside up one level in the DOM so they are children of the class="sidebar" div (to the same level as the class="sidebar_logos" divs). Add position:absolute and top and left position values to the <img> elements until they are positioned where they were before. Because the class="sidebar" div is set to position:relative, the position absolutes will be relative to the sidebar div.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39786854
Change your background-color in .sidebar_logos {} to

rgba(234, 165, 62, 0.8)

Remove

.sidebar1 div {
    opacity: 0.8;
}
0
 
LVL 58

Expert Comment

by:Gary
ID: 39786874
Actually this make more sense

just remove the background-color from  .sidebar_logos {}

Remove the opacity: 0.8; from .sidebar1 div {} and instead add in background:rgba(234, 165, 62, 0.8)
0
 

Author Comment

by:nsitedesigns
ID: 39786941
Cathal, I tried your solutions but they did not work.  
TommyBoy, I am not sure how to implement what you suggest.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39786959
Update your code online - it does work. You may have missed my edit

Remove
.sidebar1 div {
    opacity: 0.8;
}


Or follow my second example method
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:nsitedesigns
ID: 39786961
Client just told me she ALSO wants the turquoise bar at the top and the side borders to be solid, not transparent. Ugh!  How do i do that?  The red arrows are pointing to the problem areas.   Ask me how much I like transparency.  Go ahead - I dare ya!  LOL

http://screencast.com/t/FdoYHFeRoJ
0
 

Author Comment

by:nsitedesigns
ID: 39786967
Cathal,

I removed the reference below and uploaded page.  I cleared history.  I don't see any change.  

http://nsitedesigns.com/nsitedesigns/gei/gei.css

.sidebar1 div {
    opacity: 0.8;
}


g
0
 
LVL 58

Accepted Solution

by:
Gary earned 400 total points
ID: 39786976
You've removed the opacity but you need to add

.sidebar1 div {
background:rgba(234, 165, 62, 0.8)
}

And remove background-color: #EAA53E; from .sidebar_logos {}

Remove opacity: 0.9; from
.sidebar_nav {}

Borders should be solid - they will not be affected by the transparency
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 400 total points
ID: 39786987
This would be easier...
Your amended css file attached
gei.css
0
 

Author Closing Comment

by:nsitedesigns
ID: 39787009
terrific!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now