fairly new to web dev. I have a page that has a basic document flow, with images followed by text.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: url(Images_Albums/Background.jpg) no-repeat;
background-size: 100%;
}
article {
margin: 0;
padding: 0;
position: absolute;
width: 32%;
height: 100%;
left: 50%;
transform: translate(-50%, 0);
background: url(Images_Albums/FrontImage.jpg) no-repeat;
background-size: 100%;
}
#container {
margin: 0;
padding: 0;
margin-top: 9%;
position: relative;
width: 43%;
left: 50%;
transform: translate(-50%, 0);
}
img {
max-width: 100%;
}
p {
margin: 0;
padding: 0;
color: white;
font-family: QuaestorSans;
text-align: center;
}
<article>
<div id="container">
<div id="album1" class="albums">
<img src="Images_Albums/Album1.jpg">
<p>[details]</p>
</div>
<div id="album2" class="albums">
<img src="Images_Albums/Album2.jpg">
<p>[details]</p>
</div>
<div id="album3" class="albums">
<img src="Images_Albums/Album3.jpg">
<p>[details]</p>
</div>
</div>
</article>
My issue is that there is space between the images and the text:
I have web inspector with the text element selected and you can see there is a gap between this element and the image above. All my margins and my paddings are 0, so why am I getting this gap? Many thanks!
This space is caused of the image because it's an inline element. To remove the space just add display: block to the img
CSS
img {
max-width: 100%;
display: block;
}
Try adding a 0 margin to your img tag. Many HTML tags have default CSS attached to them which will be applied unless you specifically override it.
img {
max-width: 100%;
margin: 0;
}
You can use display: blockand float: left for img.
Related
I don't have much knowledge about html and css and I couldn't find the answer on the internet so I am here.
Problem:
I am trying to make an image fill top part of the screen but one thing stops me from it and it's the default margin of the <body>. I've managed it by using margin: -10px; But now the image can't fill the screen by 20px, probably because there is no margin, image still thinks screen is that big.
html,body {
width: 100%;
height: 100%;
margin: -10px;
padding: 0;
overflow: hidden;
}
img {
width: 1600px;
height: 300px;
opacity: 70%;
object-fit: cover;
object-position: top 10px;
}
.cont {
position: relative;
text-align: center;
padding: 10px;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<body>
<div class="cont">
<img src="https://i.stack.imgur.com/DWZAk.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
NOTE: If you have any questions or didn't understand anything about the question, please ask because I am ready for any answer. :) Thanks.
If your image is meant to be a decoration(design), then background is fine to use.
.cont can be a flex or grid element, to avoid position absolute and possible unwanted sides effects.
here an example with a background and grid:
body {
margin: 0;
min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
height: 300px; /* guessed from your code */
display: grid; /* default make a single column*/
background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
margin-block: auto; /* vertical-centering in its row from here */
margin-inline-start:70px;
font-size: 100px; /* from your code */
color: white; /* from your code */
font-weight: normal; /* you looked for this? */
text-shadow: 0 0 1px #000; /*Optionnal increase readability*/
}
<div class="cont">
<h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
</div>
Generally to eliminate all the margins and paddings you can add:
* {
margin: 0;
padding: 0;
}
By the way I attached a snippet where it's working as you requested. Is better to eliminate the margins than adding a negative margin, if you want to do it that way you must to compensate it in the width to achieve the 100% width intended.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
img {
width: 100%;
margin: 0;
height: 300px;
opacity: 70%;
object-fit: cover;
}
.cont {
position: relative;
text-align: center;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<html>
<body>
<div class="cont">
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
</html>
I have an image, and a text-group that holds text.
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
I want the first word to always be positioned half on the image and half off the image like this.
The Problem: When I add more text into the text-group, it pushes the first word up.
Without adding a height to my text-group and without changing the bottom position of my text-group, how can I prevent my text from being pushed up when more text is added? In other words, how can I achieve the result below?
Full HTML and CSS
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute;
bottom: -15%;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
you might not need position. A negative top margin on the first h1 is plenty enough, no need then to mind img's height.
* {
margin: 0;
padding: 0;
}
.container {
/* position: relative; */ /*optionnal i believe */
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
/* position:absolute */ /*optionnal i believe */
}
.text-group h1:first-child {
margin-top: -0.7em;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
works the same with position:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute
}
.text-group h1:first-child {
margin-top: -0.7em;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
You have to position your position:absolute; from the top instead of the bottom. Because it will fix it from the top:
.text-group {
position: absolute;
top: 81%;
}
DEMO
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute;
top: 81%;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
Use:
top: 85%;
instead of:
bottom: 15%;
This is an easy fix
Just change the text-group class to this, changing the position to absolute, this makes the element positioned absolutely to its first positioned parent.
.text-group {
position: absolute;
top: 80%;
}
You can learn more about css positioning here, as it as been explained in full details https://medium.com/#leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6
When the viewport is larger than the width of the image, the image is centered, but when the width of the image is larger than the width of the viewport, the image is aligned to the left rather than to the center. The effect I am aiming for is for the image to always be cropped to the width of the viewport and always be aligned to the center.
body,
html {
margin: 0;
padding: 0;
}
.crop {
width: 100%;
height: 50%;
overflow: hidden;
background-color: red;
}
#cropped-img {
position: relative;
height: 100%;
display: block;
margin: auto;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>
You can achieve what you want with flexbox:
body,
html {
margin: 0;
padding: 0;
}
.crop {
overflow: hidden;
background-color: red;
display:flex;
justify-content:center;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" >
</div>
Nevermind, I managed to get the exact effect I needed using the background-image property. Here is the HTML and CSS I used if anyone else is interested:
HTML:
<div class="crop"></div>
CSS:
body, html {
margin:0;
padding:0;
}
.crop {
width: 100%;
height: 500px;
overflow: hidden;
background-image: url("http://img1.jurko.net/wall/paper/donald_duck_4.jpg");
background-repeat: no-repeat;
background-position: center;
}
Try giving variable values the image that occupy 100% of width of the element
body,
html {
margin: 0;
padding: 0;
}
.crop {
width: 100%;
height: 50%;
overflow: hidden;
background-color: red;
text-align: center;
}
#cropped-img {
position: relative;
height: 100%;
width: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>
I do have looked for this answer without success. I found some ways that you can do this but those looked really weird. (Like margin: -9999px;) So what I'm trying to do is center this image in my container. The overflow and width/heigh properties work as they should, but you're supposed to see the center of the image instead.
Thanks in advance!
The Html:
<section class="photo-grid-static">
<div class="photo-grid-container"><img src="Images and videos/odesza1.jpg"/></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
The Css:
.photo-grid-static {
height: 300px;
width: 100%;
display: block;
position: relative;
background: black;
padding: none;
}
.photo-grid-container {
float: left;
width: calc(100% / 3);
height: 100%;
line-height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
display: inline-block;
position: relative;
left: 0;
right: 0;
background: red;
}
.photo-grid-container img {
height: 100%;
overflow: hidden;
position: relative;
}
<section class="photo-grid-static">
<div class="photo-grid-container" style="background-image: url('videos/odesza1.jpg')"></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
.photo-grid-container {
/* other styles */
background-position: center center;
background-size: cover;
}
If thats what you mean?
Ill do a mock up in a second.
https://jsfiddle.net/7zw0ej89/
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