I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
Related
I've encountered a strange issue with text positioning in Safari for buttons on a site I've been working on.
1. Is it possible to keep the text center aligned on the buttons while using left: ...; ? Would this fix the issue?
2. Would placing span in a relatively placed div .text-pos with a sub-class .text-pos span ... position: absolute; be bad form? Would it fix the issue?
Code:
.button a span {
z-index: 2;
width: 100%;
position: absolute;
top: 12%;
color: #000000;
text-align: center;
font-size: 4vmin;
}
.button a img {
height: 100%;
display: flex;
}
<div class="button antiques">
<a href="/landing/gallery/antiques/antiques.html">
<img alt="antiques" src="/assets/img_style/plank.png">
<span>ANTIQUES</span>
</a>
</div>
Did not include left: ...; as the text needs to be center aligned on the button.
Result(too new to post images):
http://i.imgur.com/3E55EMH.png
My first thought was that the issue was with vmin, but:
1- Text scales appropriately with browser adjustments.
2- Text on the hover(upper left image frame) also uses vmin, but is
appropriately positioned.
In reference to point two, the text is placed in a relatively positioned div container to force aspect ratio like so:
<div id="wide-container"> /* position: relative; */
<div id="content"> /* position: absolute; */
...
</div>
</div>
I don't have ready access to an OSX machine so any input would be appreciated!
Open minded to any other approaches you may have to offer. Thank you (:
SOLVED
.button {
height: 6vmin;
margin-top:1.5vmin;
margin-bottom:1.5vmin;
position: relative;
}
.button a {
height: 100%;
}
.button:before a {
content: "";
display: block;
}
.button a span {
z-index: 2;
position: absolute;
top: 9%;
bottom: 0;
left: 0;
right: 0;
text-align:center;
width: 100%;
height: 100%;
color: #000000;
font-size: 4vmin;
}
Found the solution by setting the button to be relatively positioned while leaving the text position as absolute. Solution outlined in more detail in the edited question.
The problem came from my misunderstanding of how browsers treat the box model differently. Safari seemed to be taking the contained elements and floating them left individually since the the image had no positioning attributes.
This solution displays more or less the same on Chrome, Firefox, and Safari.
I'm having some trouble positioning my image next to my h1. The h1 is centered, and I would like to have my image placed on the right side of it. However, The position of the h1 may not be changed (thus, the image may not affect the position of the h1).
Relevant code I have so far:
<div id="header">
<h1>Header </h1><img src="pencil.jpg" alt="">
</div>
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
}
This code doesn't work at all; the image appears on the left side of the web page and is not being positioned relative to the h1 as I would like to.
I tried fixing this by putting the image into the h1 (to make it it's parent element), but by doing this the position of the h1 element changes (because the reserved space for the image is still preserved in the h1 element).
I hope someone can help me.
Kind regards,
Nick
That's because you're using a block level tag with another block level tag.
Check out W3 Schools for more info pertaining to inline VS. block level elements. :)
And if you want a more direct example using your code, here is a jsFiddle. This has it so the text is centered and the image is next to it, centered as well.
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
display: inline-block;
}
One solution is to give #header position: relative and position: absolute to the img:
h1 {
text-align: center;
position: relative;
}
img {
position: absolute;
top: -80px;
left: 60%;
}
#header {
position: relative;
}
fiddle
You cannot absolutely position elements with position relative. You should use position absolute.
This wont resize very well though. Hope it helps. :)
img {
position: absolute;
right: 20px;
top: 0;
width: 100px;
}
Example
Since you want them right next to eachother...
Wrap the header text in a span.
<div id="header">
<h1>
<span>Header</span>
<img src="http://placekitten.com/g/400/300" alt="" />
</h1>
</div>
Set both the span and the image to display: inline-block;
h1 span, h1 img {
display: inline-block;
}
If you want the text dead center then add some padding to the left, equal to the width of the image.
h1 span {
padding-left: 36px;
}
h1 img {
width: 36px;
}
Example 1
Alternatively
Put the image inside the span
<div id="header">
<h1>
<span>
Header
<img src="http://placekitten.com/g/400/300" alt="" />
</span>
</h1>
</div>
And set it to position absolute, so it hangs out the right hand side.
h1 {
text-align: center;
overflow: hidden;
}
h1 span {
position: relative;
}
h1 img {
position: absolute;
right: -36px;
width: 36px;
}
Example 2
Neither are perfect solutions, but hopefully one will be right for you. :)
I can't seem to get the black box to the center of the screen as opposed to the center of the div its inside in.
EDIT: For clarification, I only want the black box in the center of the results panel not the pink box with it. Also I would also like to keep my javascript intact.
EDIT 2: I'm trying to have something like an overlay that popsup in the middle of the screen when a user clicks on the image. Not sure if this is the best way or the best code to achieve that!
Would appreciate if anyone can help.
Here's my attempt: http://jsfiddle.net/BPLcv/1/
HTML
<div class="tooltip">
<div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
<div class="description">Poop</div>
</div>
CSS
.tooltip {
position: relative;
border: 1px #333 solid;
width: 200px;
height: 200px;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}
.overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.description {
position: absolute;
width: 300px;
height: 300px;
display: none;
background-color: black;
text-align: center;
z-index: 1;
/* centering???? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
Thank you!
If you want the description/overlay in the middle of the screen, your best bet is to use an element outside of your tooltip-elements, as these are fixed width.
If you have a top-element with width: 100%, your centering css wil work for any immidiate children.
Working fiddle: http://jsfiddle.net/BPLcv/4/
Here the overlay is filled with whatever is in the description element of the tooltip you're hovering:
overlay.html($(this).find(".description").html());
The description class is always hidden.
Check this Demo jsFiddle
CSS
body{
margin:auto;
width:50%;
}
Try this. Assign the div of interest id = CenterDiv, then add this css:
z-index:10;//remove left:50%
Now try adding this function via onload or onclick, etc:
function centerDiv() {
document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300)
/ 2) + 'px';
}
The number 300 can be any number that represents the width of your element of interest.
Substituting the width of your element (here, 300px), this function will center an element with absolute position.
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
check out the site wplayout.com. In home page I have a gallery. I would like to place a "premium" tag image on top of each image shown on home page gallery. Currently the premium image is shown on top right corner of the home page. how to achieve that?
so far i have
.ribbon {
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: absolute;
top: -3px;
right: -3px;
z-index:500;
display: block;
}
and in html I have
<span class="ribbon"></span>
Thanks in advance
i think that the position:relative has to be applied to ribbon and not the container div.
Try putting
.ribbon
{
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: relative; /*changed*/
right: -204px; /*changed*/
top: -230px; /*changed*/
z-index:500;
display: block;
}
tried this using firebug & it worked. Hope it works for you.
Make sure the div containing the 'premium' image has position: relative set on it, like so:
Markup:
<div class="my-image">
<img src="whatevs.jpg">
<span class="ribbon"></span>
</div>
CSS:
.my-image {
position: relative;
}
Divs with absolute positioning (your ribbon) are positioned relative the first parent that has position: relative, or relative to the body if no such parent exists.
Use the z-index selector in css
For your premium content add z-index:999; and on the image below use z-index:0;