I have a beige Div box that responds to the window size, it's always x amount distant from window borders, check webpage: https://loiz.xyz/ everything is working fine up to here.
👉 Now, I want to add a very small text that is 20px from the bottom edge of the div box, check image below.
I've tried centering the text so many times, but it always fails. Never is centered, or it goes between the div box and vp window on the right, or it is a fixed distance from left so when window is adjusted it's not quite on the center.
Please help me understand where I should put the <h5>text</h5> tag and how to put it inside the div box 20px from bottom, without messing with the existent centered gif. Optionally, I want to decrease that text size according to vp window size, so it shows smaller on mobile and bigger in laptops.
current code:
body {
background: #C0C0C0;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
div {
width: calc(100% - 40px);
height: calc(100% - 40px);
background: #f0e8e6;
overflow: hidden;
margin: auto;
display: flex;
}
img {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:calc(100% - 40px);
height:calc(100% - 40px);
max-width:40vw;
object-fit:contain !important;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div>
<img src="https://loiz.xyz/loiz.gif"
</div>
<style type="text/css"> html, body {margin: 0; height: 100%; overflow: hidden}</style>
</body>
</html>
After giving position fixed property to h5 and specifying the position, you can adjust the size of the text with #media according to the screen size.
body {
background: white;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
div {
width: calc(100% - 40px);
height: calc(100% - 40px);
background: #f0e8e6;
overflow: hidden;
margin: auto;
display: flex;
}
img {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:calc(100% - 40px);
height:calc(100% - 40px);
max-width:40vw;
object-fit:contain !important;
}
h5{
position:fixed;
bottom:0;
left:50%;
transform:translatex(-50%);
font-size:1.5rem;
line-height: 1.5rem;
}
#media screen and (min-width:768px){
h5{
bottom:20px;
font-size:0.8rem;
line-height: 0.8rem;
}
}
<div>
<img src="https://loiz.xyz/loiz.gif" />
<h5>TEXT</h5>
</div>
Related
I am trying to create a responsive image gallery (JSFiddle) with CSS Grid but when I add images to the grid elements, the images don't fill their entire size. I don't care about aspect ratio, I just want the image to fit exactly into the parent div while the size of the parent div remains the same (squared).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
width: 100vw;
}
.view-container {
padding: 20px;
width: 70%;
margin: auto;
border: solid red;
display: flex;
justify-content: center;
}
.view-grid {
flex: 1 1 auto;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
list-style: none;
}
.grid-el-container {
width: min(300px, 100%);
padding-bottom: min(300px, 100%);
background: blue;
border: solid;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
}
.grid-el-bg {
max-height: 100%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>CSS Grid</title>
</head>
<body>
<div class="view-container">
<div class="view-grid">
<div class="grid-el-container">
<div class="grid-el-content">
<img src="https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="villa" class="grid-el-bg">
</div>
</div>
<div class="grid-el-container"><div class="grid-el-content">Box 2</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 3</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 4</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 5</div></div>
</div>
</div>
</body>
</html>
There are 2 main problems here. The first is that the div containing the element doesn't take up its entire parent, so the image is already at 100% height and width. The second is that you're only setting the max height and width of the image, not the actual height and width.
Let's address the parent first. This can simply be solved by adding width: 100%; and height: 100%; to the parent div. If you only want the div to have 100% height and width if it has an image inside of it, you will probably have to write some JavaScript to handle that.
Now let's go to the actual image. Really it's a matter of adding the exact same thing here (width: 100% and height: 100%). This alone should resolve your issue, but there is one more thing I would like to add. I know you said you don't care about the aspect ratio, but, if you would rather the image be cut off than distorted, you can use object-fit: cover; here as well.
Here is a JSFiddle with the revised CSS
The completed CSS after the changes:
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
width: 100%;
height: 100%;
}
.grid-el-bg {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
Try this:
.grid-el-bg {
object-fit: cover;
}
Remove min-width and min-height from this class.
am sure there is a really simple solution to this but I can't seem to get it right. I need a margin-top of 50px on my form for my header but this seems to push the bottom arrow button of the scrollbar off the page. The only element I want to scroll is the contents of wrapper (hence the overflow-y: hidden on the body). Any thoughts?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
overflow-y: hidden;
}
#wrapper
{
height: 100%;
left: 225px;
margin-top: 50px;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
width: 300px;
background-color: green;
}
#content
{
height: 2000px;
background-color: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
</div>
</div>
</body>
</html>
You set height: 100% for #wrapper and plus margin-top: 50px; will be 100% + 50px. Set your #wrapper less height and everything will be fine. Or calculate height with calc. Like this:
#wrapper {
height: calc(100% - 50px);
}
basically you need to se the height of your #wrapper to 100% minus the margin top with something like this:
#wrapper {
height: calc(100% - 50px);
}
JSFIDDLE
I am trying to create a website that looks as following: http://i.stack.imgur.com/9YHAs.jpg
The header is working, but I cannot get the "main" to work and tried several options. I tried to float a png as image-background to the center and also tried with display:inline-block and background-color:white. My code is as following:
HTML: <!DOCTYPE html>
<html>
<head>
<title>Home - Portfolio Daniek</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="menutoggle.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body class="index">
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Over</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main class="bg">
<p>Hi</p>
</main>
</body>
CSS:
.bg {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 90%;
color: white;
background-image: url('bg.png');
}
Anybody got any solutions how to get this to work?
this Is a basic example of how one would do this:
body{background:url('http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg') no-repeat; background-size:100%; margin:0; overflow:hidden}
header{height:80px;width:100%; background:grey}
#main{width:90%; height:90%; position:absolute; background:rgba(255,255,255,0.5); margin:5%;}
<body><header></header><div id="main"></div></body>
Click on the "Full Page" option to see how it would look
In your example you are using background-color:white, with that you could use opacity:0.5 but that would make everything in main translucent. when you want transparencyhtml backgrounds use rgba. 50% transparency white in rgba: background-color:rgba(255,255,255,0.5)
Use background: rgba(255,255,255,x); where the "a" is for alpha ( transparency ) and "x" is the value between 0 and 1 like: background: rgba(255,255,255,0.5); 50% transparent. This affect the background, if you want the content to be transparent as well use opacity: x; on .main.
Edit: New fiddle and css with responsive width and height
See here: http://jsfiddle.net/km0mz63q/3/
For a responsive height you need the boby to fill the entire document with height: 100% and a "pusher" element with a min-height: 100%;. In my exemple the .container push the footer to the bottom of the page. The negative margin on .container is important and must be equal to the footer height, it allows the footer to overlap the "pusher" ( .container ). Note that the footer need to be outside the pusher element to work.
html,body{
margin: 0;
padding: 0;
height: 100%;
}
header{
height: 60px;
padding: 10px;
width: 100%;
background: rgba(255,255,255,0.5);
margin-bottom: 20px;
}
.container{
background: url("http://www.world-finance-conference.com/sites/default/files/new-york-city-wallpaper.jpg") center center;
width: 100%;
min-height: 100%; /* Set the container min height to 100% */
margin-bottom: -100px; /* !IMPORTANT - Must be equal to the footer height */
}
.container:after{
content: "";
display: block;
height: 100px;
}
.main{
width: 90%; /* change this for your desired width */
padding: 20px;
margin: auto;
margin-bottom: 40px;
background: rgba(255,255,255,0.5); /* rgba(): rgb is the color ( red, green, blue) and the "a" is for alpha ( transparency ) */
height: 400px; /* change this for your custom height */
}
footer{
height: 100px;
padding: 10px;
width: 100%;
background: rgba(255,255,255,0.5);
}
Also changed the html:
<div class="container">
<header>This is header</header>
<div class="main">This is main</div>
</div>
<footer>
This is footer
</footer>
You can also set the .container to height: 100vh; /* vh: Viewport Height */ but I'm not sure if it's supported by all browsers.
I have this example layout.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
padding: 0;
min-width: 960px;
height: 500px;
border: 1px solid red
}
.boxed-layout .wrapper {
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.inner {
width: 960px;
position: relative;
margin: 0 auto; /* main width */
}
.responsive .inner {
max-width: 960px;
width: auto;
}
</style>
</head>
<body>
<div class="inner wrapper"></div>
</body>
</html>
Now I need to add a div full width into wrapper. So i tried this way
.banner {
position: relative;
left: -100px;
max-width: 2000px;
width: auto;
border: 1px solid green;
height: 400px;
}
and
<div class="banner"></div>
but does not work well.
Is it correct to use relative positioning with negative left to move it to zero?
If I use width: 2000px instead of auto, appears the horizontal scroll bar
So, how can I have the full width and responsive?
You have to remove position:relative from your wrapper container (i.e. inner class contrainer). Then for banner use following markup:
HTML
<div class="banner">
<div class="banner-inner"></div>
</div>
CSS
.banner {
position: absolute;
left: 0;
right: 0;
}
.banner-inner {
position:relative;
margin:0 auto;
max-width: 2000px;
}
If you dont want to remove position:relative for some reason then you have to use javascript/jQuery as follows (keep markup same as above):
var marg = ($(window).width()-960)/2;
$('.banner').css({'left':-marg+'px','right':-marg+'px'});
Just give width: 100% for your div inside the wrapper. Sounds good?
.banner { border:1px solid green;height:400px;}
do not give width it's automatically take full width
According to the accepted answer, the OP's actual problem is that there is one 960px width container & there is a child div which needs to be 100% of body (not the parent) as per screen size. This as as easy as
.banner {
width: 100vw;
}
No need to change any other original properties.
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.
1vw =1/100th of the width of the viewport
-- MDN
I am sorry to keep asking versions of the same question but this seems difficult to achieve. Here's the code I have so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
}
#outer {
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Now it seems I see scroll bars but I just want the outer DIV to occupy 90% of the screen and there not to be scrollbars.
Find the fiddle here.
This is a pretty interesting bug I've never seen. Without going with the nasty body { overflow:hidden; } approach, I've found some fixes:
1 - Using display:inline-block (not the actually wanted)
#outer {
display:inline-block;
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
2 - Using padding instead of margin (not the actually wanted)
#outer {
width: 90%;
height: 90%;
padding: 5% 5% 5% 5%;
background-color: #333;
}
3 - Using position absolute (recommended)
#outer {
position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%;
background-color: #333;
}
I will edit this answer on further investigation of this issue.
As per http://www.w3.org/TR/CSS2/box.html#box-dimensions
The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.
Which means that by putting 90% width on the body, will cause the 5% of the margin to be 5% out of 90%, instead of the expected 100%, which causes the "bug." - Same applies to padding.
Here is how I would do it: http://jsfiddle.net/remibreton/8hfwp/1/
The trick here is to leave the browser figure out the width and height of the outer element. To do so you specify top:0; bottom:0; left:0; right:0; to make sure it fills up the entire available space. Then you add margin:5%; to reduce the height and width to 90%. The outer element should be position:relative; to allow absolute positioning inside it.
For the content elements, they can both be width:50%; height:100%. What you need to do is to make sure that the right one get a special left:50% treatment.
HTML
<div id="outer">
<div class="content left">xx</div>
<div class="content right">xx</div>
</div>
CSS
body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */
This method allows cleaner and more flexible CSS than what you previously had. Bonus internet points!
Try this:
body, html{
height: 100%;
margin: 0;
}
#outer {
width: 90%;
height: 90%;
position: absolute;
margin: 5%;
background-color: #333;
}
change overflow property to hidden(overflow:hidden;) then change the margin of #outer to margin:2.5% 5%;. Here is the full code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
overflow:hidden;
}
#outer {
width: 90%;
height: 90%;
background-color: #333;
margin: 2.5% 5%;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Hope it'll work!
It seems to be being caused by margin collapsing going wrong. Add padding:0.01px to the <body> and it works like it should.
If you want something fixed-size on the screen, you should probably just use position:fixed like so:
#outer {
position:fixed;
left: 5%; right: 5%; top: 5%; bottom: 5%;
background:#333;
}
#left-content {
position:absolute;
left:0; top: 0; width:50%; bottom: 0;
}
#left-content {
position:absolute;
left:50%; top: 0; width:50%; bottom: 0;
}