I have a question.
I got this so far:
I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is highlighted. How do I achieve this?
Thanks in advance,
kevin
You could use viewport height as your height value:
.main {
height: 100vh;
background-color: green;
}
<div class="main">
CONTENT
</div>
Using height: 100vh means the element in question always be 100% height of the viewport a user / devie has.
More info: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
You can probably do that by setting the position of the div that you want to make fullscreen, to absoluteand then apply the below CSS.
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
Thus, the final css would be as follows
.fullscreen{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
}
You can use position: absolute; or position: fixed.
Use absolute for just making it cover the whole page.
Use fixed to make it nailed in a default position. If u use fixed, even though your page is more than 100% you cannot scroll down to see any other things.
CSS
div.any {
position: absolute; /*position: fixed;*/
top: 0;
left: 0;
width: 100%;
height: 100%;
/*You can add anything else to this like image, background-color, etc.*/
}
HTML
<div class="any"></div>
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Related
In my program, I need to place the image of a button on top of another image exactly where that button is supposed to be. To be able to use it in different monitor resolution, I position the images using %. I also set up height and width of the body (or div) to 100vw and 100vh (i also tried to screen.height and window.height). But when I change resolution of the monitor, the images adjust to the new resolution but now with enough precision y the height (width is fine). The button is displayed a little bit higher in a lower resolution. Why is not working?
.alarm img {
position: fixed;
width: 4.5%;
left: 41.7%;
top: 71%;
}
.faceplate img {
position: fixed;
width: 17%;
left: 40%;
top: 40%;
margin-left: 0px;
margin-top: 0px;
}
<html>
<body style="width:100vw; height:100vh; margin:0;padding:0">
<div_logo class="faceplate"><img src="pictures/asel3_faceplate.png">
<div_alarm class="alarm"><img src="pictures/asel3_alarm.png"></div_alarm>
</div_logo>
</body>
</html>
You should use media queries to fix this problem for different screen sizes. You have to create different types of CSS for different types of screen sizes.
In this fact, you have to go to media queries.
For more details, you can follow the link
https://www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp
In media, query defines your CSS style for different screen sizes.
I hope this is what you are expecting.
.faceplate {
top:25%; /* just change this */
left:25%; /* just change this */
position: absolute;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
position: relative;
padding: 0;
}
.faceplate {
top: 25%;
left: 25%;
position: absolute;
}
.faceplate > img {
width: 90%;
height:90%;
}
.faceplate .alarm {
position: absolute;
top: 0;
}
.faceplate .alarm > img {
width: 70%;
height: 70%;
}
<html>
<body>
<div class="faceplate"><img src="https://dummyimage.com/100x100/e055e0/fff">
<div class="alarm"><img src="https://dummyimage.com/80x80/000/fff"></div>
</div>
</body>
</html>
I am wondering how I should organize things. I want my screen to be organized like this, and to be responsive:
So here is what I did:
.container-map {
position: relative;
}
.map-background {
z-index: 10;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
}
.map-filter {
z-index: 100;
margin-left: 10%;
margin-top: 5%;
position: absolute;
}
.map-search-results{
position: absolute;
margin-top: 50%;
width: 100%;
}
<div class="container-map">
<div class="map-background"></div>
<div class="map-filter"></div>
<div class="map-search-results"></div>
</div>
It is working for the map and the filter, but for the search-results section, this seems very dirty to me.
It seems like adding a div around map-background and map-filter should be the solution, but how do I make its position "more important" than the absolute positions of the two other divs?
It's not clear what you mean by "more important" but I think I know what you mean. One of the main issues is the fact that the top map background and map filter are not positioned together but independently, and then just aligned with absolute positioning. This makes the style brittle and prone to errors from changes - whether that be changes in code or change in viewport etc.
Instead this might be the kind of thing you are after:
.top-container{
height:50vh;
position:relative;
}
.map-background {
height: 100%;
background-color:yellow;
outline:2px solid yellow;
}
.map-filter {
position: absolute;
top:15%;
left:10%;
min-height:50px;
min-width:200px;
background-color:lightblue;
outline:2px solid lightblue;
}
.map-search-results{
height:50vh;
background-color:red;
outline:2px solid red;
}
<div class="container-map">
<div class="top-container">
<div class="map-background">
Background
</div>
<div class="map-filter">
Filter
</div>
</div>
<div class="map-search-results">
Search Results
</div>
</div>
Now the top section is held in it's own container and only the filter is positioned absolutely, but that's absolutely relative to the wrapping container. Remember that position: absolute will position an element relative to the nearest ancestor with position: absolute or position: relative.[1]
This means that the top section is effectively 'grouped' and if the container is repositioned, whether that be with new CSS rules, changes to the DOM, changes to the the outer dimensions etc etc, then all the children should also be naturally repositioned as well (barring any other complications).
I have also cleaned up the code somewhat.
Your height definitions weren't working because a percentage height needs a parent with absolute height to work. Instead I have defined the two main blocks as having height: 50vh but you can set it to whatever you need.
There's also no need for z-index in this case (and z-index with absolute positioning is a recipe for confusion). The map-filter is the only thing 'on top' of something else and that will appear on top anyway since it is absolutely positioned and the map-background is not.
So if you take out the code I created for demonstration this is the core CSS:
.top-container{
height:50vh;
position:relative;
}
.map-background {
height: 100%;
}
.map-filter {
position: absolute;
top:15%;
left:10%;
}
.map-search-results{
height:50vh;
}
You don't need position: absolute for any of these:
<div class="container-map">
<div class="map-background">
<div class="map-filter"></div>
</div>
<div class="map-search-results"></div>
</div>
.container-map {
width: 400px; /*set as much as you like */
}
.map-background , .map-search-results {
display: block;
height: 50%;
}
.map-background {
padding: 15px; /* set as much as you want - to affect the height/position of .map-filter */
}
.map-filter {
width: 200px;
height: 100%; /* top/bottom padding of [.map-background] will create the height differential here */
}
First thing you need to know is when dealing with absolute it's better to use left, right, top & bottom,
Second thing you need to know is the relatively positioned element should have width and height in order to place the absolute positioned item inside it
Consider reading this article to know what is the difference between this properties ( relative & absolute )https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I tried to make an example like the image in your question :
.container-map {
position: relative;
background:#000;
width:100vw;
height:100vh;
}
.map-background {
z-index: 10;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background:#ff0000;
}
.map-filter {
z-index: 100;
left: 5%;
top: 5%;
width:130px;
height:40%;
background:orange;
position: absolute;
}
.map-search-results{
position: absolute;
top: 50%;
width: 100%;
height:50%;
background:#00ff00;
}
<div class="container-map">
<div class="map-background"></div>
<div class="map-filter"></div>
<div class="map-search-results"></div>
</div>
I have a full width background image with some content.
At the end I want to position my buttons in center (vertically and horizontally), but with position:absolute, that doesn't work. You can see it in JSFiddle.
There is some code lines from my CSS
.buttons{
position:relative;
}
.buttons .button-pos{
width:100%;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
And there is little scheme of that what I want.
1.) Your .buttons div doesn't have a height, so first you need to define a height for it, otherwise there is no vertical centering possibility ( I made it 200px in the fiddle).
2.) To center .button-pos within .buttons, use
.button-pos {
width: 100%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Here's the fiddle: https://jsfiddle.net/Luo1k7Lt/1/
I make some solution by myself and it works now very well, I decided to center all my content, what was in the header. Only some little changes with screen sizes and it works well
#welcome-header .welcome-content{
width: 80%;
height: 400px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.buttons{
margin-top: 40px;
}
Try this:
.buttons .button-pos {
display: inline-block;
zoom: 1;
}
A simple IE hack is to add display*: inline; in that CSS rule
I want to position a <div class="container"></div> in the middle of the screen in such a way so that it's responsive to any screen size. The red marked area on the screenshot should always appear in the middle of the screen.
How to position it? Currently I'm using margin-top:85px when I squeeze the browser, the distance between the red marked area and the navbar should decrease as well.
Have you tried absolute centering? You would need to add a position relative to the parent container... You would also need to declare a height on the container element...
.parent-container {
position: relative;
}
.container {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I hope this helps...
Working code snippet has been added. This code will centre your div both horizontally and vertically for any screen size.
Set the css property position:relative for parent of the container.
.container {
width: 400px;
height: 300px;
background-color: #ccc;
position: absolute;
/*it can be fixed too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width: 100%;
max-height: 100%;
overflow: auto;
}
<div class="container">
</div>
Try with this example
.container {
width: 75%;
margin: 50px auto 0;
}
Define some width on your container and set margin top & bottom to some desired value and left & right values to auto so that it will always split the remaining space on the both sides equally.
.container{
width : 84%
margin : 2rem auto;
}
Use this in your container class
.container{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:auto;
height:200px; /****set height****/
margin:auto;
}
It will work
I'm using the classic responsive design trick of applying a percentage based padding-bottom and zero height to an element in order to make it maintain a certain aspect ratio. Inside this element is an iframe with a height of 100%.
This works an intended in chrome, but firefox and IE doesn't show the iframe, as if it would have no height. I have tried applying box-sizing: content-box as a workaround for IE, but it did nothing.
Fiddle: http://jsfiddle.net/jgsnK/
How can I make the iframe behave like in chrome in the other browsers?
What you'll need to do is position your iframe using position:absolute; with position:relative; on your .wrapper
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.frame {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
width: 100%;
height: 100%;
}
Have a look at this DEMO
FURTHER:
If you plan on doing something like this regularly throughout your document I would suggest adding an internal div that does this same function and leave your iframe without the absolute positioning
HTML
<div class="wrapper">
<div class="abs-inner">
<iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe>
</div>
</div>
CSS
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.abs-inner{
position:absolue;
top:0;
right:0;
left:0;
bottom:0;
}
.frame {
width: 100%;
height: 100%;
}
Something like this DEMO
The height: 100%; means match the height of element with the height of its parent i.e. 0px. You can use relative + absolute positioning to achieve the desired result i.e. match the height with the height of the element plus padding:
.wrapper {
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.frame {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Demo here
Note: for pixel perfect results you might need to zero-out the marginwidth, marginheight and frameborder attributes on the iframe.