Working on a my example from this tutorial for making a unique CSS for my website, I found a trouble in the code :
HTML
<div class="items">
<div class="outerContainer">
<div class="innerContainer">
<div class="element">Finally over four lines, all the code is the same for each list</div>
</div>
</div>
</div>
CSS
.items .outerContainer
{
height: 180px;
width: 200px;
background-color: #EBEBEB;
position: relative;
}
.items .outerContainer .innerContainer
{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
background-color:red;
}
.items .outerContainer .innerContainer .element
{
position: relative;
top: -50%;
}
why top: -50%; of .items .outerContainer .innerContainer .element doesnt "move" the element to the top? If I write top: -20px for example works well, but I want %.
Why? And how can I fix it?
Strange, it works only on IE7 :)
Moving an element by percentage requires the containing element to have a height attribute. So if you put height:90px; (Which I gather is correct as the item is 180px high and the innercontainer should be 50% from the top) it should work.
Related
Beginner in CSS here.
Basically, what I am trying to do is to place check marks or X-es on top of a country map and I am trying to find the best way to do this.(open to learn JS for this)
So far, I have placed my map in a div and centered it, with HTML code <img src="check mark"> after the map image.
I will do this for every check mark i have to add, but is it there any better solution ?
.container {
margin-left: 10%;
width: 75%;
height: 80%;
display: flex;
justify-content: center;
}
.child {
position: relative;
margin: 0 auto;
}
.check {
position: absolute;
top: 300px;
right: 500px;
}
<div class="container">
<div class="child">
<img src="Map_image.png">
</div>
</div>
This is an example of what i want to achieve:
https://imgur.com/a/mu5WpuN
Short answer is create a wrapper div with position: relative and place the map and the Xes inside it. Then make map fit with the wrapper (i.e. 100% width and height or whatever) then make all Xes position: absolute and position them accordingly using top: left: right: bottom: properties
Here's a working sample. Try to run it.
.wrapper {
position: relative;
width: 100%;
}
img.map {
width: 100%;
}
img.marker {
position: absolute;
width: 20px;
}
.marker.x1 {
top: 20px;
left: 50px;
}
.marker.x2 {
top: 50px;
left: 190px;
}
<div class="wrapper">
<img class="map" src="https://www.onlygfx.com/wp-content/uploads/2015/12/world-map-vector.png" alt="map">
<img class="marker x1" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
<img class="marker x2" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
</div>
I'm having a hard time solving the following problem:
I'm trying to position a few pictures in the following manner:
They all take the whole width of the screen (I know their number)
The sequence of pictures is aligned in the middle vertically
I have found this answer, but it's not too helpful, as it allows centering only one image.
Also, vertical-align won't help much, since it only positions inline elements.
Here's my working example:
https://jsfiddle.net/3psbtqxv/1/
body {
padding-top: 5%;
position: absolute;
vertical-align: middle;
}
img {
max-width: 20%;
height: auto;
}
<body>
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</body>
I would appreciate some help.
First google search of "css position center of page" gave me this result:
Quick CSS Trick: How To Center an Object Exactly In The Center
In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
This works wonderfully when you know the size of the thing you are centering. If you don't know, or are thinking it might change and want to be future proof, try this:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
This works with your example.
Edit:
If you want it to take the whole screen width then use
.centered {
position: fixed;
top: 50%;
left: 0%;
/* bring your own prefixes */
transform: translate(-0%, -50%);
}
Try this
img {
max-width:20%;
height:auto;
margin-top: 50%;
}
The best way to center child element is using flexbox.
#parent{
display:flex;
justify-content: center;
align-items: center;
width:200px;
height:200px;
background-color:red;
}
#child{
width:100px;
height:100px;
background-color:blue;
}
<div id="parent">
<div id="child">
child
</div></div>
There are several ways to achieve that, but most of the methods will need some update in your markup. I created this Fiddle which center the images adding some extra wrappers around. I hope it helps.
HTML:
<body>
<div class="wrapper">
<div class="inner">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
}
.inner img {
width: 20%;
float: left;
}
I have a parent div that contains two children, side by side. The first child is an image that must be height 100% and 58% width, margin auto and overflow hidden. The second child contains text, and the length of the text determines the height of the parent. This is a template for several pages, with different length of text, and therefore different parent height. Is it possible to do what I'm trying to do without using JS? Thanks for your input! Code below.
HTML:
<div id="product-summary">
<div class="product-image-container">
<img />
</div>
<div id="product-details">
<h3 class="product-title"></h3>
<div class="product-description"></div>
</div>
</div>
CSS:
.product-image-container {
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 50%;
margin: auto;
transform: translateX(-50%);
min-width: 100%;
height: 100%;
}
}
#product-details {
float: right;
border: solid thin #777;
height: ~"calc(100% - 2px)";
width: 41%;
text-align: center;
}
The problem is your #product-details is floated, which creates a new BFM (block formatting context), and the parent gets collapsed.
I suggest you read more about BFMs here: http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
There are several ways to fix this:
You could clear the parent, a way to do that is by adding overflow: hidden; to the #product-summary element.
You could remove the float: right from #product-details, and use flexbox to align it instead.
I don't know any preprocessor wizardry, but using inline-block works good, as well as keeping positioned absolute elements wrapped in a relative parent for control. It wasn't mentioned how the image is displayed, so I assume aspect ratio unchanged and no cropping.
SNIPPET
.product-image-container {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
width: 58%;
height: 100vh;
overflow: hidden;
}
img {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
#product-details {
float: right;
border: 1px solid #777;
height: 100%;
width: 41%;
text-align: center;
}
a {
margin-left: 50%;
}
<div id="product-summary">
<div class="product-image-container">
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</div>
<div id="product-details">
<h3 class="product-title">Lena Söderberg</h3>
<div class="product-description">
<blockquote>Lenna or Lena is the name given to a standard test image widely used in the field of image processing since 1973. It is a picture of Lena Söderberg, shot by photographer Dwight Hooker, cropped from the centerfold of the November 1972 issue of Playboy
magazine.
</blockquote>
<a href='https://en.wikipedia.org/wiki/Lenna'>Wikipedia</a>
</div>
</div>
</div>
I'm building an web app which has a 100% height/width/fullscreen layout. I am looking for a CSS-trick to proportionally resize an elements dimensions according to its height.
Right now I am looking for an equivalent of what this trick does to the x-axis:
html, body{
height:100%;
margin:0;
}
#view {
min-height: 100%;
position: relative;
width: 100%;
background-color: #333333;
}
#test-hld {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: tomato;
width: 100%;
height: 75%;
}
.test{
position: relative;
width: 30%;
}
.test:before{
content: "";
display: block;
padding-top: 75%;
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: black;
}
<div id="view">
<div id="test-hld">
<div class="test">
<div class="content"></div>
</div>
</div>
</div>
But changing (for example) .test{height: 80%} and .test:before{padding-left: 75%} makes the browser render no dimensions of the box at all.
My question(s) is
Why is the opposite not working?
Has it something fundamental to do with setting heights of elements with CSS?
Can flex/flexbox solve this?
I know it's possible to fix this with some lines of JS but I just can't believe it's not doable with CSS until someone slaps my face telling me to get real.
First of all, just to know why the padding trick works.
Padding-top and padding-bottom are vertical dimensions that are related to the width (so, an horizontal dimension) of the container.
That allows the ratio of an element to be fixed, and related to the width of the container. But there isn't any horizontal dimension that is related to some vertical of the container, so the equivalent trick over the height is not posible right now.
I have tried to get this same result using another technique, but I have had a very partial success.
My failed attempt is try to use an image to set the ratio
body, html {
height: 99%;
}
.base {
height: 40%;
border: solid 1px green;
display: inline-block;
position: relative;
}
.ratio {
content: url("http://placehold.it/400x200");
opacity: 0.05;
height: 100%;
width: auto;
position: relative;
}
<div class="base">
<img class="ratio" />
</div>
This is working in IE and Chrome, and failing in FF. But just on initial loading.
Changing the browser size won't work until the page is reloaded. I just can't figure out why, or how to solve it
Here's the fiddle: http://jsfiddle.net/gBQqQ/
Here's the html:
<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>
And the css:
.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}
I do not see why there is an issue. I expect either there is something obvious that I am missing, or there is an underlying issue which means I cannot make the red div go above the blue div- maybe because it is a child of the blue div?
Generally not the best idea to have a child div you want to appear behind it's parent. Usually you would take the child div outside the parent to do this. Nonetheless it is possible. Add z-index:-1 to the child div and remove position:relative from the parent.
HTML
<div id='testtexture'>
<div id='testinside'>
<div class="test"></div>
</div>
</div>
CSS
.test {
position: relative;
z-index: -1;
width: 50px;
margin: 0 auto;
height: auto;
min-height: 130px;
padding-bottom: 50px;
background: blue; }
#testinside { background: red; }
See fiddle: http://jsfiddle.net/gBQqQ/1/
If you use firebug, you can see div.test is still there in the correct position behind it's parent. As a side note, the styling vertical-align you had on a div won't do anything.