I am trying to get some hardcoded text to show above a absolutely positioned element that is an image using z-index to no avail.
Is there something I'm missing?
.repay {
font-family:Arial,Helvetica, sans-serif;
font-size:18px;
color:#444;
text-align:center;
font-weight:bold;
margin:40px 0px 30px 0px;
z-index:10001;
}
.sliderbubble-repay {
width:227px;
height:140px;
background:url('../images/white-sliderbubble.png') no-repeat;
position:absolute;
top:119px;
left:255px;
z-index:1;
}
Elements need to have position:absolute; or position:relative; for z-index to work.
Try adding position:relative; to .repay
Related
I'm having an issue with images overflowing the set border for link type posts on my tumblr blog. I've tried re sizing width and height ratios and percentages for images, and yet I haven't been able to fix the issue. This also isn't an issue for images on of any other post types.
Here is the code that I'm pretty sure dictates the appearance of this.
.post.link .postcontainer{
padding:0;
overflow:hidden;
padding-bottom:5px;
}
.post.link .description{
padding-left:20px;
padding-right:60px;
padding-bottom:10px;
}
.post.link a.postlink{
font-family:"Helvetica Neue", helvetica, Arial, sans-serif;
font-size:12;
color:#000;
font-weight:bold;
width:428px;
padding-right:70px;
display:block;
padding-top:15px;
padding-bottom:10px;
padding-left:20px;
text-decoration:none;
}
.post.link a.postlink span{
background: url(http://static.tumblr.com/xsp9wak/PHAkloide/icon-linkpost-arrow.png) no-repeat top left;
width:35px;
height:36px;
display:block;
position:absolute;
right:20px;
top:50%;
margin-top:-17px;
opacity: .7;
-moz-opacity: 0.7;
}
.post.link a.postlink:hover span{
opacity: 1;
-moz-opacity: 1;
}
.post.link .vialink{
margin-left:20px;
}
For images, its ideally to add the following CSS rule:
img {
max-width: 100%;
}
When you set width to 100% it takes the width of content box. It will be fine when you don't have any padding or border. But, when you add border, then the width of border will be added to the 100% and it will be more than 100% which causes the overflow. So to include the border within the 100% you should set box-sizing property in css of image.
box-sizing: border-box;
Ok so this is how it looks right now but i want to overflow to go to the right instead of down.
This is the CSS code:
body{
position:relative;
margin:0px;
background-image:url('../images/background.png');
font-family: 'Open Sans', sans-serif;
}
#logo{
font-size:45px;
font-weight:bold;
}
#today_section{
position:relative;
margin-top:100px;
margin-left:auto;
margin-right:auto;
width:900px;
height:219px;
background-image:url("../images/slider_background.png");
/*overflow:hidden;*/
}
.movie{
position:relative;
margin-top:10px;
margin-left:15px;
width:134px;
height:199px;
}
The slider is called "today_section" and each movie has the class "movie".
Try adding:
#today_section{
overflow:hidden;
}
.movie{
display:inline-block
}
.movie{
float:left;
}
try adding this
I raised the width of the today_section to 2000 and added overflow:hidden to the container
HTML
<div id='divTop'>divTop<br>divTop<br>divtop</div>
<div id='btnHome'>Home</div>
<div id="player">player<br>player<br>player</div>
CSS
body{
position:relative;
max-width:1024px;
height:100%;
margin:0 auto;
font-family: "Trebuchet MS", sans-serif;
text-align:center;
}
#divTop{
display:none;
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
#btnHome{
cursor:pointer;
position:absolute;
top:1.5vh;
left:1vw;
max-width:3.4vw;
z-index:6;
}
#player{
display:none;
position:relative;
z-index:3;
max-width:95vmin;
max-height:95vmin;
border:medium ridge #ffffff;
border-radius:9px;
}
JS
y = $(window).innerHeight() - $('#player').height();
$('#player').css ('margin-top', y/2);
$('#player').show();
$("#btnHome").click(function() {
$('#divTop').slideToggle('slow');
});
Why is btnHome inside player. It should be fixed on top-left of page ?
Clicking on btnHome why is player pushed down ? It should be also fixed. I just want to show-hide divTop by overlapping everything bellow.
fiddle is here
Remove position:relative from body.
UPDATE: add a parent wrapper to the #divTop
#wrapper {
width:100%;
overflow:hidden;
}
#divTop{
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
JS
var dTHei = $('#divTop').outerHeight(); //get height of the #div top
$('#wrapper').height(dTHei); //set it as the height of the wrapper
$('#divTop').hide(); // hide the div top
//run your function here
http://jsfiddle.net/2zAm5/1/
Try changing position from relative to absolute
and use top,bottom,right and left instead.
change positions of btnHome and player to fixed, and also use top property for player so it will not move: e.g. top : 200px.
#divTop{
display:none;
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
#btnHome{
cursor:pointer;
position:fixed;
top:1.5vh;
left:1vw;
max-width:3.4vw;
z-index:6;
}
#player{
display:none;
position:fixed;
z-index:3;
max-width:95vmin;
max-height:95vmin;
border:medium ridge #ffffff;
border-radius:9px;
top:200px;
}
I want to show a search icon over the start of the a text input box.
Currently my code looks like this:
<div id="search-icon"></div>
<input type="text" name="search" id="search"/>
And my CSS:
#search-icon {
display:inline-block;
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
}
input#search {
position:relative;
top:-25px;
left:-30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;
}
It shows the div right where I want it, but below the actual text box. When I change the search icon position to absolute, it screws up my positioning.
How do I swop it?
You can solve it using relative position for both. But just change their z-index.
#search-icon {
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}
input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}
is this what you are looking for here
Are you talking about having search-icon being on top of input#search?
Such as this: http://jsfiddle.net/52YfE/?
I dont know what you want exactly but check it out this one http://jsfiddle.net/V8AZE/
I have this html
<div class="p-box">
<div class="p-img"></div>
<h3>title</h3>
<div class="txt">some txt</div>
</div>
with this css.
.p-box {
width:253px;
height:155px;
position:relative;
float:left;
overflow:hidden;
background: url(../images/p-box-bg.png) top left no-repeat;
}
.p-box h3 {
color:#FFF;
width:253px;
text-align:center;
font-size:12px;
height:22px;
line-height:22px;
display:block;
}
.p-img {
position:absolute;
top:1px;
left:1px;
width:253px;
height:155px;
z-index:5;
background: url(../images/p-img-bg.png) top left no-repeat;
}
.p-box .txt{
width:249px;
height:20px;
background: url(../images/p-img-txt-bg.png) top left no-repeat;
position:absolute;
bottom:2px;
left:2px;
z-index:50;
text-align:right;
color:#FFF;
font-size:12px;
line-height:20px;
}
In firefix all ok, but in IE i can't see my H3 over the p-img and p-img don't feel the container overflow..
can anyone help me??
Thx.
I would recommend on your H3, set it to something more particular, ie: an id. Once done, set the background image in the new id tag, not the H3 element in css. so:
.p-box #h3image {
color:#FFF;
text-align:center;
font-size:12px;
display:block;
enter code here
width:253px;
height:22px;
padding-top: 133px;
z-index:5;
background: url(../images/p-img-bg.png) top left no-repeat;
}
Note that the padding-top 133 px + height of 22px will make the entire height of the container 155px; being the size of your image. As the padding from the top is 133, this will leave 22px for the text to be in place, as the image is a background, text is in the foreground, fully seo compliant and browser compatible.
:)
As some articles allude with on IE's z-index bug, give the h3 element a high z-index (at least, higher than the z-index=5 given to .p-img).