I have a div with default position argument. Now I need to put under it another div:
#Dark
{
width: 250px;
height: 100px;
background-color: #1a1a1a;
margin: 0 auto;
/*position: absolute;*/
z-index: 999;
}
#Blue
{
background-color: #046a81;
height: 90px;
width: 30px;
position: absolute;
z-index: 10;
}
How to put blue one layer down (it should be rendered before dark div) if I can't make Dark position as absolute?
Make the #Dark have position:relative. It still behaves as if it were in the flow, but now you can adjust the z-index.
Related
I have 3 divs inside my div#all (simple html). Left - Main - Right.
Left & Right have just a background image (their content won't change).
Main div will have all my text etc.
Option 1: I need to have the left/right divs to expand their height (so my image background gets repeated) to reach the height that my divMain may have.
Option 2: I can do position:fixed my Left/Right divs as well so they stay in place when I scroll. My issue on this plan is that I cannot position/float my right div at the desired place.
Any working option is ok with me.
css code:
body{
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #fff;
overflow-y: auto; overflow-x: auto;
}
#all{
position: absolute;
top: 0; left: 50%;
height: 100%; width: 1366px;
margin-left: -683px;
}
#temp-left{
position: absolute;
top: 0; left: 0;
height: 100%; width: 183px;
background: url(image/bg-lft.jpg) repeat;
}
#temp-right{
position: absolute;
top: 0; right: 0;
height: 100%; width: 183px;
background: url(image/bg-rgt.jpg) repeat;
}
#main{
position: absolute;
top: 0px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -500px;
text-align: justify;
}
If I properly understand your question i suggest you to use jquery
You can try this out.
$(document).ready(function() {
// Check if body height or width is higher than window height and width:)
if (($("body").height() > $(window).height())||($("body").width() > $(window).width())) {
$('body').css('background-image', 'url(image/bg-lft.jpg) repeat;');
}
else
$('body').css('background-image', 'url(image/bg-lft.jpg) no-repeat;');
});
Why there a difference between setting a value in left and right for a div positioned as absolute.
When i set a value for right it's okey the text fill right in the pseudo class FIDDLE1.
But not with left FIDDLE2.
I have to set a width FIDDLE3.
So how can i use left without setting a width and get result as FIDDLE1 ?
CSS:
div {
width: 100px;
height: 100px;
position: relative;
}
div:after {
content: 'ce champs est obligatoire';
position: absolute;
left: 100px;
}
The issue is that the div which is set to relative has a fixed width of 100px, if you were to make the width of that div wider, such as 300px, so that the content after were to fit, it would not wrap the text.
Give the div after white-space:nowrap; like this: http://jsfiddle.net/jme11/6avYE/ to avoid the problem.
OR,
Another option would be to wrap the div in another div and set the wrapper div to have the position: relative instead of the inner div like this: http://jsfiddle.net/jme11/PhVLj/
div:not(div>div) {
width: 500px;
height: 100px;
position: relative;
}
div>div {
width: 100px;
height: 100px;
background-color: aliceblue;
border: 1px gray solid;
}
div>div:after {
content: 'ce champs est obligatoire';
position: absolute;
left: 100px;
/* right: -167px;
width: 157px;*/
background-color: rgb(230, 122, 38);
color: white;
padding: 8px 10px;
border-radius: 5px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 13px;
}
I'm trying to fix a problem with a pseudo li element in this script:
http://jsfiddle.net/5xkrS/6/
When adding a backgroundcolor to the parent div, the connectorbars between the stepnumbers disappear. (see http://jsfiddle.net/5xkrS/7/ )
The backgroundcolor seems to overrule the pseudo li element, but not the li element. Using the following css:
/*progressbar connectors*/
#progressbar li:after {
content:"";
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
What can cause this problem and is there a way to fix this?
Here you go
http://jsfiddle.net/5xkrS/9/
#container {
width: 500px;
height: 600px;
margin: 0 auto 0 auto;
background-color: deepskyblue;
position: relative;
z-index: 1;
}
Added position relative and z-index 1 to the container. tested on FF and chrome on mac
http://cdpn.io/FykHr
I seem to have an issue with the combined CSS properties:
position: absolute;
bottom: 0;
First you can see that the .footer div doesn't isn't at the bottom. Now, change the font-size from 120px to 50px and the div seems to be working the way I inteded it to.
How do I make the .footer div stay at the bottom (not fixed at the bottom of the screen) regardless of the size of the .content div.
You need to add position: relative; to the parent container, which in this case is .wrapper.
Here's a good reference page on absolute positioning.
There is one way to do that:
body {
height: 100%;
margin: 0;
}
html {
padding-bottom: 50px;
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: red;
}
http://jsfiddle.net/n8UNM/
There is still one limitation. You have to know height of footer and set it in two places.
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.