Please take a look at this fiddle: http://jsfiddle.net/SkjHs/4/
<html>
<ul class="langBar">
<li> <img src="http://goo.gl/aIxpv"> </li>
<li> <img src="http://goo.gl/wIQob"> </li>
<li> <img class="activeLang" src="http://goo.gl/If4lA"> </li>
</ul>
</html>
html {
background-color:#000;}
.langBar{
display: block;
overflow: hidden;
float: left;
width: 125px;
}
.langBar li{
display: block;
width: 32px;
height: 40px;
float: left;
margin-left: 7px;
padding: 0px;
}
.activeLang{
-moz-border-radius: 20px;
width: 32px;
height: 32px;
border-radius: 20px;
border: 2px solid #482663;
}
.langBar li a{
display: block;
height: 100%;
width: 100%;
}
I'm trying to achieve some nice glow effect around activeLang class image. First problem is, i'm getting padding between border and image itself. Second can't get glow effect. Any suggestions?
First of all the padding of the image is because of image canvas My Fiddle
Image with canvas cropped
Add the below CSS to .activeLang for glow like effect to your image...(Ofcourse you can change colors as per your choice)
box-shadow: 0 0 3px 3px #888;
And Remove from .activeLang
width: 32px;
height: 32px;
Such a glow effect could be realized via a box-shadow:
/* pink glow effect */
box-shadow: 0 0 5px 5px #f3a;
See http://jsfiddle.net/SkjHs/8/ for an example with glow effect.
Or (as I would set it up) a solution without using img-tags:
<ul class="langBar">
<li>[AZ]</li>
<li>[EN]</li>
<li>[RU]</li>
</ul>
.langBar {
overflow: hidden;
}
.langBar li{
display: block;
float: left;
margin-left: 7px;
padding: 0px;
}
.icon {
display: inline-block;
width: 32px;
height: 32px;
margin: 5px 0;
overflow: hidden;
text-indent: 110%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.icon:focus, .icon:active, .icon:hover,
.icon.active {
-webkit-box-shadow: 0 0 5px 5px #f3a;
-moz-box-shadow: 0 0 5px 5px #f3a;
box-shadow: 0 0 5px 5px #f3a;
}
/* one may use a sprite and only set the background position here */
.icon-az {
background-image: url(http://goo.gl/aIxpv);
}
.icon-en {
background-image: url(http://goo.gl/wIQob);
}
.icon-ru {
background-image: url(http://goo.gl/If4lA);
}
http://jsfiddle.net/SkjHs/10/
Even when using border-radius, a border won't go inside the element. The few pixels at the edge of each image file force the border outside of the content of your image.
I recommend editing your image to remove the spacing, or even to add all of the effects you want on rollover.
As an example of spriting making shorter work of the issue:
<ul class="langBar">
<li><a id="az" href="?lang=az&page=main"></a></li>
<li><a id="en" href="?lang=en&page=main"></a></li>
<li><a id="ru" href="?lang=ru&page=main" class="activeLang"></a></li>
</ul>
html {
background-color:#000;}
.langBar{
display: block;
overflow: hidden;
float: left;
width: 125px;
}
.langBar li {
display: block;
width: 32px;
height: 32px;
float: left;
margin-left: 7px;
padding: 0px;
}
.langBar li a {
background: url(https://lh5.googleusercontent.com/orZ4dkDz2lBVJMB7D0Pb2fBHB8JPLcD8r2xqSYw-e3K7K2G427Ws_iqNbcYF1U2X36ju1y3eVy0) no-repeat 0 0;
display:block;
width:32px;
height:32px;
}
.langBar li a#az {
background-position:0 0;
}
.langBar li a#en {
background-position:0 -32px;
}
.langBar li a#ru {
background-position:0 -64px;
}
.langBar li a.activeLang,
.langBar li a#az.activeLang,
.langBar li a#en.activeLang,
.langBar li a#ru.activeLang {
background-position-x: -46px;
}
Thought this was a little lengthy, which is why I put this in a jsFiddle:
http://jsfiddle.net/mori57/n3Q74/
Hope this helps!
Related
I'm trying to build a left-panel for the navigation of a website; and running into a little bit of a problem. I originally was using CSS to create the buttons on the panel (Welcome, Services, Portfolio, FAQ and Contact) but below it I also wanted some Affiliation links, those were images with the logo's of the affiliations.
Here is an image for you.
http://prntscr.com/atci5k
When I was using CSS to create the buttons, I was able to use a:hover to change the background color, but I couldn't get the text centered vertically within the background, and I couldn't get it to stop clipping on re-size.
So I tried creating images to replace it, but now I'd like the a:hover to replace the welcome.png w/ welcome2.png so it will make the background darker on hover.
Here's the code:
<div class="leftpanelPics">
<a id="change" href="#" > <img src="images/nav/welcome.png"> </a>
<a id="change" href="services.html"><img src="images/nav/services.png"></a>
<a id="change" href="portfolio.html"><img src="images/nav/portfolio.png"></a>
<a id="change" href="faq.html"><img src="images/nav/faq.png"></a>
<a id="change" href="contact.html"><img src="images/nav/contact.png"></a>
</div>
<p class="text text-1"><span>Affiliations:</span></p>
<div class="leftpanelPics">
<img src="images/logos/FMO_Logo.png">
<img src="images/logos/IOCP_Logo.png">
<img src="images/logos/St_Jude_Logo.png">
</div>
<p class="text text-1"><span>Social Media:</span></p>
<div class="socialmedia">
<img src="images/socialmedia/twitterlogo.png">
<img src="images/socialmedia/facebooklogo.png">
<img src="images/socialmedia/instagramlogo.png">
<img src="images/socialmedia/pinterestlogo.png">
<img src="images/socialmedia/linkedinlogo.png">
</div>
`
Any help would be greatly appreciated.
Thanks
Edit
CSS:
.leftpanel {
position: relative;
float: left;
clear: both;
z-index: 10;
width: 20.4%;
height: 1199px;
margin-left: 10%;
vertical-align: middle;
}
.leftpanel .text {
min-height: 14px;
margin-left: 6.5%;
}
.body a.leftpanelPics:hover {
color: darkcyan;
width: 150%;
}
.leftpanelPics {
float: left;
clear: both;
width: 68%;
height: auto;
margin: 7px 0 0 13%;
}
.leftpanelPics img{
width: 100%;
float: left;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #0d1e6e solid;
box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}
.leftpanel {
position: relative;
float: left;
clear: both;
z-index: 10;
width: 20.4%;
height: 1199px;
margin-left: 10%;
vertical-align: middle;
}
.leftpanel .text {
min-height: 14px;
margin-left: 6.5%;
}
.body a.leftpanelPics:hover {
color: darkcyan;
width: 150%;
}
.leftpanelPics {
float: left;
clear: both;
width: 68%;
height: auto;
margin: 7px 0 0 13%;
}
.leftpanelPics img{
width: 100%;
float: left;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #0d1e6e solid;
box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}
You may want to create a class for the link itself. For example
<a class="welcome" href="#" ></a>
CSS:
.welcome {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('images/nav/welcome.png') center top no-repeat;
}
.welcome:hover {
background-image: url('images/nav/welcome2.png');
}
To create the rollover of the img on a:hover, you can do like this :
a:hover img {
content:url("http://lorempicsum.com/futurama/255/200/2");
}
See working fiddle
But it's not fully compatible on every browsers (last edit a year ago). See this answer on SO :
https://stackoverflow.com/a/11484688/6028607
An other way to do it, a more compatible one, is to use pseudo element on the link hover like this
a { position: relative; display: inline-block; }
a:hover:before {
content:"";
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
background:url("http://lorempicsum.com/futurama/255/200/2") no-repeat #fff;
}
See a working fiddle of this solution
I am trying to implement background image sprite hover effect from this CSS-tricks article: http://css-tricks.com/fade-image-within-sprite/
My problem is that the images do not align completely in the following case:
HTML:
<ul class="contact">
<li class="phone"><a class="bg_hover" href="#">Call me</a>
</li>
<li class="twitter"><a class="bg_hover" href="#">Follow me on Twitter</a>
</li>
<li class="email"><a class="bg_hover" href="#">Email me</a>
</li>
</ul>
CSS:
.bg_hover {
position: relative;
}
.bg_hover:after {
content:"";
background-image: inherit;
background-position: bottom left;
background-repeat: no-repeat;
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 1s;
}
.bg_hover:hover:after {
opacity: 1;
}
.contact {
margin-left: 60px;
}
.contact li {
float:left;
margin: 30px 15px 0 0;
font-style: italic;
}
.contact li a {
padding: 3px 0 0 25px;
height: 18px;
background-repeat: no-repeat;
display: block;
}
.contact .phone a {
background-image: url(http://i.imgur.com/9d9hdiL.png);
}
.contact .email a {
background-image: url(http://i.imgur.com/9d9hdiL.png);
}
.contact .twitter a {
background-image: url(http://i.imgur.com/9d9hdiL.png);
}
li {
list-style: none;
}
jsfiddle: http://jsfiddle.net/47Lngd4t/2/
Can you tell me where is the problem?
Your background-position isn't quite right. The image sprite you used is a pixel or two out. Change background-position to the following:
.bg_hover:after {
background-position: 0 -21px;
}
See demo here: http://jsfiddle.net/AndyMardell/47Lngd4t/3/
I changed
.contact li a {
padding: 3px 0 0 25px;
...
}
to
.contact li a {
padding: 2px 0 0 25px;
...
}
So, from 3px to 2px. Seems to align for me.
If You're talking about effect like here http://take.ms/a6ar2 simply add line-height for example 10px to .contact li a selector
There are also some other ways to get effect:
You can change padding of <a> elements
You can change background-position of image
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
I have been working on a simple shop layout. I want to display some 'hot' items.
Each item is a 100x70 box with an 36x32 image and under text. Each element has to have 15px margin between it.
So what I did is margin-left for every element, and disabled margin-left for first child.
But look what happens now, if I have a new line, this will happen:
(source: gyazo.com)
See the extra margin that my margin-left causes on the new line?
How can I prevent this? my css:
#hot {
max-width: 800px;
margin-top: 15px;
display: block;
overflow: hidden;
}
#hot li {
width: 100px;
height: 70px;
background-color: rgba(0, 0, 0, 0.4);
border: solid 1px rgba(255, 255, 255, 0.1);
list-style: none;
display: inline-block;
margin-left: 15px;
}
#hot li:first-child {
margin-left: 0;
}
#hot li img {
display: block;
width: 36px;
height: 32px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}
#hot ul {
padding: 0;
margin: 0;
}
#hot li span {
font-size: 12px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
text-align: center;
display: block;
}
Example html:
<div id="hot">
<span id="hotItems">Hot items</span>
<ul>
<li>
<img src="http://www.runelocus.com/img/items/144845.png" />
<span>A meme</span>
</li>
</ul>
</div>
js fiddle:
http://jsfiddle.net/cgbR9/
okay, here it goes :
maybe you can just use a margin-right and reset it to last-child
if needed ?
So I'm trying to keep an unordered list centered once the website hits a certain media query. I can't get it to stay in the center of it's container if the page is moved around. Here is the corresponding code.
HTML
<div id="centerNav">
<ul id="home-nav">
<li>DUI/DWI Defense</li>
<li>Criminal Defense</li>
<li>Estate Planning</li>
<li style="border: none;"> Agricultural Law</li>
</ul>
</div>
CSS
#media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
Remove float from li and make it display: inline-block
I think this will solve your issue.
css
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
jsFiddle Code
In your media query you need to make sure float is none because you have float set from previous css
#home-nav li {
float: none;
display: inline-block;
}
The unordered list that contains the li, add text-align: center
#home-nav {
text-align: center;
}
Also your html structure is currently invalid because you have a div as the immediate child of a ul. You can wrap the ul with the div if you need to but it definitely should not be the way it is now
That should solve the issue