Here is my code: http://jsfiddle.net/vy6w2tun/1/
<html>
</html>
(1) The text is centered in the page, which is what I want.
(2) However, I would like the image centered (which it is), but I do not want the text to cover the image. I would like the image to go below the text, so that no part of the image is being covered by the text, and vice-versa.
How would I go about doing so?
i deleted position:absolute; and top left values and transform values from p { }. İ added margin:0 auto; (for center) and width:70%; in p {}.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 0;
padding: 0
}
#font-face {
font-family: HelveticaNeueLTCom-Th;
src: url("HelveticaNeueLTCom-Th.ttf")
}
p {
font-family: HelveticaNeueLTCom-Th;
font-size: 19pt;
letter-spacing: 1.2px;
color: red;
line-height: 1.5;
text-align: justify;
margin:0 auto;
width:70%; /* it's up to you */
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.img {
display: grid;
height: 100%
}
.center-fit {
max-width: 100%;
max-height: 90vh;
margin: auto
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%
}
}
</style>
</head>
<body>
<div class="fullscreen-bg">
<video loop autoplay muted src="video.mp4" type="video/mp4" class="fullscreen-bg__video"></video>
</div>
<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
<div class="img"> <img class="center-fit" src='https://grcc.net/wp-content/uploads/2015/06/Dogs-for-Rob-1-e1434850228704-1024x695.jpg'></div>
<div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
<div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
</body>
</html>
Related
I'm using an image as a full-screen background. When I put a new div underneath the content of the div gets mish-mashed with the image instead of allowing scrolling.
html {
scroll-behavior: smooth;
;
}
body {
background-color: #FBEEC1;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background-image: url(tempbackground.jpg);
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
}
#title-text {
position: absolute;
width: 500px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -250px;
/* divide each margin in 1/2 */
margin-top: -125px;
}
.body-text {
display: none;
/*This will be enables after scrolling with a scroll animation */
color: #BC986A;
width: 100%;
}
.text-width {
margin: 0 auto;
width: 50%;
}
.font-title {
font-family: "Times New Roman", Times, serif;
}
.font-body {
font-family: Arial, Helvetica, sans-serif;
}
<div id="header">
<img id="title-text" src="Logo-text.png">
</div>
<div class="body-text" id="font-title">
<h2 class="text-width">Our Forests Are Under Attack!</h2>
<p class="text-width" id="font-body">Sample text that should display below image.</p>
</div>
For what i understood, you want that the page you first up see after opening your file in browser to be blank and when you scroll down you see your content.
for this make a empty container
<div class="empty-page"></div> and set its height in css file to 100 vh( viewport height ).
.empty-page {
height: 100vh;
}
<body>
<div class="empty-page"></div>
<!-- your rest of the code -->
<h1>THIS IS A HEADING</h1>
</body>
https://codepen.io/afrodiameter/pen/OwQmyd
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#head {
position: relative;
width: 100%;
max-height: 160px;
min-width: 320px;
}
img {
width: 100%;
max-height: 160px;
}
h1 {
position: absolute;
bottom: -24px;
font-size: 6em;
}
<header id="head">
<img src="http://via.placeholder.com/1280x160" alt="header image"/>
<h1> Magro Perimeter</h1>
</header>
In the above Pen I have a div that contains both an <img> and an <h1>. I want the bottom of the <h1> to be "locked" to the bottom of the <img>.
When the user resizes the browser I want the font-size to scale accordingly while the bottom of the <h1> stays "locked" to the bottom of the <img>.
I thought using vw would be the way to go but when resizing the browser the <h1> moves vertically and thus does not stay locked to the bottom of the image.
I'd like to accomplish this without JS/jQuery or mixins. Is this possible?
are you testing with bottom:0?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#head {
position: relative;
width: 100%;
max-height: 160px;
min-width: 320px;
}
img {
width: 100%;
max-height: 160px;
}
h1 {
position: absolute;
bottom: 0;
font-size: 6em;
}
<header id="head">
<img src="http://via.placeholder.com/1280x160" alt="header image"/>
<h1> Magro Perimeter</h1>
</header>
A very helpful user on Reddit solved this.
h1 {
position: absolute;
top: 52%;
font-size: 6vw;
}
Why this works I'm not quite sure. It seems counterintuitive to use top as opposed to bottom.
I have a sidebar fixed to the left of the screen.
I have the current time in a paragraph tag at the top of the sidebar. The width of this element is what sets the width of the sidebar.
What I am struggling with is then adding another paragraph to the sidebar which is centered horizontally and vertically in the sidebar.
I've looked at many other examples of centering elements but can't seem to get it. Help is much appreciated.
Basic structure:
<div id="left">
<p id="time">
12:03<span>45</span>
</p>
<p id="currentWeather">
<!-- I've replaced this <i> with an <img> to avoid loading the font in the fiddle -->
<i class="wi wi-day-sunny"></i>
<img src="http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png">
<span>32</span>
</p>
</div>
Fiddle: https://jsfiddle.net/w5m7qd6u/1/
Perhaps this is what you're looking for...
A combination of height: 100vh on a parent element, setting the top element to be position: absolute and thereby not positioned vertically, and adding styles to the <p> which you will vertically center:
#currentWeather {
top: calc(50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Full code and snippet below: (view full page for clarity)
I commented out the font sizes to make this easier on me with a smaller window, but that shouldn't affect it.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", Helvetica, sans-serif;
}
#left {
position: fixed;
z-index: 1;
top: 0;
left: 0;
height: 100vh;
box-sizing: border-box;
padding: 24px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
text-align: center;
}
#time {
position: absolute;
width: 100%;
left: 0;
padding: 0;
margin: 0;
/* font-size: 90pt; */
}
#time > span {
margin-left: 6px;
/* font-size: 24pt; */
}
#currentWeather {
position: relative;
left: 0;
/* font-size: 84pt; */
margin: auto;
top: calc(50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#currentWeather > span {
display: block;
/* font-size: 40pt; */
}
/* this is just a placeholder. real image is dynamic and won't have set height */
img {
width: 124px;
height: auto;
}
<div id="left">
<p id="time">
12:03<span>45</span>
</p>
<p id="currentWeather">
<!-- <i class="wi wi-{{currentConditions}}"></i> -->
<!-- have used image for placeholder to avoid uploading font -->
<img src="http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png"><span>32</span>
</p>
</div>
html
<div id="left">
<p id="time">
12:03<span>45</span>
</p>
<div id="hvcenterme">
<p>
Another Paragraph centered both ways.
</p>
</div>
<p id="currentWeather">
<!-- <i class="wi wi-{{currentConditions}}"></i> -->
<!-- have used image for placeholder to avoid uploading font -->
<img src="http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png"><span>32</span>
</p>
</div>
css
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", Helvetica, sans-serif;
}
#left {
position: fixed;
z-index: 1;
top: 0;
left: 0;
height: 100vh;
display:flex;
flex-direction:column;
padding: 24px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
text-align: center;
}
#time {
flex:0 0 auto;
margin:0;
font-size: 90pt;
}
#time > span {
margin-left: 6px;
font-size: 24pt;
}
#hvcenterme {
flex:1 0 auto;
margin:0;
width:100%;
display:flex;
background:Green;
}
#hvcenterme p {
flex:1 0 100%;
line-height:1.5em;
margin:0;
text-align:center;
align-self:center;
background:Blue;
}
#currentWeather {
flex:0 0 auto;
font-size: 84pt;
margin:0 auto;
}
#currentWeather > span {
display: block;
font-size: 40pt;
}
/* this is just a placeholder. real image is dynamic and won't have set height */
img {
width: 124px;
height: 112px;
}
JSFiddle link
https://jsfiddle.net/w5m7qd6u/7/
I'm trying to separate a text header from a banner for an eBay listing. Here's the code:
body {
background-color: #cccccc;
}
#banner {
position: top;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>
<h1 style="font-family:helvetica">[Header text]</h1>
I've tried to add line breaks before the header to separate the header from the banner, but this isn't consistent across all viewing monitors. I converted px to em in the "height" and added the four breaks, but this doesn't work either. Thanks so much.
Try implementing margin-top.
<style>
body {
background-color: #cccccc;
}
#banner {
position: top;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
h1{
margin-top:150px;}
</style>
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>
<h1 style="font-family:helvetica">[Header text]</h1>
Update: You can also use percentages for margin-top to get a more consistent view on different browsers. Alternatively you can just put it into one div. You then wouldn't need to specify margin-top.
body {
background-color: #cccccc;
}
#banner {
position: top;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
<h1 style="font-family:helvetica">[Header text]</h1>
</div>
I have the following test here: http://dev.driz.co.uk/gallery/index2.php
The idea is that an image should be centred within the gallery div and have 72px of padding all the way around it. If the image is smaller than the screen, then it will be centred (this part works), however if the image is larger than the screen then it should resize itself to fit depending on the best ratio.
This is achieved by setting the image max-height and max-width to 100% so the image is constrained by its container element. And in this case the container is two faked tables with CSS to centre it on the page.
What's actually happening is the image is just ignoring the max-height property and only applying the width constrain, so it appears off the page.
Any ideas on what the issue is? In the past I have just used JavaScript to position the image in the middle, but would prefer to use just CSS like in the example.
Full code is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Center</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
border; 0;
}
html,body
{
height: 100%;
width: 100%;
}
body
{
overflow: hidden;
}
.gallery
{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.gallery-background
{
background: #333333;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
padding: 72px;
}
.gallery-outer
{
display: table;
width: 100%;
height: 100%;
border-collapse: collapse;
table-layout:fixed;
}
.gallery-inner
{
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.gallery-image
{
position: relative;
}
.gallery-image img
{
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body class="default">
<div class="gallery">
<div class="gallery-background">
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-image">
<img src="EmpireState.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you give an image a max-height of 100%, it looks for its direct parent tag's height. If that doesn't have a height or constrained in anyway, then it can't apply the rule to height of the image. Looking at your HTML/CSS, I would strip it back and simplify it like this:
<div class="gallery">
<div class="gallery-background">
<img src="EmpireState.jpg">
</div>
</div>
And the CSS
.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.gallery-background img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
Hopefully that should sort it out