Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Course Of The Month
8 days, 1 hour left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
take transparency off logos
Posted on 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
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>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
5-
4
10 Comments
Active today
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.
Change your background-color in .sidebar_logos {} to
rgba(234, 165, 62, 0.8)
Remove
.sidebar1 div {
opacity: 0.8;
}
rgba(234, 165, 62, 0.8)
Remove
.sidebar1 div {
opacity: 0.8;
}
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)
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)
Active today
Cathal, I tried your solutions but they did not work.
TommyBoy, I am not sure how to implement what you suggest.
TommyBoy, I am not sure how to implement what you suggest.
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
Remove
.sidebar1 div {
opacity: 0.8;
}
Or follow my second example method
Active today
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
http://screencast.com/t/FdoYHFeRoJ
Active today
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
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
Featured Post
WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:
Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing.
Set up your basic HTML file. Open your form tag and set the method and action attributes.:
(CODE)
Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month8 days, 1 hour left to enroll
728 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.