I try to implement a tab bar with extra padding on hover state.
But the problem is on hover state actually it moves parent div.
You can see the html below;
<div id="statNav">
Gogus
Kol
Gogus
Gogus
Gogus
Omuz
Gogus
</div>
and css;
#statNav{
width:100%;
border-bottom:2px solid #9B2F2C;
overflow:auto;
}
#statNav a{
float:left;
background-color:#333333;
color:white;
font-size:12px;
font-weight:bold;
text-align:center;
width:62px;
padding-top: 5px;
padding-bottom:5px;
border-right: 1px solid #777777;
}
#statNav a:first-child{
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
}
#statNav a:last-child{
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
border-right:none;
width:63px;
}
#statNav a:hover{
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
background-color:#9B2F2C;
padding-top: 15px;
}
Here is the working sample;
http://jsfiddle.net/Kg3p4/
How can i solve it?
You can solve this by using margins on the non-hovered tabs and removing them on hover to counter the increased padding size. Note that the size of the margins is equal to the difference between your hovered and non-hovered padding.
#statNav a{
margin-top: 10px;
padding-top: 5px;
}
#statNav a:hover{
margin-top: 0;
padding-top: 15px;
}
I've updated your jsFiddle with a simple demo of this solution.
You can modify the hover state a bit by adding a negative margin-bottom equal to the padding difference. Something like this :
#statNav a:hover{
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
background-color:#9B2F2C;
padding-top: 10px;
margin-bottom: -5px;
}
http://jsfiddle.net/Kg3p4/5/
Related
The text hangs outside of the DIV container. Perhaps I have the wrong elements in my CSS. On my actual website it hangs below but when I check snippet here it doesn't hang. Here is the code.
screenshot of problem
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
left: -350px;
top: 27px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
}
<div class="bodybox">
Print
</div>
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
//left: -350px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
text-align:center;
cursor:pointer;
display:flex;
}
.bodybox span{
margin : auto;
}
<div class="bodybox">
<span>Print</span>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
I am trying following code for executing one alignment of boxes in right side with two adjacent box in row, please check below code why that main DIV class list_right css in not executing.
Fiddle link.
<style>
.list_right {
float:right;
padding:40px 5px 0px 0px;
width:37%;
position:relative;
}
.part_1 {
width:50%;
float:left;
line-height: 1.7;
}
.logos {
float: left;
width:160px;
margin-left:0px;
margin-bottom:8px;
padding-left: 45px;
padding-top: 1px;
padding-bottom: 3px;
text-decoration: none;
font-family:'Volkhov', arial;
font-size: 19px;
letter-spacing: 1.3px;
line-height: 2.14;
color: #6d6e71;
border: 1px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-color: #41c7ee;
behavior: url(/css/pie/PIE.htc);
}
.logos:hover {
border-color: #6d6e71;
background-color: #41c7ee !important;
color: #ffffff !important;
text-decoration: none !important;
}
.site_1 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
.site_2 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
</style>
<div class="list_right">
<div class="part_1">
Sites
</div>
<div class="part_1">
Sites
</div>
<div class="d_hidden">
</div>
<div class="clear_both">
</div>
Seems to me (from your code) that you are not closing the list_right tag. Close it and it should work properly... try to indent your code, make it look more clean, so that in the future you will be able to see the problems yourself.
You have <style> tags in your css in your original fiddle link which demonstrates the problem your were having.
Delete them, they shouldn't be there.
That's what's interfering with the list_right class.
FIDDLE
I have one problem with my CSS code.
The problem is active link sliding down.
This is my DEMO page link from codepen .
If you check my DEMO page then you see blue border color active links. I want that links come on the al the images. But now 5,6,7 numbers picture active link blue border sliding down. What can i do here anyone can help me?
.slider-control-nav a {
display: inline-block;
width: 96px;
height: 71px;
float:left;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
text-indent: -9999px;
margin-left:16px;
margin-top:5px;
}
.slider-control-nav a.active {
border:2px solid #3978f5;
opacity:1;
box-shadow:inset 0px 0px 10px 3px #777777;
-moz-box-shadow:inset 0px 0px 10px 3px #777777;
-webkit-box-shadow:inset 0px 0px 10px 3px #777777;
width: 97px;
height: 72px;
}
.imgtmb img {
width:97px;
height:auto;
border-radius:3px;
-webkit-border-radis:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.imgtmb {
float: left;
width: 97px;
height: 72px;
margin-left: 16px;
margin-top: 6px;
}
Move slider-control-nav section from within img_tb and place it above.
Increase .container's width to not force the images below
This is my page
My css for the above web page looks fine on browsers on the desktop, however, on mobile browsers the border around the food ingredients are displayed incorrectly:
Relevant CSS :
.page_title {
text-transform:capitalize;
text-align:center;
}
.food_list {
text-transform:capitalize;
}
.listing {
text-indent:10px;
margin-right:1500px;
margin-left:10px;
color:black;
background-color:lightblue;
border-radius: 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px;
-khtml-border-radius: 10px 20px 30px 40px;
}
.ul {
list-style:none;
}
p {
text-transform:none;
}
p span {
display:block;
}
try this:
jsFiddle
.listing {
text-indent: 10px;
margin-left: 10px;
color: black;
float: left;
background-color: lightblue;
border-radius: 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px;
-khtml-border-radius: 10px 20px 30px 40px;
}
h2{
clear:both;
}
I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.
<div style="border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:none;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;">
<strong style="font-size:18px; color:#000">ABC</strong>
</div>
<div style="width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;">
Hello
</div>
Can anybody help me to solve this error.
jsFiddle: http://jsfiddle.net/9XFDp/1/
Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine
Demo
Added the below properties to the header div
position: relative;
top: 1px;
background: #fff;
z-index: 1;
Note: Don't use inline CSS, create classes instead.
Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)
Like this
DEMO
CSS
.title{
border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:1px solid #ffffff;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;
font-size:18px; color:#000
font-weight:bold;
position:relative;
top:1px;
}
.content{
width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;
}