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.
Related
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.
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.
I am new to HTML, I have created circle using border-radius and i have put some text in it. the Text is displaying on the lower part of the Box and its also appearing after the circle. I want to put the Text in the circle.
Kindly check this and guide me.
<ul>
<li>HOME</li>
<li id="skills" class="navText" >Work - Work Experience</li>
<li id="web" class="navText">Skills </li>
<li id="video1" class="navText">Web - Web Projects </li>
<li id="video2" class="navText">Video - Video Projects </li>
</ul>
Style
#navText
{
position:absolute;
top:-90px;
}
nav ul
{
list-style-type:none;
padding:0;
margin:20px 0px 0px 130px;
}
nav ul #skills
{
position:absolute;
line-height:-200px;
background-color:#EA7079;
display: inline-block;
border:6px solid;
border-color:white;
border-radius:110px;
padding: 91px 31px 31px ;
width:80;
height:25;
text-align:center;
#margin-left:35px;
}
Line-height equal to height of the div/li also works - FIDDLE
This works fine for short lines, for long lines, you'll have to use another technique as mentioned.
The top circle in the fiddle is a div in a div changed to inline-block
CSS
.centerofcircle1 {
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 100px;
font-size: 15px;
background-color: red;
color: white;
text-align: center;
}
This is one of the thing that css dosen't do very well. However there is a solution, here is a great article by Chris Coyier that helped me with this problem.
You could add the vertical-align property to your text class.
vertical-align: middle;
Also, if that doesn't work, try to manually place in the middle with margin-bottom or/and margin-top.
margin-bottom: 10px;
And your #navText is an id. Use div id="navText" instead of class="navText"
Sorry, I'm really new to HTML5 and CSS3 and my searches haven't turned up anything to what I'm sure is a really basic thing. What I'm trying to do is create a row of clickable images / links for my website. Much like how stack overflow has there questions, tags users links above.
So far my css looks like the following:
a#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url('img url') no-repeat bottom;
width: 50px;
height: 100px;
}
But this isn't doing what I'm after. It's only placing the image in the centre of the screen. Could someone please help me? Also, is there a best practise for doing something like this?
The margin:0 auto is what is putting it in the center of the screen. You will probably want to drop this, or put it on the container element rather than the individual boxes.
What you probably want for putting several boxes in a line is either float:left or display:inline-block. Either of these will work; they work differently, and there are things you need to know about both of them in order to get the layout working the way you want it, but I'll leave those extra details for you to do further research on.
It's worth noting that none of the code you quoted is specific to HTML5 or CSS3 -- it's all basic HTML/CSS syntax that has been around for a long time.
Since you didn't provide any markup, I'll use the stackoverflow example you cited:
<div class="nav mainnavs ">
<ul>
<li class="youarehere">Questions</li>
<li>Tags</li>
<li>Users</li>
<li>Badges</li>
<li>Unanswered</li>
</ul>
</div>
While you could use your own divs to do this markup, this is the most semantic and concise way of representing a navigation list.
To style this list the way you want, you only need to apply the following styles:
.nav ul {
list-style-type: none;
}
.nav li {
display: block;
float: left;
}
.nav a {
display: block;
padding: 6px 12px;
/* Any other styles to disable text decoration, etc. */
}
Then just position the .nav container where ever you want on the page.
If you're lazy like me, you can put a few <a> tags in a <header> or <nav>, and use display: inline-block.
http://jsbin.com/ivevey/3/edit
HTML
<header>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
</header>
CSS
header {
text-align: center;
}
header > a { /* assuming a <header> contains your <a> tags */
display: inline-block; /* make sure every image/link is treated like text, ltr */
width: 15px; /* width/height or padding. either works */
height: 15px;
background-color: red; /* This should work for a 15px x 15px image instead */
}
Just be careful of the space between the links. Those are whitespace characters. I generally use header {font-size: 0;} to clear that up.
Ideally, I'd have a structure where there's a <ul> in a <nav>, since it is a list of navigation links, after all.
Maybe something like this?
http://jsfiddle.net/MRayW/6/
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</nav>
a[id^='header_'] {
border: none;
background: url('xxx.jpg') no-repeat bottom;
width: 50px;
height: 50px;
text-align:center;
color:red;
list-style:none;
float:left;
margin:5px;
}
ul {
padding:0px;
margin:0px;
background-color:#EDEDED;
list-style:none;
background: none repeat scroll 0 0 red;
height: 60px;
margin: auto;
width: 420px;
}
nav {
margin:0 auto
width:500px;
}
I have the following CSS in attempt to create a rollover effect:
#arrow {
position:absolute;
left:540px;
top:150px;
width:220px;
height:120px;
}
#arrow a{
display: block;
width:220px;
height:120px;
text-decoration: none;
background: url("images/arrow.jpg");
background-position: 0 -120px;
}
#arrow a:hover {
background-position: 0 0;
}
And later, the div tag:
<div id="arrow">
</div>
However, when my mouse rolls over the image, it doesn't change the background position of the link. Thoughts?
Add background-repeat: no-repeat to #arrow a.
It is working, but your background is repeating so it may look like it's not working at all. So either set no-repeat or for the background-repeat or just take off the url setting and then add it on hove only