I have a little problem with a nested div to be overlayed by its parent div, searched here already but no solution will fit for my problem.
Sample CSS:
#content {
position: relative;
top: 80px;
min-height: 530px;
width: 1000px;
z-index: 2;
}
#category {
position: absolute;
top: -30px;
right: 0;
z-index: 1;
}
Sample HTML:
<div id="content">
<div id="category"></div>
</div>
What it should look like:
The nested div #category should stick to the top right of the #content and should be behind it, so that the #content will overlay it.
I know that it's maybe not the best way to handle it but I need to do it that way, due to the crappy style of the whole project (I'm just adjusting it a bit).
Thanks in advance!
In order to put child element behind it's parent, you have to use negative values for z-index:
#category {
position: relative;
z-index: -1;
}
Live demo: jsFiddle
Related
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I am quite fresh to LESS. I am not sure where to look in the documentation for this or if it is possible.
I have container one, which has height:auto. it is a content container that will grow.
Can I have a second container that would be like - container2:height = container1:height.
So that the second container will become the same size as the container with height:auto.
This can be done with javascript of course but I am curious is this is something that can be done with LESS.
P.S.:If anyone wants to plug any good LESS tutorials/reading material, I would be happy to see it.
This is not a question about less then more a question about css.
To make a inner divelement to fit the same height form the outer element without knowing (or given height) you can do something like this:
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
margin: 0 auto;
width: 300px;
height: 300px;
position: relative;
}
.inner{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
So you can be shure that the inner DIV has always the exact same sizes like the outer DIV
UPDATE:
When the DIV elements should not overlap each other you can do something like this:
.inner{
position: absolute;
top: 100%;
bottom: -100%;
left: 0;
right: 0;
}
Now the second DIV has exact the same hight and is placed under the first one :)
#height: 100px;
#container1{
height: #height;
}
#container2{
height: #height;
}
#height: 100px; I defined a variable with name is height and value is 100px and I use it in the css underneath
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I have a website which is 960px wide and want to put a picture outside of that on the right side.
Vimeo have done it on there homepage: http://vimeo.com
you can see a drawing of an origami bird that sticks outside the website width
without causing the screen to get horizontal scrollbars
How do they do this?!
origami bird Floating outside of Vimeos layout
New answer:
After some further inquiry, it seems that a critical aspect was that the box/image would not cause horizontal scroll-bars, while the content would. This was an interesting trick applied by vimeo, and was quite sneaky.
It has to do with a combination of min-width on body, and overflow-x: hidden on a non-immediate parent of the box/image. When combined with position: absolute, and a negative right, this achieves the desired result.
HTML:
<div id="wrap">
<div id="width_wrap">
<div class="crane"></div>
</div>
</div>
CSS:
body
{
min-width: 960px;
}
#wrap
{
overflow-x: hidden;
}
#width_wrap {
position: relative;
width: 960px;
height: 400px;
}
.crane
{
position: absolute;
width: 200px;
height: 200px;
right: -40px;
}
Here is a minimal Fiddle, with outlines such that you can see what's going on: http://jsfiddle.net/rUj8s/2/
Original answer:
The position: absolute answers will most likely work, but will also take the image/div out of the normal flow of the document. This might not be what you want.
What you probably want is a negative margin-right:
.your_picture {
margin-right: -30px;
}
Or, perhaps position: relative, and a negative right
.your_picture {
position: relative;
right: -30px;
}
Or, lastly, position: relative, and a positive left
.your_picture {
position: relative;
left: 30px;
}
This is why negative margins and relative positioning exist. To move things relative to where they would normally lie.
.your_picture {
position:absolute;
/* this needs to be negative to have the image sticking outside of the width */
right:-30px;
}
#parentDiv{
position: relative;
}
#your_picture {
position:absolute;
right:-30px; /*change it to a number that you like */
top: 30px; /*change it to a number that you like */
}
html markup would go like:
<div id="parentDiv">
<div id="your_picture"></div>
</div>
How can I have an element to be fixed positioned while its width is always 100% of its parent element?
The parent element is as follows:
div.panel-left
{
width: 35%;
float:left;
position:relative;
display: table;
text-align: right;
}
Thanking you
Note: other similar questions I saw on stackoverflow do not solve the width issue stated above.
Do you mean something like this?
Css
div.inner {
position: absolute;
left: 0;
right: 0;
...
}
Html
<div class="panel-left">
<div class="inner">something</div>
</div>