I am working on one website so i have given CSS div hover effect on shopping cart link in the top menu...
Once you will add one product in the cart than hover it in the top menu on shopping cart link that hover div is not working properly when i hover that its come and sudden disappear not getting the exact bug....
So pls try to find out the bug.....
I am talking about this bug once u will see attached image...
Here is the website link :- http://www.aurikjewels.com/index.php/
Thanks in Advance
hover is not working as expected and dis-appears as you move out of the header-items because of the below property,
.block-cart-header #header-items
{
padding:15px;
}
if you give padding-top:0px; and add margin-top: -10px this issue will not occur.
Add margin-top: -10px; to header-items div
By simply moving the cart like so, into the button-show :
<span class="button-show">Shopping Cart
- <div id="header-items">
All cart informations
</div><span class="price">Rs. 37,212.00</span>
</span>
And adding a height to your button-show :
.block-cart-header .button-show {
background: url(../images/shopping_bag.png) no-repeat right center;
color: #FFFFFF;
float: right;
font-size: 12px;
margin: 5px 14px 0 0;
padding-right: 20px;
position: relative;
height: 24px;
display: inline-block;
}
this works for me !
The problem was .button-show do not have enough height to hold the event-hover.
Once the cursor moves away to gap between .button-show and #header-items, the hover dies.
and #header-items fades.
To overcome this problem, you have to do few things like
Add padding-bottom: 10px; to the class="button-show" as inline style
The line will look like <span class="button-show" style="padding-bottom: 10px;">
Add background of .block-cart-header .button-show as url(../images/shopping_bag.png) no-repeat right 1px
Hi all i have sorted out the issue....
I have removed the
.block-cart-header .actions { display:none !important; }
And now its working fine...
Thanks for all for your great support... :-)
Related
I'm trying to style my navbar and work on its aesthetics but I think I'm missing a trick. The darken which happens on the hover is too big for my liking, but the only size change I can do is an overall padding which doesn't allow fine tuning.
I've spent the last 2 hours looking for a solution and I'm stumped. I bet it's something simple and I'm just not seeing it.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 6%;
transition: top 0.3s;
z-index: 2;
}
#navbar a {
float: left;
display: block;
color: white;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
height: 6%;
border: 1px inset #000000;
}
<div id="navbar">
<div class=buttonContainer>
<div class="homeBorder">
Home </div>
Skills
Projects
About
Contact
</div>
</div>
Right now, your code does not show any "darkening" but I hope I still understood your question correctly: You want the background of the navbar links to be of a certain color on hover but the area is too big, especially in height?
You are right, your issue is caused by the 10px-padding that you have set on your link elements. I would recommend you to reduce the padding to maybe 5px to achieve the height you would like to see on hover (same padding for normal and hover, otherwise the links "jump" on hover). You could then wrap all links in an additional div to make universal changes or you could simply work with margins instead. I would also recommend not setting a specific height on the navbar but letting the elements inside determine its height by using padding and margin.
What always helps me when dealing with spacing in CSS, is adding differently colored backgrounds to ALL of the elements involved as to understand their behavior and to test my code.
In case there is a specific reason why you cannot reduce the padding, then please edit your question and make your requirements clearer.
Btw, there is one fatal error in your code:
<div class=buttonContainer>
should be:
<div class="buttonContainer">
(quotes!!)
...and ideally it should be:
<div class="button-container">
as it's not best practise to use camel case in CSS as opposed to JS or other programming languages.
Im doing this web with Wordpress and one theme but i have a problem with a transition to the submenus.
If you can check the "QUÉ HACEMOS" submenu, you will see that when i try to click on an element of submenú if imposible by the margin top, do you understand ?
If i delete the 38px margin top of sub-menu class no problem, but I need that the submenú start and header border but i have this problem that i cant fix, please help.
Thanks a lot.
Find the following definitions in your CSS and edit respectively
.main-nav > li > a {
margin: 0px;
padding: 37px 25px;
}
li:not(.dt-mega-menu) .sub-nav {
width: 280px;
margin-top: 1px;
background: #043349;
}
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
Alrighty so I am attempting to create a header for a website I'm making, but I'm having a bit of trouble with padding some links out for my top level nav.
Basically what's happening is, if I have a long link name, it overlaps with another link.
I think this is something to do with the width but I'm not sure how I can fix it. I also really don't want to create a fixed width for the links, as I am wanting to make each text in the links 60px away from the previous.
HTML:
<nav id="top_navigation">
Home
Example1
Longtextjustbecause
Testpage3thingy
</nav>
CSS:
#top_navigation a {
display: inline-block;
height: 60px;
color: #3b3b3b;
font-family: Hero;
font-size: 26px;
text-decoration: none;
line-height: 60px;
padding: 0px 30px; }
Any help is greatly appreciated, thanks!
Yeah so it turned out to be the font that I was using for some reason. It doesn't appear to like padding in any circumstance very much.
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/