EDIT Changed the text to reflect better the problem.
For live demo you see the website here: http://wow-klickers.de/ (The CSS here I have modified, to maybe solve the problem.)
So I have the following scenario. My website contains a navigation bar, which in the picture above contains a "Forum" button and there is above a logo. If I go over the button the hover effect hides the part of the logo which extends into the button. I want to hover over the button but not hide the part of the logo.
Here are my code snippets:
<h1 id="logo"> // the blue box of the 2. picture
// the blue box of the 1. picture
</h1>
CSS things:
#logo a {
width: 275px;
height: 126px;
display: block;
position: relative;
bottom: 18px; // added here
}
h1#logo {
margin: 0;
position: relative;
left: 85px;
top: 6px;
background: url("images/logo.png") no-repeat;
width: 275px;
display: block;
z-index: 2; // changed here
height: 126px; // added here
}
#primary-menu-bar li a, #primary-menu-bar ul.menu li a {
display: block;
white-space: nowrap;
height: 37px;
line-height: 29px;
position: relative;
z-index: 1;
}
EDIT I tried with padding or margin, but with margin my logo is cut off but the logo should overlay over the button. And padding does not work..
Add z-index:10 to h1#logo, and not just on the a tag inside.
Related
I'm using WooCommerce storefront for my website. I'd like header cart dropdown contents to be wider and drop to left (right-aligned). Since my header cart is at the top right corner of the screen, half the dropdown cart contents disappear into the right side of the screen. How can I make the cart contents drop to the left?
I tried the following:
CSS:
.site-header-cart .widget_shopping_cart {
position: absolute;
top: 100%;
width: 100%;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
}
My changes:
.site-header-cart .widget_shopping_cart {
position: absolute;
top: 100%;
width: 300px;
z-index: 999999;
font-size: .875em;
left: -999em;
display: block;
right: 0;
}
but to no avail. Still half the cart contents aren't showing as in the below screenshot.
Remove your css no need for the position absolute its positioning already exists
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart {
left: 0px;
display: block;
}
this is the standard css for the storefront mini cart as you will see the left is set to 0 meaning it will always go off the left edge of the top item so to adjust -minus the left to position like
.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart {
left: -120px;
display: block;
}
Dont know what to call it but I want a border that doesnt follow the divs height:100%; but is centered between top and bottom of the parent div.
What is the best solution? creating another div that contains the border? or is there any options in css that I dont know off?
heres a codepen to my current footer with the divs im using:
http://codepen.io/Volcan3/pen/yVoNZB
You could use pseudo classes to mimic a border that doesn't cover "100%"...
http://codepen.io/anon/pen/yVoORm
.footer-item::after {
content: '';
display: block;
height: 80px;
width: 1px;
background-color: red;
position: absolute;
right: 0;
top: 50%;
margin-top: -40px;
}
and then don't forget to make the parent item relative and a block:
.footer-item {
display:block;
height: 100%;
position: relative;
}
I want to make my button responsive, so I can't use the image together with background. I can use the second picture of the cart only, but how can style it, so part of it remains outside?
You could apply the background-image to a :pseudo-element of a button element and position them using top and left properties.
button {
position: relative;
width: 20%;
height: 35px;
background: #B7004A;
border: none;
border-radius: 5px;
}
button:before {
position: absolute;
content: '';
width: 100%;
height: 110%;
top: -7px;
left: -3px;
background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat;
background-size: auto 105%;
}
<button></button>
Is it something like this you are looking for?
jsFiddle: http://jsfiddle.net/vgayjg9j/2/
EDIT: updated the jsFiddle. It now sticks out.
<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button>
button {
width: 120px;
height: 40px;
}
button img {
height: 100%;
float:left;
}
From your question I think you want to button to fill the screen if it is on smaller devices?
Media queries is where you should start.
Also make sure you use % for the width of the button, for example if you want you button to fill the screen the css would look something like this:
button {
width: 100%;
}
And if the image should not change then I would define the width of the image in pixels:
button img {
width: 40px;
}
Having a <li> with some text and an image to the right of the text inside of the <li> with following css:
.selectable li {
margin: 1px;
padding: 0.4em;
height: 0.52em;
line-height: 0.54em;
position: relative;
cursor: default;
}
.selectable li img {
position: absolute;
top: 1px;
right: 1px;
}
Would like to have a margin to the left of the image so that the end of the text witch sometimes have a few characters more than others doesn't come to close or gets hiden under the image.
Have tried margin-left on the image but for some reason it does not work.
Update:
http://jsfiddle.net/upnrL/
I have searched for this topic but nothing seems to be helping me with my issue.
I have a search function that drops down when you start typing but it drops behind the menu bar hiding the search results.
I have played with the z-indexes but nothing helps.
I read that z-index doesn't work for certain positions. Is this true? If so how can I get the results to display over the menu bar?
If I change the positions my menu jumps out of place.
The css for the results:
#results {
z-index: 10000;
position: absolute;
width: 400px;
float: right;
background-color: #FFF;
text-align: left;
the css for the menu:
.menu {
position: relative;
float: left;
width: 900px;
height: 40px;
margin-top: 17px;
z-index: 3;
margin-left: 40px;
margin-bottom: 6px;
Thanks!
Since .menu2 has a z-index of 3, .banner (who is a parent to your search dropdown) needs to have a higer z-index (the class names are from collegesa.co.za).
Try to set z-index to 4 for .banner
.banner {
z-index: 4;
}