I'm sort of new to HTML and currently, I am creating a custom home page for myself containing links to site I often visit.
When I hover over a picture it expands to show more specific links (i.e. subreddits).
However, the problem is that the "sub-link-icons" are not properly aligned with the expanding DIV It will show in front of the bigger picture when hovering over it.
What I am trying to do is have the sub-link-icons to be in sync with the expanding div.*
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Homepage</title>
</head>
<body>
<div class="submenu" id="steam"><img src="steam.png"></div>
<div class="submenu" id="reddit">
<img src="reddit.png"/>
<ul>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
</ul>
</div>
<div class="submenu" id="youtube"><img src="youtube.png"/></div>
</body>
</html>
CSS:
body {
background-color: #330000;
color: white;
}
div img {
width:256px;
height:256px;
border-radius:5px;
}
li img {
width:75px;
height:75px;
border-radius:15px;
}
#youtube:hover {
border: #E6E6E6 solid 4px;
background-color: #E6E6E6;
}
#steam:hover {
border: #12151A solid 4px;
background-color: #12151A;
}
#g2a:hover {
border: #0F1F2E solid 4px;
background-color: #0F1F2E;
}
#reddit:hover {
border: #999999 solid 4px;
background-color: #999999;
}
ul{
position:absolute;
list-style-type: none;
display:none;
margin-left: 125px;
}
.submenu {
border-radius: 5px;
position:relative;
display: inline-block;
margin-left: 0px;
width:256px;
height:256px;
border:4px solid #330000;
text-align:center;
margin-left:5px;
margin-top:5px;
transition: width 1s;
z-index:0;
}
.submenu img {
float:left;
}
.submenu:hover {
width:350px;
transition: width 1s;
}
.submenu:hover img {
float:left;
z-index:2;
}
.submenu ul {
position: absolute;
}
.submenu:hover ul {
display:inline-block;
float:right;
margin-top:-10px;
margin-left:-45px;
position:absolute;
z-index: 1;
}
.submenu:hover ul li img {
float:left;
margin-left: -30px;
margin-top: 12.5px;
}
I've tried searching the web for help but couldn't quite manage it.
JSFIDDLE
Lets go through this step by step.
First issue: On hover, "sub-icon-links" are layered over your big pictures, instead of under it.
This IS fixable with z-index, but first you have to understand how z-index works.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
With z-index you can layer elements that are in the same HTML layer. Because it didn't work I assume you've tried to apply z-index on the sub-menu-links. This wouldn't work because the big picture is not on the same layer as them. If we take a look at your HTML structure you'll see:
<div class="submenu" id="reddit">
<img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/>
<ul>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
</ul>
</div>
To use z-index in this case, you have to see at which points the images or their containers are on the same layer.
Your big image is contained within an anchor tag (a)
Your small images are contained within list items
These list items are contained within an unordered list
This unordered list and the anchor tag are on the same layer. Applying z-index to one of these will fix this issue.
Note: This works different when using things like "position: absolute" and "position: fixed" or any other attribute that changes the position of the element in the HTML stack.
JSFiddle: https://jsfiddle.net/eehdo8wa/5/
What I did:
Added "z-index: -1;" to ".submenu ul"
Removed "z-index: 1;" from ".submenu:hover ul"
Second issue: On hover, the "sub-icon-links" should expand at the same rate as the div expands
So, doing this should be very simple now the pictures are layered under the big picture correctly. Basically, when you think about it, all you should have to do is make the pictures stick to the right side of its parent, so when it expands, the pictures stick to the right side and slide along, taking them into the view.
JSFiddle: https://jsfiddle.net/eehdo8wa/6/
What I did:
I redid some of the CSS to make it so everything is already in the right position before sliding into the view. This is essentially what you want in these cases. In your original fiddle you had a LOT of styling on the hover portions, changing all kinds of styling and spacings, but was it really needed? In the end, no. Now it's all in position behind the big image, ready to slide right into the view.
Related
I'm trying to make a dropdown menu bar and if I hover on an Item tooltip will show some text.
I am getting result A and I was hoping for a result like B where the tooltip is NOT half covered up by the dropdown menu.
I am assuming that since I have my span element is inside the anchor element,it is not possible for it to pop out of the dropdown menu or maybe
it's due to the overflow attribute but I'm not really sure how to fix or alter my code in order to achieve B, also I would not want to increase the width of the dropdown menu to achieve this,that is to say I don't want the tooltip text is restricted by the dropdown menu.
Is there a direction I can head to achieve what I am asking??
code is below :
HTML
<ul id='menu'>
<li>choose
<ul>
<li><a class="tooltip" href="">a<span class="tooltiptext">this is a</span></a></li>
<li><a class="tooltip" href="">b<span class="tooltiptext">this is b</span></a></li>
<li><a class="tooltip" href="">c<span class="tooltiptext">this is c</span></a></li>
<li><a class="tooltip" href="">d<span class="tooltiptext">this is d</span></a></li>
</ul>
</li>
CSS
#menu > li {
display:inline-block;
border:1px solid grey;
position:relative;
}
#menu li ul {
position:absolute;
border:1px solid grey;
list-style-type: none;
max-height:0;
overflow:hidden;
}
#menu li:hover ul {
overflow-y:scroll;
overflow-x:hidden;
max-height:150px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Best results will be observed if you use Javascript. I've written up a brief example in CodeSandbox (https://codesandbox.io/s/nn96zl4jl).
Set the containing <ul> element to position: absolute, have tooltip <div> elements outside of this element and initially display: none, write element ids that can be connected by a pattern (e.g. element id 'number1', tooltip id 'number1tooltip', 2...3...4 etc.), connect event listeners that can get the hovered target ('mouseenter', 'mouseleave') events, find the tooltip from the hovered target (concatenate 'tooltip' with id), set display: inline and use the getBoundingClientRect() to find out how to position it absolutely (see CodeSandbox methods).
GL.
just make a small change in CSS
#menu li:hover ul{
overflow: visible;
max-height:150px;
}
Your problem was caused because of overflow value as you see above. Here is my jsfiddle. Here are little docs about overflow value w3school, MDN.
I want to create a navbar with a ul element in which each item on the navbar is a textless, image-only link. So I set it up like so:
<ul>
<li></li>
</ul>
And then I realized I didn't really know how to get the images in there. I thought of two ideas, but they each have problems:
Put an img tag inside the anchor. This isn't good content/design separation, and also, if I want to make the image change when the user hovers over it (which I do), it gets a lot more complicated.
Use CSS background images, but now I have to give the anchor a width and height equal to the image's dimensions, forcing me to modify my code every time I change the images.
Image-only navbars are very common, so is there a standard way to do this?
I'm using it these way:
CSS
ul{
display:inline-block;
width:350px;
height:150px;
}
ul li{
display:block;
}
ul li a, ul li{
display:inline-block;
width:100%;
height:100%;
}
ul li.fb a{
background:url(http://placehold.it/350x150) no-repeat left center;
}
ul li.tw a{
background:url(http://placehold.it/350x150) no-repeat left center;
}
<ul>
<li class="fb"></li>
<li class="tw"></li>
</ul>
And you can put all these images in sprite, etc...
http://jsfiddle.net/sthAngels/842d4493/
Use both, use image with transparency and bacground-image, so you can change img on hover and transparent img will stretch <a> tag for you:
<a><img src="some-image.jpg" /></a>
and css something like this:
a img{
opacity:0;
}
a{
background-image:url(some-image.jpg);
}
a:hover{
background-image:url(some-other-image.jpg);
}
The most easy way to achieve this is to insert the on-hover-image (which will of course have the same dimensions as the normal image) in the anchor itself, and stack an element on top of it, which will have the 'normal-state' image as a background. Then on hover, hide the stacked element to show the on-hover-image. The anchor itself will now by itself have the images dimension, as will the stacked element.
html:
<ul>
<li><a href class="link1"><img src="link1-hover-image.png"><span></span></a></li>
<li><a href class="link2"><img src="link2-hover-image.png"><span></span></a></li>
<li><a href class="link3"><img src="link3-hover-image.png"><span></span></a></li>
</ul>
css:
a { position: relative; }
a img { vertical-align: bottom; } /* little hack for correct placement */
a span { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
a:hover span { opacity: 0; }
.link1 span { background-image: url(link-1-image.png); }
.link2 span { background-image: url(link-2-image.png); }
.link3 span { background-image: url(link-3-image.png); }
DEMO
But like everyone said; wherever possible just use plain css. Much faster, easier to maintain. So only use this if it's reaaally not possible to use css to style your buttons.
So, this might sound basic for some of you guys. But i just haven't been able to figure it out.
So i have this CSS and this HTML Code:
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
position: absolute;
left:0;
right:0;
}
.ppt img {
margin-left: 5px;
}
</style>
<center>
<ul class="ppt">
<li>
<img src="#">
<img src="#">
</li>
</ul>
With this code i will have 2 pictures next to each other in the center.
Now i would like to add 2 more pictures, those 2 just can't be in "lo" nor "li". But the pictures will have to be on the same row, one of them will be at the start and the other one will be at the end, how can i do this?
(Click here for a picture explanation)
Thanks in advance.
Check http://jsfiddle.net/AvqEB/1/
ul.ppt {
position: relative;
list-style:none;
display:inline-block;
padding:0;
margin:0
}
.outerimg { display:inline-block; margin-left: 5px;}
.ppt li {
display:inline-block;
}
.ppt img {
margin-left: 5px;
}
and html
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
<ul class="ppt">
<li>
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
</li>
</ul>
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
You can do this by floating things to the left. Here is a jsfiddle demo: http://jsfiddle.net/6L7x9/1/
On an aside, I find using DIV with a centered class far preferable to using the CENTER tag.
<style type="text/css">
ul.ppt {
position: relative;
padding:0px;
margin:0px;
}
.ppt li {
padding:0px;
margin:0px 5px;
list-style-type: none;
float: left;
}
.leftfloat { float: left; }
.inlineimage {
margin:0px 0px 0px 5px;
border:0px;
}
</style>
<center>
<img src="#" class="leftfloat inlineimage" />
<ul class="ppt leftfloat">
<li>
<img src="#" class="inlineimage">
<img src="#" class="inlineimage">
</li>
</ul>
<img src="#" class="leftfloat inlineimage" />
One does wonder why the bounding images must be outside the UL...
UPDATE POST OP COMMENT
Ok, I've taken your sample, dropped it into JSFiddle, and modified it so that back & forward are on either side of the "slideshow" image (http://jsfiddle.net/SFvGk/). One immediate issue is the varying width of the slideshow frame, which causes the "next" button to jump around. You could mitigate that by setting a fixed with for the UL, and then accepting empty space when narrower images are displayed.
Modifications:
Add class "payitforward" to the next/prev buttons.
Add style "display:inline-block" to UL and set margin/padding to 0 for UL and LI.
Add to top of script:
var $slideContainer = $("ul.ppt");
$slideContainer.width(cur.width())
Add to end of "forward" function:
$slideContainer.width(cur.width())
Comments:
You might look into events on the fadeIn/fadeOut functions to possibly smooth out movement of the "Next" button on the right, or just fix the width of the slideshow container so the "Next" button never moves.
Definitely look into requestAnimationFrame to replace "setInterval". Here is one resource: http://creativejs.com/resources/requestanimationframe/.
Use :after and :before.
li{height:20px; width:20px; margin:10px; background:red; display:inline-block; position:relative;}
li:before, li:after{content:" "; position:absolute; height:20px; width:20px;}
li:last-child:after{background:blue; right:-25px;}
li:first-child:before{left:-25px; background:green;}
Fiddle here.
These Sprite buttons are driving me bonkers. I can almost get them to work, but not quite.
I'm playing with this very simple sprite image:
I've got a jsfiddle project >> HERE << if you want to see that, but the code is below if you just want to look at it.
For my CSS, I have the following:
#menu {
left:10px;
top:50px;
height:300px;
width: 147px;
position:fixed;
}
.sprite {
background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat;
height:50px;
padding-left: 50px;
width:147px;
z-index:1;
}
.sprite a {
background-position: 0px 0px;
color:Red;
vertical-align: middle;
}
.sprite a:hover {
background-position: 0px -50px;
color:Yellow;
}
With that, my HTML is simple and small:
<html>
<body>
<ul id="menu">
<li class="sprite">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
I can't seem to get my active link image (at position 0) or my hover link image (at position 50) to show.
Also, I'd like to find a way to make the entire rectangular region (50 x 147) the hyperlink.
Could someone help me, please?
Is that what you want to get: http://jsfiddle.net/PZh9F/37/ ?
CSS:
#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }
And HTML:
<html>
<body>
<ul id="menu">
<li class="sprite current">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
I updated your fiddle: http://jsfiddle.net/PZh9F/12/
As you ha set the background of the ul (as it should) you also need to change the backgorund position of this same ul on hover, so not for the a as you did. Change the text color however should be done with a:hover I hope this points you in the right direction.
You're applying background to <li> tags and background-position to <a> tags instead of applying both to the same set of tags.
you defined the background for li.sprite not the hyperlink . that's why when a:hover happens there is no background to go -50px down .
.sprite a {
background-image: url('http://www.jp2code.net/logos/jp2Rollover.png');
background-position: 0px -100px;
color:Red;
vertical-align: middle;
display:block;
width:147px;
height:50px;
}
.sprite a:hover {
background-position: 0px -50px;
}
just a few issues:
The anchor tags weren't closed, so that may have caused some issues.
Any time you want something to behave like a link, it should use an anchor tag; I noticed the first li tag was just text. Technically, you can still achieve the same effect, but I'm guessing you're attempting to link to something.
When you're using html text for links within a button that is using a background image, I recommend putting the text into a span which makes it easier to format. When you add padding to an anchor tag without using the span, you can get extra padding on the opposite end in some browsers even with a set width. Just a little trick I learned over the years.
When using sprites, make sure you add height, width and display:block properties to the "a" selector. This will ensure that the entire link is clickable.
It looks like some of your hovers are jumping, it might be an issue with your sprite. It's crucial that your measurements are accurate. If it's even 1px off it can produce an undesired flicker effect.
The complete code is here:
http://jsfiddle.net/PZh9F/65/
Hope that helps!
background-positions by y-axis should have negative values of -50px and -100px.
I have a simple drop down menu.
When i add other elements under the menu (like text for exemple) they are still visible even if the drop down menu is oppened. The drop down menu is somehow merged with the content under it, resulting in ugly superimposed content.
Here is my css :
ul#menu, ul#menu ul{
margin: 0px;
padding: 0px;
}
ul#menu li{
width: 160px;
margin: 4px 0px 0px 4px;
padding: 5px;
list-style: none;
position: relative;
float: left;
background: #eef;
border: #bbf solid 1px;
}
ul#menu li ul li{
width: auto;
margin: 4px 0px 0px 0px;
float:none;
display: none;
background: #ddf;
border: #bbf solid 1px;
}
ul#menu li:hover ul li{
display: block;
}
ul#menu li:hover{
background: #ddf;
}
ul#menu li ul li:hover{
background: #ccf;
}
ul#menu li img{
margin-right: 10px;
}
Here is my html :
<ul id="menu">
<li>
<span><img src="images/logos/file_small.png">Bilan</span>
<ul>
<li id="creer"><img src="images/logos/add_small.png">Créer</li>
<li id="consulter"><img src="images/logos/other_small.png">Consulter / Modifier</li>
</ul>
</li>
<li>
<span><img src="images/logos/chartbar_small.png">Extract</span>
<ul>
<li><img src="images/logos/pdf_small.png">Pdf</li>
<li><img src="images/logos/xls_small.png">Excel</li>
</ul>
</li>
<li>
<span><img src="images/logos/first_small.png">Module Conso/Gene</span>
</li>
</ul>
I hope you can help. :)
http://jsfiddle.net/chrisvenus/GRfDT/2/ is a fiddle with your modifications and a solution.
What I did was firstly altered the margin to make sure the text appeared in the right place (ie increasing the top margin).
Then I modified the z-index on that text to put it behind the menu stuff. You could also have modified the z-index of the menus and it might even be best practice to put a z-index on both.
<div style="position: absolute; margin-top: 50px; z-index: -1"> SOME CONTENT </div>
z-index is basically designed for exactly this purpose - determining what order the content is in from background to foreground. For more information on it see http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index
Also I shoudl note that kinakuta, although replying before your problem was fully explained, is right about the fact that you should probably be making your menu absolute rather than the content that follows it. Mainly because I suspect it will mean neater HTML overall since it will stop you having to either have a container with all your other content or making far more things absolute than you want or worst case nto making everythign take it into account so some things get moved about or overlayed by your absoluted text in other ways...
something like this: http://jsfiddle.net/chrisvenus/GRfDT/3/ (the same as before but with some swaps about where the position: absolute is)
The main issue I see is that when your menu "displays" it's pushing things below it down. You want to set the position of the nested list to absolute to remove it from the flow of the page:
#menu li ul { position: absolute; }
This will make the menu appear over the text/content instead of pushing it down.
One more thing - you'll want to add some positioning to that same ul - left 0; and top 25px; (or something around there to fit how you want it to look.)