I'm stuck with a vertical align issue. I have 2 divs. First one has auto height (depends on the browser size), the other one has fixed height and is positioned at the bottom of page. Also, the second div needs margin.
An exact example of what I want to do:
http://img199.imageshack.us/img199/9569/79106387.jpg
I tried:
<html>
<body>
<style>
* { margin: 0; padding: 0; }
body { background: #a7daf6; }
</style>
<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div>
<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div>
</body>
</html>
but I can't give margin to second div. Any ideas?
try to add this for first div:
<div style="width:200px; position:absolute; top:0px; bottom: 42px; background:#000; opacity:0.6"> </div>
and remove margin-top from second one
If I understand correctly, you can simply apply to the first <div> this style: top:-42px.
If you need content inside the <div>, you can add another <div> with padding-top: 42px.
Like this:
Live Demo
<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6; top:-42px">
<div style="padding-top:42px; color:#fff">hello</div>
</div>
Giving any element an absolute position will remove it from the flow of the document.
Not matter what the margin is other elements will not be affected.
Related
I'm trying to make an image under a title on the top left but the image doesn't want to cover the left side.
I changed the position to position: absolute, made the margin and padding 0, inspected the HTML page and can't see anything that can influence this image.
The HTML:
<div class="header">
<div class="container">
<div class="row">
<div class="col">
<h1>Dillan Robbertze<h1>
<img src="mountain-og.jpeg">
</div>
</div>
</div>
</div>
The CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Expected Results: Image is under the title top left.
Actual Results: There is a white space left and top of the image.
EDIT: I added top:0; thanks to #Somesh Mukherjee. The image moved up, but there is still a left space that shouldn't be there.
add a class to the parent div element. and add position relative to it.
.myNewClass {
position: relative;
}
also, make sure your parent elements don't have margin and padding. for that, you can use a CSS reset like this:
* {
margin: 0;
padding: 0;
}
though this will make sure all of your elements don't have any margin or padding so you need to specify all you need by yourself. you should put this at the top of your CSS file if you want to use it.
You have not specified the top attribute
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
why don't you try:
top: -28px;
position:relative;
Helped me once, or twice in similar situations.
This is my style.
<style>
.wrapper { margin:0px auto; height:600px; width:600px; position:relative; background:#F2F7FF; padding:20px; overflow:hidden }
.pos-rel { width:90%; background:#FFF; height:400px; position:relative; padding:5%; }
.pos-abs { position:absolute; height:100px; width:200px; position:absolute; background:#89BCFF; border:1px solid #517099; right:-110px; }
</style>
This is my HTML :
<div class="wrapper">
Wrapper
<div class="pos-rel">
Position relative Parent block
<div class="pos-abs">
Position Absoulute child block
</div>
</div>
</div>
JSFIDDLE HERE
Problem is :
The block having position absolute is visible only half. Half block is hidden due to wrapper.
Before you give any solution, i must state that i have to used Overflow:hidden in the parent block.
Actually, you can avoid parent's overflow:hidden, if you remove position:relative from .wrapper. Here is working example
Can you tell me what you want to create
like if you are using overflow: hidden then it will not come.
or else you have to reduce right minus margin from right.
can you make it more clear like why you want this..
I have a problem with a box-shadow, being obscured by another div.
Here is my code:
HTML-
<div id="wrap">
<div id="header">
<div id="nav"></div>
</div>
<div id="main_content"></div>
<div id="footer"></div>
</div>
CSS-
body{
margin:0;
}
#wrap{
margin:0 auto;
width:84%;
}
#header{
background-image:url(img/header_pattern.png);
background-repeat:repeat;
margin:0 auto;
width:100%;
height:170px;
box-shadow:5px 5px 5px black;
z-index:1;
}
#main_content{
background-image:url(img/main_pattern.png);
background-repeat:repeat;
width:100%;
min-height:700px;
height:100%;
z-index:2;
}
Screenshot-
http://i.stack.imgur.com/TfDyi.png
How can I make it so that the shadow is not "stacked under" (on the z-axis), and hence obscured by, the #main_content div, but still inside my #wrap?
Thanks.
No, I don't just wan't to push the #main_content down.
Just add:
position: relative;
To #header{
Example:
http://jsfiddle.net/kJajC/
You need to "position" an element, if you want to "stack" it differently on the z-axis using z-index.
Note that if you don't actually want to change its position on the x/y plane, then just specify that it is position:relative; without any of the top, bottom, left or right x/y offsets and it'll be positioned on the x/y plane where it would've been laid down statically anyway.
From MDN on adding a z-index:
Warning! z-index only has an effect if an element is positioned.
I found their series of articles Understanding CSS z-index really helpful with this stuff.
I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.
http://jsfiddle.net/6fwf9/2/
HTML:
<div id="header" class="box">header</div>
<div id="bg">
Cannot highlight this text <br>
Cannot click on this link
</div>
<div class="box">content</div>
CSS:
.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink;
position:absolute; top:0; z-index:-10;}
EDIT - Image of what I am trying to achieve: http://imgur.com/r9tYx
Make sure the overlaid elements (.box) don't sit in front of the text content, if they are to be selectable. That means positioning them some other way than by using margins. This example works because the boxes uses absolute positioning: http://jsfiddle.net/2pPKz/
Alternatively, if the background is to become a carousel, couldn't you worry about it when it's actually a carousel, and move it to the front then?
I just saw your picture, This is how I would do it.
<div id="bg">
<div id="container">
Cannot highlight this text
<br>
Cannot click on this link
</div>
</div>
<div id="header" class="box">header</div>
<div class="box">content</div>
And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height
.box{
width:150px;
height:150px;
z-index:2;
position:absolute;
background: cyan;
top:150px;
left:20px;
}
#bg{
background-color:pink;
width:200px;
height:170px;
position:absolute;
top:0px;
}
#header{
position:absolute;
width:150px;
height:50px;
left:20px;
top:20px;
z-index:2;
background: cyan;
}
#container{
width:100%;
position:relative;
border:1px solid black;
margin-top:100px;
}
The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.
It is because the bottom margin of the Header is over the text. I sugest you to change the way you are doing things here. Why don't you just make elements be inside the bg box?
<div id="bg">
<div id="header" class="box">header</div>
<p>Cannot highlight this text Cannot click on this link</p>
<div class="box">content</div>
</div>
With static position? Even if you want to use absolute positioning, you could have everything inside the bg div and have it with position:relative, so the elements inside will be positioned absolutely respected to it.
Unfortunately the only way to do what you're trying to do is to split up the background and the text content for the slider.
That means each slide would need to consist of a background div that is absolutely positioned behind the content, and a content div that is absolutely positioned in front of everything else.
I have a div:
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;
And a html, body:
html, body {
height:100%;
width:100%;
}
/* Body styles */
body {
background:url(../images/background.png) top center no-repeat #101010;
color:#ffffff;
}
My code is basically 20 loren ipsum paragraphs followed by the div.
Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it
I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.
I tried fixed but that just fixed it.. no use to me
How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not
Ok, fixed and working :D Hope it does what you want it to.
Preview here: http://jsfiddle.net/URbCZ/2/
<html>
<body style="padding:0;">
<div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
test content :D
</div>
<!--Content Here-->
</div>
</body>
</html>
Shorter solution:
.footer {
bottom: 0%;
position: fixed;
}