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.
Related
THIS IS A CAFE MENU PAGE
trying to make the "Est. 2020" text italicized by creating an established class selector and giving it the font-style property with the value italic.
THIS is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
</div>
</body>
</html>
THIS IS THE CSS CODE
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
.p-established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
trying to make the "Est. 2020" text italicized by creating an established class selector and giving it the font-style property with the value italic.
You need to edit your HTML to add a class to <p>Est. 2020</p> element.
It needs to be <p class="established">Est. 2020</p> for you to be able to customize it with CSS. The moment it has the .established class then you can add
.established {
font-style: italic;
}
If you are working only with CSS and can't change the HTML code then let me know.
//////////////////////////
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
h1,
h2,
p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
h1,
h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor,
.dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
.established {
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p>
<p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p>
<p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p>
<p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p>
<p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p>
<p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p>
<p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p>
<p class="price">2.50</p>
</article>
</section>
</main>
</div>
</body>
</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>
I need help with my contentbox. It was placed right below my header before but then I replaced the font of the title for my webpage in the header and for some reason this caused the content to fall down far below my header although this new font actually takes up even less space than the previous one and I have used the inspect-element on the webpage and nothing is in the way of content other than the box-<div>.
That content is inside of in my HTML so it wouldn’t make sense for the box-<div> to push content down, I think.
#content {
font-size: 16px;
display: inline-block;
margin-left: 30px;
font-family: "Times New Roman", Times;
text-align: center;
background-color: #1A1A1A;
margin: 30px;
width: 730px;
color: #F1F1F1;
float: right;
}
header {
margin: 0 auto;
color: #F1F1F1;
}
#titel {
float: right;
font-size: 70px;
font-family: 'Stalemate', cursive;
padding: 48px;
}
.box {
width: 1000px;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Page </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Stalemate" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div class="box">
<header>
<img src="#/#.png" alt="#">
<div id="titel">Page</div>
</header>
<aside>
<nav>
<ul>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
</ul>
</nav>
</aside>
<div id="content">
<h1>Title</h1>
<p>Text.</p>
<h2>Title</h2>
<div id="img-wrapper">
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
<div>
</div>
</div>
</div>
</div>
</div>
<footer>©Text</footer>
</body>
</html>
I can force this layout with a table, but I think the best practice may be some display/float settings in CSS. I have a header and menu section that are working as desired. Below them are top, middle, and bottom sections that are wrapping ugly. The top section should have an image followed by a block of text. The middle section should have 3 equal blocks of text. The bottom (footer) should have 1 equal block of text. Is there a clean way to do this without stuffing it into a table? Here's what I'm doing so far and as I say it's ugly:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<header>
<span class="HeaderTitle">My header info</span>
</header>
<nav>
<!-- the menu is working fine -->
</nav>
<main>
<style>
.MyArticle
{
width: 30%;
display: inline-block;
float: left;
margin: 8px;
}
</style>
<div class="jumbotron">
<img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
</body>
</html>
Here's one way. You just need to clear your floats, basically. Here's some reading on CSS Floats:
All About Floats
CSS Floats 101
Mysteries of the Float Property
* {
box-sizing: border-box;
}
.jumbotron img {
border: solid 1px black;
margin-right: 14px;
}
#MiddleSection {
clear: left;
margin: 0px auto;
}
.MyArticle {
width: 33%;
display: inline-block;
text-align: center;
background: grey;
}
footer {
clear: left;
text-align: center;
}
<header>
<span class="HeaderTitle">My header info</span>
</header>
<main>
<div class="jumbotron">
<img src="/Images/Photo.jpg" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
Though most people don't usually make content on their websites full-width (expand the Snippet to full screen to see what I mean).
Another way that's better/simpler for modern browsers is to use the Flexbox method (not really an option if you have to support IE8 or IE9, etc.).
I am trying to create a Similar menu to http://getbootstrap.com/examples/navbar-fixed-top/. It looks like each li element is its own box, has width, height and some background color(gray for the active list item).
I cant figure out how to do this in my own navigation. I tried adding height to the list items and a elements but that doesnt keep them inline with the whole header/nav. I dont know if its because Im using pixels mixed with em's or what. I basically want each li to be its own box with a height of that equal to the navigation and a with of some arbitrary value so that when the user hover of the link/list-item a background-color can be applied ect....
Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="David Espejo">
<meta name="description" content="Providing small businesses and individuals websites using wordpress">
<meta name="keywords" content="web,design,wordpress,HTML,CSS,PHP">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- for mobile devices -->
<title>DEdesigns</title>
<script src="html5shiv.js"></script> <!-- allows html 5 styling -->
<link rel="stylesheet" href="normalize.css"> <!-- a modern CSS reset -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header id="main-header">
<h1>DEdesigns</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header> <!-- end #main-header -->
<article id="about-me">
<h1>About Me</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged
</p>
<figure>
<img src="#" width="#" height="#">
<figcaption>An image of myself</figcaption>
</figure>
</article> <!-- end #about-me -->
<article id="gallery">
<h1>My Work</h1>
<div id="gallery-conatiner">
<figure>
<img src="#" width="#" height="#">
<figcaption>SalonSociel website</figcaption>
</figure>
<p>
A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
</p>
<!-- ends first row -->
<p>
A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
</p>
<figure>
<img src="#" width="#" height="#">
<figcaption>JJ and Sons Electric website</figcaption>
</figure>
<!-- ends second row -->
<figure>
<img src="#" width="#" height="#">
<figcaption>Thetwoedgesword website</figcaption>
</figure>
<p>
A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
</p>
<!-- ends third row -->
</div> <!-- ends #gallery-container -->
</article> <!-- end #gallery -->
<article id="services">
<h1>Services</h1>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</article> <!-- end #services -->
<article id="contact-me">
<h1>Contact Me</h1>
<p>some contact me stuff goes here</p>
</article> <!-- end #contact-me -->
<footer>
<p>This is my fotter</p>
</footer>
</div> <!-- end #container -->
</body>
</html>
CSS CODE:
#container {
width: 100%;
background: lightblue;
border: 1px solid black;
font-size: 1em;
}
#main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: black;
color: white;
}
#main-header h1 {
float: left;
margin: 5px 30px;
}
nav ul {
padding-left: 0;
}
nav, nav ul li {
display: inline-block;
}
nav {
background: red;
height: 50px;
}
nav ul li {
border: 1px solid black;
}
nav a {
}
Try the following:
nav ul {
margin: 0;
display: table;
padding-left: 0;
}
nav a {
display: table-cell;
height: 50px;
vertical-align: middle;
}
Through the use of display: table and display: table-cell you simulate a table, which enables you to use vertical-align: middle in order to vertically center your text.
Fiddle