I have a problem with my webpage. I placed a button on top of an image inside a scrollable <div></div>, and this <div></div> is inside the <td></td> of the table. The button on top of image has the following CSS styles:
border:none;
background-color:transparent;
color:#FFF;
z-index:101;
top:2px;
background-image:url(count.png);
background-size:40px;
width:40px;
height:40px;
padding:0 15px;
font-size:16px;
margin-left:-5px;
cursor:pointer;
position:absolute;
Now the problem is when I scroll down, the button stays on the same position. What I want is when I scroll down the button hides on top together with the image at the same position. How can I make this? Any help would be so much appreciated.
jsFiddle: jsFiddle
The issue that you might be facing is something like positioning. You are position the image position: relative to the div, Not the image. If you wrap the image in a div and then set the position then it will go up too.
However, that is only the issue, try using something like:
<div class="image-div>
<img src="src_to_file.png" alt="photo" />
<button class="button">Button</button>
</div>
You can use this as the css:
.image-div {
position: relative;
}
.button {
position: absolute;
}
Also make sure that .image-div is not the main or parent div, as if it is! The button will float over it, but if the div .image-div is the child, it will slide (scroll).
Related
Image cover the background color of DIV but text is showing.
My code is
<div id="testing">
<img src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?dpr=1&auto=compress,format&fit=crop&w=1350&h=&q=80&cs=tinysrgb&crop=">
<div id="sample">
Text
</div>
</div>
CSS is
#testing {
width: 200px;
height:150px;
}
img {
width:200px;
height:150px;
}
#sample {
margin-top:-15px;
background: black;
color: white;
text-align:center;
}
The result is showing like
You can find the code at
https://jsfiddle.net/cz605rc5/
It can solve with background css for div.
But I prefer to use img and want to cover black background label at the bottom of the image.
You can add a transparento overlay over your image tag since, it will be transparent the image will act as a background..
Fiddle
.overlay{
position:absolute;
top:0px;
left:0px;
width:100%;
min-height:100%;
}
Then you can move the text inside the overlay as you wish..
Since we are in 2017 i think you should first change the HTML code:
<figure>
<figcaption><span lang="en">image title</span></figcaption>
<img src="img.png" alt="Alternative Text" / >
</figure>
Now for CSS:
All you need is to make figcaption size as the image size.
Then make it position absolute, change it's z-index higher than the img, and set it's background to gradient.
Last thing is to place the span in some place: set it's position to "absolute" and place it (for example: left: 5px; bottom: 15px;)
If you want the full css just ask (:
Line height is causing the issue. You can add a line-height: 0; to #sample, or you can change the line height of the body. You could even enclose the text in some tags and apply it to that.
I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.
The whole css:
#content{
width:100%;
height:100%;
background:grey;
}
#left-panel{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
overflow-y:auto;
}
Can somebody help me fixing this with pure CSS?
Fiddle: http://jsfiddle.net/a2wn8x5z/1/
Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).
So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:
Scrollbar Fixer
perhaps your problem is in this code here
<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>
remove the width:110%; and it should be good to go.
Here's the Updated Fiddle
Edit
I think I misunderstand what's the problem before.
Because on your case, you use position: fixed; for #wrapper and #left-panel, and both use stlye left: 0, their position will overlap each other in left from the viewport, you basically need to position the left of #wrapper not to be in the same position as #left-panel, so you need to add this to #wrapper
left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;
and remove
width:100%;
here's the Updated Fiddle
to make sure it's what you want, try change the style of the div inside #content to width:200%; and add margin:20px;
Edit Two
the cause for the scrollbar to overlap each other is because in the fiddle you use position: fixed for the #wrapper, thus will not create a scrollbar in the body, then you add overflow:auto in the #wrapper, causing the scrollbar to be created for the #wrapper and not the body, so you need to change the CSS for #wrapper to this
#wrapper{
background:gray;
}
I don't include the height because for the div, the height is based on the child inside it, so you couldn't see the gray background, except you add some padding to it.
here's the Working Fiddle
First of all, you don't have to add "position: static;" style into your div, because it's static by default. There are two ways to solve your problem:
Add "position: relative;" into #content selector and declare #content after #left-panel in your HTML.
<div id="left-panel"></div>
<div id="content"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
}
Codepen: http://codepen.io/anon/pen/yoHxl
Or add "position: relative; z-index: 1" (z-index of #content should be higher of #left-panel's) into #content selector.
<div id="content"></div>
<div id="left-panel"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
z-index: 1;
}
Codepen: http://codepen.io/anon/pen/HgwDx
Best,
Marek
Newb question. I'm trying to use z-index, but it doesn't seem to be working the way I would expect. Here's my code:
<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
Some description
</div>
In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.
I want the .addtofavorites background to be on top.
Here's the css for .addtofavorites and for .description:
.description
{
background:#efefef;
width:600px;
max-height:500px;
padding:12px;
z-index:1;
}
.addtofavorites
{
background:url(img/plus.png) no-repeat center;
background-size:75%;
display:block;
text-indent:-9999px;
width:51px;
height:56px;
margin-right:6px;
z-index:10;
}
You have to use position: relative or position: absolute for z-index to work.
Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.
But I am struggling.
Code I have for css is:
#gallery img {
width:700px;
height:213px;
margin:0;
padding:0;
}
So I thought ...
#gallery img:hover {
width:700px;
height:213px;
position: relative;
z-index:10000;
background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
}
Would work, but it doesnt.
The image I am transparently overlaying on hover is:
What am I doing wrong.
I think I may have a corrupt css tag somewhere.
Any help appreciated.
Make the #gallery have a background image rather than having an image tag inside it... otherwise it'll be on top of the background. Then have another div inside it which has the :hover pseudo-class. If it still doesn't work, take out the word transparent.
Or you could not overlay the image and just swap the original image for the combined image?
Hello there
I think you misunderstood the mechanics of CSS:
The image itself is an object and the background specified goes behind it.
So you have to make the non transparent image the background and specify the transparent one in the src. However this won't suit your needs.
A workaround would with CSS would be troublesome, so i would suggest to swap the whole image with a css hover or javascript onMouseover or jQuery - get familliar with those since it's the proper way.
Fixed.
css:
#container { position:relative; width:700px; height:213px;}
.image { position:absolute; width:700px; height:213px; z-index:0;}
.overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;}
.overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}
html:
<div class="overlay" ></div>
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>
I don't want to center a div, I want the contents of a div to be centered. I would like horizontal and vertical alignment.
Sorry, if this is too easy or whatever, but this is kind of a hassle to get it right.
Grae
I am using IE7
If you know the height and width of your image, position it absolutely, set top/left to 50% and margin-top/left to negative half the height/width of your image.
#foo {
position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
width:240px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-120px;
margin-top:-100px;
}
Live example: http://jsfiddle.net/Zd2pz/
I know you've said that dont want to center a div but to achieve your requirement in a cross browser way would be easier using a jquery plugin and a fake div that contains your element to be centered.
I have successfully centered almost anything using this very small plugin that can center any block element.
The only other way I know are the answer that you already received from #simshaun & #Prhogz
EDIT: As per comment request
Include the script in your head tag
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.center.min.js" )%>"></script>
Now if you have a DIV that you want to center inside your markup simply use it as
$(document).ready(function() {
$("#myDIV").center({ vertical: false });
});
although the following is obsolete, it still works for almost all browsers
<center>
<div>
your html
</div>
</center>
however, visit this link
http://www.110mb.com/forum/vertical-horizontal-alignment-of-image-within-div-t31709.0.html
For horizontal alignment, use text-align:center;
For vertical alignment, see for example the W3 style guide
If you know the inner element's height beforehand,
CSS:
.container {
text-align: center; /* Center horizontally. */
/* For demo only */
border: 1px solid #000;
height: 500px;
margin: 20px;
width: 700px;
}
.container img {
margin-top: -167px;
position: relative;
top: 50%;
}
HTML:<div class="container">
<img src="http://farm6.static.flickr.com/5004/5270561847_7223069d5e.jpg" width="500" height="334" alt="">
</div>
Example