Hi just looking to see if anyone can help me out with a small problem.
I'm trying to layer images using the z-index in css but for some reason even though i have given the div that i want on top the higher index value the layer I want beneath keeps pushing it down or covering the layer I want on top:
#work-img {
background: url(../images/blots2.png) no-repeat scroll left top transparent;
width: 960px;
height: 601px;
position: absolute;
top: 610px;
left: 0;
visibility: visible;
z-index: 6;
display:block;
}
#work {
background: url(../images/my-work.png) no-repeat scroll 0 0 transparent;
position: absolute;
width:337px;
height: 35px;
left: 35px;
top: 660px;
visibility: visible;
z-index: 700;
display:block;
}
Not sure what im doing wrong so any input anyone can give me would be really great thanks!
I don't see a problem with your css. I did a quick example here and worked fine using the same properties as you.
Aren't these divs inheriting some property of another element? You can see that using firebug.
Related
I want to center the slider controls which you can find here
I tried various ways like right:0; left:0; margin-left:auto; margin-right:auto and two more.
But somehow I am not able to make it center in responsive manner so that in any view port, It always remain center.
So Is there a way to achieve it?
This will centre the Your controls without needing to use width but will only really work for modern browsers:
.anythingSlider-minimalist-round .anythingControls {
position: absolute;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
left: 50%;
bottom: 2%;
transform: translateX(-50%);
}
This method will work for older browsers but you will need a fixed width:
.anythingSlider-minimalist-round .anythingControls {
position: relative;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
bottom: 5%;
width: 190px;
margin: 0px auto;
}
There are a few other methods to centring a div on a page it might be worth while looking at some other methods here: How to horizontally center a <div> in another <div>?
It looks like they are just being hidden when dropped into mobile. You can reshow them by putting this in your media query for small (mobile) screens.
.anythingSlider-minimalist-round .anythingControls{
display: block !important;
margin: 0 auto;
text-align: center;
width: 186px;
position: relative;
top: -40px;
right: 0;
float: none;
left: 0;
bottom: 0;
}
Put the slider controls in a div that has width:100% and its contents set to text-align:center. Position the div absolute, at bottom:20px (adjust this to set the desired offset from the bottom). Finally, the container that contains the slider controls div needs to be set to position:relative.
div.slider-controls {
width:100%;
text-align:center;
position: absolute;
left: 0px;
bottom: 20px; <----- adjust this until you
} like the offset from the
bottom of the slider
div.slider-container {
position: absolute;
}
I don;t know what your layout looks like, but in the above example, it is assumed that div.slider-controls is a child element of div.slider-container.
So i have a website with a header and a navbar. The effect i'm trying to achieve is that the navbar lays behind the header and then slides out when scrolling past the header. Example
But the links wasn't clickable in the example above (they got covered by the header), so i redesigned a bit and got a successful result. But now the navbar stays on top of the header. I tried changing it by z-index, but with no success, and i have no idea what is wrong.. Example 2
(the links are server archives, won't be changed.)
Sincerely,
a confused dev.
Changed your code in your first exmple, now it's working fine:
#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
top: 0px;
z-index: 10000;
box-shadow: 0px 4px 0px #AFB42B;
height: 50px;
margin-left: -8px;}
#Pic {
height: 300px;
/*changed*/
z-index: 100001;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
/*added*/
position: relative;
}
You have to add position:relative to the elements using z-index make the z-index work
Found the problem:
Add position: to #headimage in the css.
My bad guys :).
This is the website I am modifying: sb460training.org
Here is the code snippet:
#apdiv1 {
position: absolute;
width: 2815px;
height: 276px;
z-index: 1;
top: 1px;
left: 0px;
background-color: #000;
}
#apdiv2 {
position: absolute;
width: 3150px;
height: 115px;
z-index: 2;
left: 0px;
top: 230px;
}
#apdiv3 {
position: absolute;
width: 221px;
height: 411px;
z-index: 3;
left: 0px;
top: 259px;
background-color: #FFF;
}
#apdiv4{
position: absolute;
width: 2853px;
height: 115px;
z-index: 4;
left: 219px;
top: 401px;
}
Do you know what the width dimensions should be so I can get rid of the annoyingly extra space that shows up to the right of the web page?
Thanks
Like the other answers, I agree that your CSS should change the fixed widths to 100%.
However, in your HTML you have img elements with explicit widths, to substitute background colours. For example, in the "apDiv2" DIV element, you have an in-line image containing white, "SB460_Pic/Secondary title2.jpg". This image is set to 2128px wide, causing the page to extend horizontally.
I would recommend removing the images that are being used to pad the right of each DIV, and instead set background colours in CSS.
UPDATE
Quick and dirty example:
http://pastebin.com/4PmZN1r4
change all your container widths to 100%.
give your html a width:100%; margin:0;
give your body a fixed width:1200px or so.
set your body with a margin: 0 auto if you want it centered.
I've heard the same similar issue.
all you need to do is try working with margin set to 0 and auto.
in most cases, try eliminating the use of 'position absolute' and work more with margin, padding and position relative.
I am fairly new to CSS and although I have found examples for centring a IMG within a DIV, because I have a float: right; on an outer DIV it doesn't work as I want. This basically makes the DIVs appear in the correct place, but the IMGs are not central.
Here is a CSSDesk link for an example of my scenario: http://www.cssdesk.com/2pgBf
I'm trying to get the green share icon to appear centered both vertically and horizontally within the outer red boxes (DIVs).
I'm sure there are lots of enhancements that can be made to my CSS, but please only answer with solutions to my problem (though feel free to comment on this post with tips for CSS).
Hope that makes sense....
You can do position: relative; on the parent and then:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
On the child, this will center it.
DEMO HERE
This will work just as well and no positioning needed.
JSFiddle Demo
.social-media-icon {
background: Red;
margin: 2px;
float: right;
display: inline;
position: relative;
}
.social-media-icon a {
display: block;
}
.social-media-icon a img {
width: 16px;
height: 16px;
display: block;
margin:5px;
}
When i need to do that kind of code i set the parent tag, in this case the DIV to position: relative and the image to position: absolute, top:50%, left: 50% and margin: half the dimension just do this in your code:
.social-media-icon{
position:relative;
}
.social-media-icon a img{
position:absolute;
top:50%;
left:50%;
margin: -8px 0 0 -8px;
}
I've got 2 elements, 2 images of exactly the same dimensions, positioned one on top of the other. Say they're called A and B (A is the top one). What I've done is made it so when you hover over A, its z-index decrements by 2 so that B is now on top, and B's hover: increments its z-index by 2 so it's now higher by 1 than A's original z-index (thus image B stays on top until you remove mouse). So basically...
#A {z-index: 5;}
#B {z-index: 4;}
#A:hover {z-index: 3;}
#B:hover {z-index: 6;}
This works perfectly in Firefox and Chrome, but IE doesn't want to hear about it, and my images keep spazzing while hovering over them. Any help is appreciated. Positioning is Absolute, if that matters.
#jklm313
That actually works in my IE9 as well. Maybe I should post the full code since one of my "images" is actually a social network button. So here it is:
HTML:
<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>
CSS:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
position: absolute;
z-index: 3;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}
#myTweet:hover {
position: absolute;
z-index: 6;
}
tweet.php:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Link to demo website: ***** -- scroll down to Tweet button
This will be up only for so long, because I don't want people to have access like that <.<
Just going to rewrite my whole answer now the source code has been provided.
All "modern" versions of IE, when not in quirks mode, accept this code perfectly fine for divs and links. The problem in IE arises for iframes and other unusual elements, at which point its rendering engine seems to fail. (Shock!) You'll get this flickering for no apparent reason, except perhaps the conflicting doctypes in the iframe and page, which I would also try avoid if possible.
Presuming this link is generated by twitter, I would advise a fallback approach for IE. Instead of hovering between your button image and a twitter provided button image, I would just manipulate the css of the button twitter provided inside the iframe using javascript.
document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';
The button looks to be generated by HTML5 rather than being a static image, so it shouldn't be difficult to manipulate:
.myTweetBrown:hover {
background-image: url('../images/tweetBrown.png') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 20px !important;
width: 55px !important;
}
.myTweetBrown:hover * {
display: none;
}
The other approach you could take is keep doing what you were doing before, but applying the styles differently like so, dependant on display:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
opacity: 0;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 3;
}
Technically, CSS doesn't actually specify how and when elements go in and out of the "hover" state. So it sounds like when A goes under B, your version of IE removes the hover state from A and it immediately pops back in front of B, before B gets the hover state and pops further in front.
How about wrapping the two in a div, and testing for the hover state on that? Does that work?
http://jsfiddle.net/X64au/
Try wrap them in a div
.parent
{
position:relative;
z-index:1000;
}
.a
{
position: absolute;
z-index : 1001;
display: inline-block;
}
.b
{
position: absolute;
z-index: 1002;
display: inline-block;
}