Why is my third picture not inline with the other pictures? [duplicate] - html

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I have some simple html and css styling and I am creating a site with articles and pictures. I don't understand why my third picture isn't aligned with the other photos. It's slightly higher, though it seems like the same size. How can I get it to to be aligned properly? I don't believe I'm doing anything differently with my third article/picture, so I don't understand why it looks different.
index.html
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(dog.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(chocolate.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(cat.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}


There's a few issues going on here, like duplicating an ID. That being said, you can get what you want by adjusting the width and using vertical-align: top;
Fiddle here: https://jsfiddle.net/harcfs0u/40/
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(dog.jpg)"></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(chocolate.jpg)"></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(cat.jpg)"></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br /><br />
<center>©2017<br />
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif;
font-weight: 300 !important;
margin-bottom: 0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
.top-stories {
vertical-align: top;
}
section {
padding: 0;
margin: 0;
max-width: 32%;
display: inline-block;
}
article {}
.article-image {
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}


In the section class of CSS file, Try using display property with inline-flex. I am attaching you stackblitz link here.
https://stackblitz.com/edit/js-c9mqfu
section {
max-width: 33%;
display: inline-flex;
}


The reason is that the vertical alignment of inline-blocks is by default at their baseline, which in this case is the last line of your text. To fix that, add vertical-align: top to the CSS for section:
section {
max-width: 33%;
display: inline-block;
vertical-align: top;
}
(And as I wrote in the comments, don't use an ID more than once - use a class instead)


u can know the differ between grid and flex in this link differ between flex and grid
section {
max-width: 33%;
display: inline-flex; // or used display: inline-grid;
}


I just removed extra text in 3rd image p and then your code worked fine
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://upload.wikimedia.org/wikipedia/commons/7/70/Chocolate_%28blue_background%29.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location ... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>

Related

display inline-block doesn't work in my code?

I am doing a basic html course on freecodecamp and I made this work properly. When i tried doing some changes on my own and adding different stuff to it it acted weird. I then decided to delete all my changes and re-launch but then it just didn't look the same as before. I have tried messing with different setups for my articles, tried adding new sections, articles and paragraphs but to me, it seems as if the code doesn't act like it did before. I have not just double og triple but quintuple checked my code to make sure it's identical to the one on freecodecamp and it IS, but it doesn't look the same at all. I don't know if I'm missing something, but if someone could figure out where the problem occurs, maybe i could stop banging my head against my table.
I want the paragraphs to be on the same line and I want my articles to be separated on each line.
Result:
h1,
p,
h2 {
text-align: center;
}
.menu {
width: 80%;
background-color: cornflowerblue;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
body {
background-image: url("Baggrund_2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: sans-serif;
}
.på_linje {
display: inline-block;
}
.smag,
.sandwich {
text-align: left;
width: 75%;
}
.pris {
text-align: right;
width: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ProteinRiget</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="menu">
<header>
<h1>ProteinRiget</h1>
<p>Est. 2027</p>
</header>
</body>
<main>
<section>
<h2>Shakes & Smoothies</h2>
<article class="på_linje">
<p class="smag">John F. Kennedy shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John snow shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Wayne shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Cena shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Mayer shake</p>
<p class="pris">50,-</p>
</article>
</section>
<section>
<h2>Sandwiches</h2>
<article class="på_linje">
<p class="sandwich">John(ny) Depperoni</p>
<p class="pris">60,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Bravoioli</p>
<p class="pris">65,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Knoxckle</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Deluxe</p>
<p class="pris">70,-</p>
</article>
</section>
</div>
</main>
</html>

I want the paragraphs to be on the same line and I want my articles to be separated on each line.
For this, your paragraph needs to be inline-block and the article should be block.

How to use absolute positioning in CSS to make the images in 2 rows of 3

I need to use absolute positioning to get these images, along with the text under them in rows of three. I am new to HTML/CSS and this requires me to use absolute or some other simple positioning method i cant use grid etc. I also need to make sure the news section stays where it is.
This is my HTML code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="Tempany Johnson" content="zx813679"/>
</head>
<body>
<nav class="navigation">
<p>
Museum of Odds & Ends
Visit Us
Shop
Our History
</p>
</nav>
<div class="heading"><h1>Museum of Odds & Ends</h1>
<div class="subheading"><h2>Walton Hall, Milton Keynes</h2>
<div id="museumimages">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="1.jpeg" alt="Budapest Chainbridge 1907"/>
<p>Budapest Chainbridge 1907</p>
</a>
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD"/>
<p>Three red-figure attic vases</p>
</a>
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval"/>
<p>Bronze Enamel Ring Pin</p>
</a>
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner"/>
<p>Glass-plate Slide</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron"/>
<p>Oilpainting of Ettingen Village</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="11.jpeg" alt="Painting by Soja Feldmaier"/>
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article id=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>
This is my CSS file
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width:200px;
height:100px;
}
#news {
position: absolute; right: 25px; top: 220px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#museumimages {
position: absolute; left: 24px; top: 200px;
}

The easiest technique to have a grid-like display is using display: inline-block.
You can adapt it your case, but the fundamentals are here: https://jsfiddle.net/y6hgnv4f/1/

How can I get my photos to align vertically with another element in CSS

I'm trying to get my photos to be aligned vertically with my other photos. They always appear under the last one I've added in HTML. I have looked around but can't seem to find it.
CSS:
h1 {
text-align: center;
font-size: 50px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
h2 {
text-align: center;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
nav {
text-align: center;
font-size: 20;
}
.frontIMG {
height: 30%;
width: 30%;
border: black solid medium;
}
img {
max-width: 100%;
height: auto;
}
.frontIMGcenter {
display: block;
margin: 500px 250px;
height: 30%;
width: 30%;
border: black solid medium;
}
HTML:
<DOCTYPE html>
<html>
<head>
<link href="mainpage.css" type="text/css" rel="stylesheet">
<title> Barton And Son Builders </title>
</head>
<body>
<nav>
<a href=./MainPage.html> Home </a>
About Us
<a href=./Portfolio.html> Portfolio </a>
</nav>
<main>
<section>
<h1>
Barton And Son Builders
</h1>
<h2> <em> "Foundation To Finish" </em> </h2>
</section>
<figure class= "mainIMG">
<div id= "#crystalcomplete">
<img src= "/C:\Users\Ed\Desktop\Photo-Mainpage\The-Crystal-Restaurant\CrystalComplete.jpg" class= "frontIMG">
</div>
<br>
<figcaption class= "figcapMain"> The Crystal Restaurant <br>
Public Square, Watertown NY. </figcaption>
</figure>
<figure class= "mainIMG">
<img src= "/C:\Users\Ed\Desktop\Photo-Mainpage\Black-River\black-river.jpg" class= "frontIMG">
<br>
<figcaption class= "figcapmain"> Metal Roof <br>
Black River, NY.
</figcaption>
</figure>
<figure class= "mainIMG">
<img src= "/C:\Users\Ed\Desktop\Photo-Mainpage\Spokes-Deck\Spokes-deck.jpg" class= "frontIMGcenter">
<br>
<figcaption>Spokes Pressure Treated Deck <br>
Public Square, Watertown NY. </figcaption>
</figure>
</body>
</main>
</html>
</DOCTYPE>

There seems to be a </div> in the middle of the first figure. Try taking that out and see what happens.
Generally your code should render them all aligned to the left.
Are you editing your code in an editor or just notepad? A rule of thumb is to keep track of open- and close-tags, they can cause mayhem ;) Best of luck!

I want to change the distance between my image and text and also move all of the items to the left like in image two

The two main problems is the icons aren't close to the corresponding text I tried padding but it didn't work but that could have just been me, The second problem is the text is in the center of the page I think that might be the CSS because I added center so that the text would be centered to the image but maybe it's affecting everything. This is the example I'm trying to make it look like.
[my website][1]
[example website][2]
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="javascript" href="javascript/script.js">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<style>
Body {
margin: 0;
height: 100vh;
}
canvas {
display: block;
}
.img-with-text {
text-align: center;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
</style>
<!-- <img src="images\Aboutme.png" alt="rorschach">
<img src="images\Contact.png" alt="Holding hands"> -->
<div class="img-with-text">
<img src="images\Folder.png" alt="A folder" />
<p>Projects</p>
</div>
<div class="img-with-text">
<img src="images\Aboutme.png" alt="rorschach" />
<p>About me</p>
</div>
<div class="img-with-text">
<img src="images\Contact.png" alt="Holding hands" />
<p>Contact</p>
</div>
<div class="img-with-text">
<img src="images\Ideas.png" alt="Holding hands" />
<p>Contact</p>
</div>
</html>```
[1]: https://i.stack.imgur.com/nfjQC.png
[2]: https://i.stack.imgur.com/z7BeK.png

It looks like [1] and [2] are the same image, so it doesn't help much.
Regarding the problem of moving the items to the left, I would suggest to wrap all <div class="img-with-text"> items in a <div class="items"> and set for it:
.items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
This way you have more control over your items.
About the distance between the text and image, <p> always comes with a default margin (top and bottom)...so maybe it could be that? If you wanna try it out just put:
.img-with-text p {
margin: 0;
}
A screenshot with your elements being inspected would help to visualize what you want.

CSS Animation for hover rotate()

I have a row in my page and I want the space in between the borders of the boxes along with keeping the boxes the same size on rotate. The animation is what I want it's that they squares are turning into rectangles and also I don't seem to know how to make them look as stand alone squares with the borders?
.statementnews {
border-style: solid;
border-width: 1px;
padding-left:2em;
/* width: 3vw; */
/* height: 3vh; */
/* justify-content: space-between; */
/* margin-right: 1em; */
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left:1em;
margin-right:1em;
background-color: #F0F0F0;
}
.statementnews:hover {
width: 1em;
height: 1em;
transform: rotate(360deg);
}
.mycolumn2 {
/* display: table-cell; */
margin-top: 2em;
/* width:100%; */
text-align: wrap;
}
.mycolumn2 div {
width:100%;
display: table-cell;
padding-top: 1em;
width: 25vw;
height: 3vh;
justify-content: space-between;
}
<section class="row sectionthird">
<h1 class="mycolumn_header">What they’ve said</h1>
<div class="mycolumn2" id="content2">
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/19iZKat.png" alt="">
<p>“Manage has supercharged our team’s workflow. The ability to maintain
visibility on larger milestones at all times keeps everyone motivated.”</p>
<p>~Anisha Li</p>
</div>
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/nywqgF7.png" alt="">
<p> “We have been able to cancel so many other subscriptions since using
Manage. There is no more cross-channel confusion and everyone is much
more focused.”</p>
<p>~Ali Bravo</p>
</div>
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/TAe4vVN.png" alt="">
<p>“Manage allows us to provide structure and process. It keeps us organized
and focused. I can’t stop recommending them to everyone I talk to!”</p>
<p>~Richard Watts</p>
</div>
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/dnBxz07.png" alt="">
<p>“Their software allows us to track, manage and collaborate on our projects
from anywhere. It keeps the whole team in-sync without being intrusive.”</p>
<p>~Shanai Gough</p>
</div>
</div>
</section>

This is the modified code which would give you the desired output:
html
<section class="row sectionthird">
<h1 class="mycolumn_header">What they’ve said</h1>
<div class="mycolumn2 " id="content2">
<div class="statementnews col">
<img src="https://i.imgur.com/19iZKat.png" alt="">
<p>“Manage has supercharged our team’s workflow. The ability to maintain
visibility on larger milestones at all times keeps everyone motivated.”</p>
<p>~Anisha Li</p>
</div>
<div class="statementnews col">
<img src="https://i.imgur.com/nywqgF7.png" alt="">
<p> “We have been able to cancel so many other subscriptions since using
Manage. There is no more cross-channel confusion and everyone is much
more focused.”</p>
<p>~Ali Bravo</p>
</div>
<div class="statementnews col">
<img src="https://i.imgur.com/TAe4vVN.png" alt="">
<p>“Manage allows us to provide structure and process. It keeps us organized
and focused. I can’t stop recommending them to everyone I talk to!”</p>
<p>~Richard Watts</p>
</div>
<div class="statementnews col">
<img src="https://i.imgur.com/dnBxz07.png" alt="">
<p>“Their software allows us to track, manage and collaborate on our projects
from anywhere. It keeps the whole team in-sync without being intrusive.”</p>
<p>~Shanai Gough</p>
</div>
</div>
</section>
and add this to your css
.col {
min-width:25vw;
}
Also, there was one error. The id of all the div of statement news were the same. In HTML, ids can't be the same. So I have removed the ids out of divs if you wish to add them, give them different naming(content1, content, content3 and so on).

Please note that the cards had the same id's. I've changed the CSS a bit hopefully this is what you meant
.statementnews {
width: 300px;
height: 300px;
padding-left: 30px;
box-shadow: 0 0 10px;
border-radius: 10px;
margin: 10px;
overflow: auto;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left: 1em;
margin-right: 1em;
background-color: #f0f0f0;
}
.statementnews:hover {
transform: rotate(360deg);
}
.mycolumn2 {
width: 100%;
margin-top: 2em;
display: flex;
flex-direction: row;
justify-content: center;
text-align: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=" />
<title></title>
</head>
<body>
<section class="row sectionthird">
<h1 class="mycolumn_header">What they’ve said</h1>
<div class="mycolumn2" id="content2">
<div class="statementnews" id="content_1">
<img src="https://i.imgur.com/19iZKat.png" alt="" />
<p>
“Manage has supercharged our team’s workflow. The ability to
maintain visibility on larger milestones at all times keeps
everyone motivated.”
</p>
<p>~Anisha Li</p>
</div>
<div class="statementnews" id="content_2">
<img src="https://i.imgur.com/nywqgF7.png" alt="" />
<p>
“We have been able to cancel so many other subscriptions since
using Manage. There is no more cross-channel confusion and
everyone is much more focused.”
</p>
<p>~Ali Bravo</p>
</div>
<div class="statementnews" id="content_3">
<img src="https://i.imgur.com/TAe4vVN.png" alt="" />
<p>
“Manage allows us to provide structure and process. It keeps us
organized and focused. I can’t stop recommending them to
everyone I talk to!”
</p>
<p>~Richard Watts</p>
</div>
<div class="statementnews" id="content_4">
<img src="https://i.imgur.com/dnBxz07.png" alt="" />
<p>
“Their software allows us to track, manage and collaborate on
our projects from anywhere. It keeps the whole team in-sync
without being intrusive.”
</p>
<p>~Shanai Gough</p>
</div>
</div>
</section>
</body>
</html>
</body>
</html>