I am trying to get the effect seen on many sites where on hover an image appears that is clickable. For example, when an element is hovered over the bin image appears using ::before. I would like to make this clickable.
The image is displayed on the section div using:
.section:hover::before {
content: url("#/assets/icons/bin.svg");
display: block;
position: absolute;
top: -10px;
right: 25px;
background-color: white;
}
I understand from reading many similar posts that the pseudo element itself does not allow for this but I am wondering how this effect is achieved.
simply add an <a> tag with href pointing to where you want...
Related
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
i have this jsfiddle which as you can see when you hover of the Link the Hidden link should display but because of the position absolute it doesnt. Any idea how to make the link display without changing the position: absolute
I tried z-index to no go
The hidden link has position: absolute; and top: 100%;, so it displays 100% from top (thats why scrollbar appears after hover). Change the top property to something different and you will see the result.
The link are displayed, but in the bottom of the page, if you change the CSS you must see the link:
.wrapper .nav ul {
display: none;
position: absolute;
width: 200px;
top: 10px;
left: 0;
}
It's actually appearing; however, it's relative to the previous element in the hierarchy that has a relative position.
.wrapper {
height: 33px;
position:relative;
}
I'm not sure which element you want it relative to. In my example, I made it relative to your wrapper.
In your css .wrapper .nav ul {}, you have the top: 100%;. If you change that to say, 100px, it shows. Of course position it where you want by adjusting the pixels.
so i have this fiddle http://jsfiddle.net/speeedracer/CGucm/ and as you can see when you mouse over any of the links across the top row, the popup div is under the list elements of the bottom row. anyone know how to get it to cover over the other page content? i changed the z-index to be really high so it appears on top, but it didn't work.
here's the drop-down box code:
enter code here.drop-box {
display: none;
position: static;
width: 400px;
height: 100px;
z-index: 9999;
background: #e8dfc2;
}
*i know i have some visual spacing issues, but i just need a working mockup without it having to be perfect...yet.
thanks!
z-index does not work with position: static. This is as if you had no position.
So changing your position: absolute will solve your problem and z-index will come into play.
I have been trying to center a Navigation bar on my Vbulletin website for a few days now. I've tried changing the parent class, the child class, manually inserting CSS in the html element, but it seems that something is overriding the style somewhere. Firebug does not seem to identify the problem for me.
Link to the forum: http://www.mobileassaultgroup.co.uk/forum/
The navbar is just underneath the banner image.
I have tried
display: block-inline
margin-left: 50%;
margin-right: 50%;
horizontal-position: middle;
On both the <ul> and <div> to no avail; it just sticks there slightly off to the left.
It is not the search bar on the right hand side either as I deleted that from the page and it still stays on that position.
Any ideas?
Thanks
Something like this will work if you remove the search box.
CSS:
#navtabs_container {
display: block;
width: 600px;
margin: auto;
}
#vbtab_forum ul {
left: 50%;
margin-left: -260px;
}
This css of yours won't work. This this instead.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
I've been asked to change the layout of this charity website:
http://antidotemarketing.com/youthlife/
I need to place the nav up the top, then the logo underneath, then under that the white box containing the slider and main content.
This must be done using CSS only.
So far I've had difficulty getting the same results in both Chrome and FF... I haven't even checked IE yet. How would I go about positioning the logo in the middle of the nav and the main content box with some adequate spacing (say 20px top and bottom)
One more issue: I can't absolute position the logo because when people log in to wordpress, the header that wordpress injects into the top messes up the spacing of everything.
Thanks everyone :)
OK, I think I finally understand what you are after. Try adding the following styles:
#logo {
position: absolute;
top: 80px;
z-index: 100;
}
#login #logo {
position: relative;
}
#page {
margin-top: 45px;
}