I have a list, like this:
<ul id="categoryTabsId" class="categoryTabs">
<li onclick="tabs(this);" class="selected" id="tab1">
<span class="tab-one">
<img src="http://www.dot.ca.gov/hq/jobs/images/number1_icon.jpg" />
</span>
some text
</li>
</ul>
The CSS which manipulates the image position is:
position: relative;
top: 0;
left: -20px;
The CSS moves the image to the right position, but the image is not displayed completely, it seems a part of the image is behind something else. I tried using z-index: 999999999 but this wont change a thing. Why is the image not on top of everything with such a high z-index?
Thanks!
Related
I'm having trouble creating a drop-up menu with w3.css. What I'm trying to do is have a drop-up menu as the second element from the right on a footer fixed to the bottom of the viewport.
Here's what I have so far:
<footer class="w3-bar" style="position: fixed; bottom: 0;">
<span class="w3-bar-item">Button 1</span>
<span class="w3-bar-item">Button 2</span>
<span class="w3-bar-item w3-right">(Date Here)</span>
<div class="w3-dropdown-hover w3-right" style="position: relative; bottom: 0;">
<button class="w3-bar-item w3-button w3-hover-theme">Change Theme</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-d4" style="min-width: 100%; right: 0; bottom: 100%;">
Theme 1
Theme 2
Theme 3
Theme 4
</div>
</div>
</footer>
It works exactly as I want (it puts the drop-up menu right on top of the button, which is placed where I want it), except the options aren't visible (because they overflow above the footer bar).
Here's a link to a fiddle-like thing, I changed the "bottom" property of my w3-dropdown-content to 50% so you can see the bottom of the menu. https://www.w3schools.com/code/tryit.asp?filename=GCKK95EG0T44
Thanks by advance to anyone who'd try to help :)
Edit : I've still haven't found a way to have it show as I want. By changing the position of my w3-dropdown-hover element to absolute, the drop-up menu displays correctly, but the item is added to the left of the bar, instead of the right.
Well, you answered your own question: the propertie "overflow" in w3-bar is defined as "hidden". You could add "overflow:visible" after "bottom:0".
I have a JSFiddle set up here showing what is currently happening: http://jsfiddle.net/YX7T6/1/
This is the code:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>
CText
</li>
</ul>
<div class="pull-right">
<button class="btn btn-default btn-lg"> button1 </button>
<button class="btn btn-default btn-lg"> button2 </button>
</div>
</div>
</nav>
<div class="container">
<a href="#">
<img src="http://placekitten.com/g/150/150" class="img-thumbnail" style="margin-top:-130px">
</a>
</div>
I'm trying to get the image to show on top of the navigation not behind it as it is now. I've tried changing the z-index of the image to something higher but nothing has changed. What should I try next?
As the other answers mentioned, z-index only works on elements that have position. Applying z-index to an element that has no position will simply be ignored.
img {
position: relative;
z-index: 1;
}
Will make the browser recognize the z-index attribute, and place the image above the nav menu. In the future whenever you're having issues with z-index not being recognized, the first thing you should do is check whether the elements in question have position.
However, in this specific case, rather than messing with negative margins, it may be simpler to do:
img {
position: absolute;
top: 0;
}
Just add position like position:relative; to your element
if you plan to control it's z-index property
fiddle
Alternatively, use position: absolute on the img and skip the z-index stuff.
http://jsfiddle.net/YX7T6/8/
I have a banner on web page, and part of the image there is a graphic of a button box. How do I make just the part where the button is a clickable link such as a href? You can see a sample image below.
In the banner image there is a "Join Now, Its Free" Button graphic. I want to add a link on this box, so when users click on this box on the banner, then it will open the next page. I want to know how I can add a link on just this button. I don't want to add the <button> tag to it; I just want to add a link based on the area of the "Join Now, Its Free" Button graphic. Anybody have any ideas on how I can add a link on this part of the image area without using the <button> tag.
<div class="flexslider">
<ul class="slides" runat="server" id="Ul">
<li class="flex-active-slide" style="background: url("images/slider-bg-1.jpg") no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
<div class="container">
<div class="sixteen columns contain"></div>
<img runat="server" id="imgSlide1" style="top: 1px; right:
-19px; opacity: 1;" class="item"
src="images/slider1.png" data-topimage="7%">
</div>
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
<li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul>
</div>
Thank You
If you don't want to make the button a separate image, you can use the <area> tag. This is done by using html similar to this:
<img src="imgsrc" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="see note 1" href="link" alt="alttext">
</map>
Note 1: The coords=" " attribute must be formatted in this way: coords="x1,y1,x2,y2" where:
x1=top left X coordinate
y1=top left Y coordinate
x2=bottom right X coordinate
y2=bottom right Y coordinate
Note 2: The usemap="#mapname" attribute must include the #.
EDIT:
I looked at your code and added in the <map> and <area> tags where they should be. I also commented out some parts that were either overlapping the image or seemed there for no use.
<div class="flexslider">
<ul class="slides" runat="server" id="Ul">
<li class="flex-active-slide" style="background: url("images/slider-bg-1.jpg") no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
<div class="container">
<div class="sixteen columns contain"></div>
<img runat="server" id="imgSlide1" style="top: 1px; right: -19px; opacity: 1;" class="item" src="./test.png" data-topimage="7%" height="358" width="728" usemap="#imgmap" />
<map name="imgmap">
<area shape="rect" coords="48,341,294,275" href="http://www.example.com/">
</map>
<!---->
</div>
</li>
</ul>
</div>
<!-- <ul class="flex-direction-nav">
<li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
<li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul> -->
Notes:
The coord="48,341,294,275" is in reference to your screenshot you posted.
The src="./test.png" is the location and name of the screenshot you posted on my computer.
The href="http://www.example.com/" is an example link.
You can auto generate Image map from this website for selected area of image. https://www.image-map.net/
Easiest way to execute!
by creating an absolute-positioned link inside relative-positioned div..
You need set the link width & height as button dimensions, and left&top coordinates for the left-top corner of button within the wrapping div.
<div style="position:relative">
<img src="" width="??" height="??" />
</div>
The easiest way is to make the "button image" as a separate image.
Then place it over the main image (using "style="position: absolute;".
Assign the URL link to "button image".
and smile :)
I have a hover solution setup with CSS. However, the hover images don't respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can't control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?
I have the following CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
To match the following thumbnails with hover:
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
I have a sample page here displaying the behavior:
http://estorkdelivery.com/example/example2.html
Hover over the images at the bottom to see the hover image display outside of the viewport.
Thanks!
Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image - both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I'm looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.
I've created a bespoke plugin for you!
http://jsfiddle.net/adaz/tAECz/
Well, it's pretty basic but I think it meets your criteria. You can activate it in two ways:
1) If you can't be bothered creating thumbnails for every image, you can just simply list your images like this:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) If you really want to create your own thumbnails, your html should look like this:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.
The very last thing you need to do is to activate it, if you're going for the first option, you can just include in your page following code:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
If you're going for the second option, you need to override default settings like this:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
This is more like a prototype so it's quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100
If you like it, I'm happy to spend some time on it and adjust it to suit your needs!
Try the jQuery Tooltip:
Here is an example according to your request:
http://jsfiddle.net/cadence96/3X2eZ/
DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/
Quick instructions:
1) Within the <head> load the css and scripts:
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
2) Still within the <head> place the execution script:
<script type="text/javascript">
$(document).ready(function() {
$(".your-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
The class '.my-div' will be used to display the image with the hover event.
The sibling div to '.my-div' must contain the hidden elements to make visible after hovering.
<ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
That's all!
I've developed a script, in the js you can change the width of the container.
Here is the fiddle:
http://jsfiddle.net/cadence96/GgDqh/
UPDATED, NOW WORKS IN FIDDLE AND IS MORE ADAPTABLE.
UPDATED:
demo : http://so.lucafilosofi.com/make-css-hover-stay-within-viewport
look at the source code
NB: this does not take in consideration cases in which the popup is bigger then the window, in this case you should not only change the offset position but you have to resize the popup to fit the window.
This works. I however solved the problem only for the Y-axis. For the horizontal offset it should be the same. See how it works here.
I set the top to exactly the side of the image * -1, this aligns the image at the bottom if it doesn't fit, change that value to whatever you want. The images are very big and this script is however not gonna be bulletproof. You would have to get the whole visible area to make sure it doesn't cut out on the other side when you re-position it.
The markup hasn't changed, I just added the Jquery:
$(document).ready(function(){
$(".thumbnail > img").mouseenter(function(){
var winSize = $(window).height();
var winScrollTop = $(window).scrollTop();
var linkOffset = $(this).offset().top - winScrollTop + 75;
// 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
var imgHover = $(this).next("span");
var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
var spaceDif = winSize-linkOffset;
if(spaceDif < imgHoverHeight){
imgHover.css("top", -imgHoverHeight+"px");
//it doesn't have to be -imgHoverHeight. Tweak this value to get better results
}
});
$(".thumbnail > img").mouseout(function(){
$("span").css("top", "0");
});
});
Hope it helped!!
Try this one... seems comparatively cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>
Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:
I have list items for my main menu:
<div id="menuContainer">
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students">Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors">Visitors</li>
</ul>
my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.
When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.
Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.
Any ideas?
You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.
You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.
If you need more detailed answers, you may want to give us an online example.
First well form the html, then try your css again.
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students"> Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors"> Visitors</li>
</ul>
it's better to use line-height instead of text-indent. you need to use image replacement technique. like this
<ul id="menu">
<li><span>Home</span></li>
</ul>
and CSS
ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }