I want to set an element footer made up of several elements
the first element should have:
left: 944px;
top: 9749px;
the second element should have:
left: 715px;
top: 9819px;
the third element should have:
left: 718px;
top: 9852px;
fourth and final element should have:
left: 705px;
top: 9999px;
BUT I ALSO WANT MY FINAL ELEMENT TO HAVE:
bottom: 93px;
this doesn't occur and it's stuck to the bottom of the page as if i had given
bottom : 0px
Is this a problem with page height or something?
(P.S. I haven't constrained the height of the page/body in any way.)
You can use a <footer> tag and create a <div> tag in it with same name and style it.
.container-one {
flex: 25%;
display: flex;
}
Related
I understand the principle of left: and right: positioning if you want to position an element inside it's parent and then add the appropriate values to position the element where necessary. I saw a site today where a lot of the elements had the left and right properties both set to 0.
Example:
div {
width: 200px;
height: 200px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This was the case on a number of fixed and relative positioned <div>s. Surely you can't fix a <div> so it's positioned both left and right to zero? Could someone explain if this is valid CSS, and if so, please explain what it achieves.
Many thanks,
Emily
Yes, this is valid CSS. Basically, code like this will center absolute divs. Just remember to also add this code: margin: auto;. Here's a working example:
div {
position: absolute;
margin: auto;
right: 0;
left: 0;
height: 100px;
width: 100px;
background: red;
}
<div></div>
<div class="shouldBeOverlapped">
content
</div>
now I want to add another div on it (e.g. waiting) so it will 100% cover it and make it unclickable, preferably transparented. How to do it?
Try to search for "overlay". This will be the right thing.
Example here:
#overlay {
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
<div class="shouldBeOverlapped">
content
</div>
<div id="overlay"></div>
You can try to put that waiting div as a :before. Although it is limited, it can be easy to set up.
#textToHide {
background: yellow;
position: relative;
width: 300px;
padding: 10px;
}
#textToHide:before {
content: '';
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div id="textToHide">
This text is protected against selection... although we could still look for it in the source code...
</div>
You need a containing div element with it's position attribute set to relative. This defines the bounds of the overlay. Without it the overlay will look up the DOM until it finds a parent it can get it's positioning information from. If it doesn't find one, it will cover the entire page body.
I've created a JSFiddle for you here: https://jsfiddle.net/aogd164t/
Try removing position: relative from the container class and see the result.
I'm trying to create my first web page. But I have a problem, I searched a lot about it but I still cannot solve it. So, the problem is, that my div (which is something like a background for the left side of the page, it has no content, only coloured background) is not stretching to the bottom of the page, it just stretches to the bottom of the screen, so when I scroll down the div is missing from there.
It looks like this (http://postimg.org/image/aiiabtue1/)
HTML:
<body>
<div class="left_strip"></div>
</body>
CSS:
.left_strip {
position: absolute;
left: 50%;
width: 203px;
height: 100%;
top: 158px;
background: rgb(251, 236, 236);
margin-left: -500px;
}
Use position: relative on the body tag and bottom: 0 instead of height: 100% on the .left_strip.
With just position: relative on the body tag the element will be 100% height, but because of the 158px distance from the top the bottom will be 158px below the content.
bottom: 0 will fix the bottom of the element to the bottom of the closest "positioned" (relative, absolute, fixed) parent element.
body {
position: relative;
}
.left_strip {
position:absolute;
width:203px;
top: 158px;
bottom: 0;
background-color: blue;
}
.content {
height: 2000px;
background-color: red;
margin-left: 250px;
}
<div class="content"></div>
<div class="left_strip">Test content</div>
Instead of using % try using the exact pixel value of the body tag.
What also might help is using a % value that is higher than 100, this also seems to work in testing.
Absolute: Ignores flow completely.
Relative: Is within context of normal flow, but can be moved around too.
This displays a green box within a red box as expected.
<html>
<head>
<title>Lets see what occurs</title>
<style>
#box_1 {
position: absolute;
top: 100px;
left: 100px;
right: 0px;
bottom: 0px;
background:red;
}
#box_2 {
position: absolute;
top: 100px;
bottom: 100px;
left: 40px;
right: 0px;
background:green;
}
</style>
</head>
<body>
<div id="box_1"><div id="box_2"></div></div>
</body>
</html>
How come this fails to do the same?
<html>
<head>
<title>Lets see what occurs</title>
<style>
#box_1 {
position: absolute;
top: 100px;
left: 100px;
right: 0px;
bottom: 0px;
background:red;
}
#box_2 {
position: relative;
top: 100px;
bottom: 100px;
left: 40px;
right: 0px;
background:green;
}
</style>
</head>
<body>
<div id="box_1"><div id="box_2"></div></div>
</body>
</html>
Relative position:
Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.
Absolute position:
With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.
absolute positioning is referenced to the parent/ancestor that has absolute or relative positioning. relative positioning is referenced to himself, that's it, to its supposed place in the page flow. So when you position an absolute div inside another absolute div, the left/top/etc. references are about the parent's borders; when you position the child div like relative, it takes reference about his own borders, in the place it was supposed to be.
Here you can read a good article about it: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The problem is not using relative positioning inside an absolutely positioned div, it's that you're setting values for every edge (top, right, bottom and left), and your elements have no defined widths. When you set values for every edge, it will attempt to position your element to each of those values which will produce unexpected results.
The following:
#box_1 {
position: absolute;
top: 100px;
bottom: 0;
left: 50px;
right: 0;
}
Should be more like:
#box_1 {
position: absolute;
top: 100px;
left: 50px;
}
Look at this fiddle to see the positioning working as expected when I remove two unnecessary position values and add width/height: http://jsfiddle.net/S4fvs/9/
Sometimes you want to take up the entire window, so setting top: 0, right: 0, bottom: 0 and left: 0 will cause a block level element to fill all available space. That's useful for creating a new context on top of your normal content, say for a modal that might get long and scroll without scrolling the page behind it.
I'm just getting into HTML and CSS and I have a quick question. Is there any way to make a parent element grow in size to accommodate one of its children? I have the background set on <html>. Then inside the body I have a div which sets a different background color and isn't as wide/tall as the whole page. This leaves a two toned design. Then, I have a nested div containing all the content to be displayed. This all works fine, unless the page content is enough that a scroll bar is necessary. If that happens, both background colors are lost past the original bottom of the screen. This problem is extremely annoying and from what I've read there is no great way to handle it, but I wanted to see if anyone knew. I have the following properties set:
html {
background: [gradient code...]
height: auto;
min-height: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
body {
height: auto;
width: 100%;
position: absolute;
bottom: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
}
div.background {
background-color: #D0D0D0;
text-align: center;
height: auto;
width: 70%;
position: absolute;
top: 150px;
bottom: 30px;
left: 15%;
margin: 0;
padding: 0;
border-radius: 7px;
}
div.container {
height: auto;
width: 70%;
position: absolute;
left: 15%;
bottom: 0;
top: 0;
}
Where div.background has the second background color and div.container has the content displayed on the page.
Thanks for your help.
How about not using position: absolute? Remove that (and the associated top, left, bottom...) and replace them with correct margins instead.
I believe if you specify size (width, height) auto on the parent (or just leave it without specifying size) it grows/shrinks to fit the children's size (it doesn't work recursively, so you may want to go up to the last parent in the tree). Avoiding absolute positioning (http://www.w3schools.com/Css/css_positioning.asp) could also do the trick, and float element or a different z-index could probably do the workaround too, but overgrowing the parent, I think...
If you get rid of the width and position absolute div.background and change position absolute to relative for div.container you should be good