I hope you can give me a hand.
What I'm Trying to do in a mobile version it's to leve the menu bar always visible using position fixed to the visitor and it work's fine, the issue is that the second div called aside it shows behind the menu bar and I really do not know how to show it after the menu bar.
I'm working in a 500px mobile version.
How can I fix this ?
I hope you can help me
....
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 1000px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 95%;
margin-right: auto;
margin-left: auto;
background-color: #f1f1f1;
height: 1000px;
max-width: 950px;
}
header{
height: 150px;
border-color: red;
border-style: dotted;
margin-bottom: 5px;
}
aside{
height: 200px;
border-color: blue;
border-style: dotted;
margin-bottom: 5px;
}
section{
height: 200px;
border-color: yellow;
border-style: dotted;
margin-bottom: 5px;
}
article{
height: 200px;
border-color: deeppink;
border-style: dotted;
margin-bottom: 5px;
}
footer{
height: 200px;
background-color: green;
border-style: dotted;
}
nav{
width: 100%;
float: left;
}
nav ul{
list-style: none;
padding: 0;
overflow: hidden;
margin-top: 56px;
}
nav ul li{
padding: 10px;
display: inline-block;
overflow: hidden;
}
nav ul li a{
color: red;
}
.menu {
display: none;
}
#media screen and (max-width:700px){
.container{
background-color: deeppink;
}
}
#media screen and (max-width:500px){
body{
margin: 0;
}
.container{
background-color: #CCCCCC;
width: 100%;
}
header{
margin-bottom: 5px;
border-style:none;
height: auto;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
}
.menu .icon-menu{
color: #fff;
padding: 10px;
font-size: 28px;
}
.menu .menu_txt{
color: #fff;
float: right;
padding: 10px;
font-size: 18px;
margin-top: 5px;
margin-right: 5px;
}
nav{
background-color: #595959;
height: 100%;
position: fixed;
width: 90%;
display: none;
}
nav ul{
border-color: deeppink;
margin-top: 0px;
}
nav ul li{
background-color: #3E3E3E;
display: block;
margin-top: 0px;
width: 100%
}
aside{
margin-top: 0px;
}
}
</style>
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<div class="menu">
<div class="menu_txt">MENU</div>
<div class="icon-menu"></div>
</div>
<nav>
<ul>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
</nav>
</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id excepturi nesciunt in modi ratione alias vero ipsam optio quod quaerat fugiat est nihil temporibus, earum, necessitatibus ducimus hic cumque inventore?</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, incidunt necessitatibus asperiores quibusdam voluptas eos doloremque vitae consectetur earum facilis repudiandae ullam quisquam perferendis tempora. Illo, officia atque natus itaque.</section>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis necessitatibus explicabo obcaecati cum minima mollitia quam assumenda perferendis dicta. Cumque placeat, aliquam itaque ad quia accusamus autem tempora ex fugit.</article>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus at natus pariatur eligendi possimus ipsa corporis rem rerum omnis, perferendis, earum vero dolorum optio, nihil odit dolores autem asperiores recusandae!</footer>
</div>
</body>
</html>
In your media query, add margin top or padding top to your body to push the content below the menu then add top: 0; to your menu to make sure it stays at the top.
http://codepen.io/anon/pen/JWwRmN
#media screen and (max-width:500px){
body{
margin: 0;
margin-top: 50px;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
top: 0;
}
Related
I need help getting the header title (h2,h3,h4) region always appear in the top right corner of their respective div region, no matter what view is being displayed.
Also, the header content keeps overflowing as I shrink the web browser, how can I stop that from running over?
I tried moving the margins and the padding of the header, and the header won't move to the right past 350px.
I tried to adjust the size of the div to allow the header to move top right.
Should I have used the "section element" instead of div?
I haven't tried using absolute or relative positioning.
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-bottom: 5px;
position: relative;
bottom: 11px;
left: 231px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
position: relative;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
h2,
h3,
h4 {
position: relative;
left: 100%;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-left: 310px;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
So, a few things to go over:
First off, you don't need to use different heading tags for the same hierarchical elements. You already have your first heading as your title, and since you don't have anything that follows you can stick with just <h2> from there.
We can use CSS specificity to target your various headings to change the colors as you prefer. You could also have done this with ids, classes, really there are several ways to approach any layout in CSS; this is just what I chose for simplicity.
floats are very outdated and have been replaced by flex-box techniques which we're going to use to position your headers on your menu items. Could we use position attributes? Sure. But if we're using flex already, we can take advantage of what it's capable of to position elements using a container element to house all of your items and then make the items themselves utilize flex as well.
We can use align-self: flex-end; to position your <h2> tags as needed and then add some margin to give them some breathing room away from the edges of the menuItems.
There's much more that can be done here, but I think this cleans it up quite nicely and you get a much simpler, more easily-responsive layout with less code and less attributes.
Hopefully, that covers everything. Let me know if you have any questions! Thanks for updating your post after my comment. Make sure to keep that in mind moving forward ;)
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
.container {
display: flex;
flex-direction: row;
background: transparent;
width: 100vw;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
.menuItem {
display: flex;
flex-direction: column;
background-color: lightgray;
padding: 0px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
flex: 1 1 32%;
min-width: 400px;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
border-top: 0px;
border-right: 0px;
align-self: flex-end;
padding: 5px 20px;
}
.container .menuItem:nth-child(1) h2 {
background-color: Pink;
color: black;
}
.container .menuItem:nth-child(2) h2 {
background-color: red;
color: white;
}
.container .menuItem:nth-child(3) h2 {
background-color: greenyellow;
color: black;
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="container">
<div class="menuItem">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Pizza</h2>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Salads</h2>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</div>
</body>
</html>
I am trying to make a vertical navigation bar. I have made a navbar.I want to set it's height to full page but i am not able to do that even when is set height:100% in CSS. I want content like para to be displayed on its left side.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
I tried to change the display: parameter of the unordered list to display:inline and also the display: parameter of div tag to display:inline How do I set the height to full page and also display content on its left side.
When you use height:100%; it means that you want that element to be 100% of its parent which in your case is body, and as height is not defined for it so it is auto. all you need to do is to add min-height:100vh for the body. It will solve your problem for full height navbar.
Now your next objective is to make the text to wrap around it, which can achieved by floating your navbar to left. This will make the next elements to wrap around it.
Setting div to display:inline; won't be a good thing to do just for achieving this result, because the moment you add next div it will start creating problems.
body {
margin: 0;
height: 100vh;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
float: left;
margin-right: 10px;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
<body>
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</body>
My suggestion is to use Bootstrap or for understanding you can do it like this also:
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 20vw;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
</style>
</head>
<body>
<div style="float: left; width: 20vw;">
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div style="float: right;width: 75vw">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</div>
</body>
</html>
so basically I'm creating a fake Italian restaurant site and the images in the img-container wont fit the box, leaving a line below the image. Also, the img-container overflows past the image which I don't want it to do. Any help appreciated.
Here is my code
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap");
/* CSS RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
background-color: #dee7e7;
font-family: "Open Sans", sans-serif;
}
/* Nav */
nav {
margin-top: -35px;
height: 70px;
background-color: #fff;
margin: 0px 0px 35px 0px;
height: 60px;
padding: 20px;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: #000;
}
nav a:hover {
cursor: pointer;
}
.nav-links {
float: right;
margin-top: -25px;
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.nav-links .current {
font-weight: 700;
text-decoration: underline;
}
.nav-links a {
padding-right: 10px;
font-size: 16px;
text-decoration: none;
color: #000;
font-weight: 400;
}
.nav-links a:hover {
text-decoration: underline;
}
.nav-links a:visited {
color: #000;
}
header nav h3 {
font-family: "Libre Baskerville", serif;
font-size: 26px;
}
/* Showcase 1 */
.showcase {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 20px;
}
.text-container {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container p {
font-size: 16px;
padding-right: 10px;
}
.btn-primary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #06a77d;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px grey;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container {
background: #c9d7d7;
}
.img-container img {
margin-left: 80px;
overflow: auto;
height: 500px;
}
/* Showcase 2 */
.showcase-2 {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 30px;
background: #192534;
color: #fff;
}
.text-container-2 {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 16px;
order: 1;
}
.text-container-2 h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container-2 p {
font-size: 16px;
padding-right: 10px;
}
.btn-secondary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #cc224e;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px black;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container-2 {
background: #3d5777;
padding-right: -300px;
order: 2;
}
.img-container-2 img {
margin-left: 80px;
max-width: 100%;
height: 510px;
}
.img-good-food img {
float: right;
max-width: 100%;
height: 130px;
margin-right: 20px;
}
.page-title {
text-align: center;
margin-bottom: 30px;
font-family: "Libre Baskerville";
}
.about-container {
place-items: center;
margin: 10px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.about-container p {
font-size: 16px;
padding-right: 10px;
margin-left: 20px;
}
.about-container button {
margin-left: 20px;
}
.menu-text {
text-align: center;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 20px;
}
.menu-container {
display: flex;
justify-content: center;
background: #3d5777;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 20px;
}
.fa-chevron-left {
font-size: 30px;
float: left;
margin-right: 200px;
margin-top: 300px;
color: #fff;
}
.fa-chevron-right {
font-size: 30px;
float: left;
margin-left: 200px;
margin-top: 300px;
color: #fff;
}
.menu-container img {
max-width: 100%;
height: 650px;
margin: 10px;
}
iframe {
margin-top: 40px;
float: right;
margin-right: 100px;
width: 600px;
box-shadow: 1px 1px 1px 1px grey;
}
.contact {
background: #3d5777;
width: 400px;
height: 200px;
color: #fff;
margin-left: 120px;
margin-top: 160px;
place-items: center;
justify-content: center;
padding-top: 30px;
}
.contact p {
margin-bottom: 5px;
}
.fas {
margin-bottom: 5px;
font-size: 16px;
}
/* Footer */
footer {
width: 100%;
text-align: center;
background: #192534;
padding: 10px;
}
footer h2 {
color: #fff;
font-size: 14px;
}
footer a {
color: #8abeff;
}
<header>
<nav>
<a href="">
<h3 class="logo">Chef Italia</h1>
</a>
<div class="nav-links">
<a class="current" href="index.html">Home</a>
About Us
Menu
Contact
</div>
</nav>
</header>
<div class="showcase">
<div class="img-container">
<img src="img/home-showcase.jpg" alt="Photo of Italian cheese on wooden board">
</div>
<div class="text-container">
<h1>Welcome to Chef Italia</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<button class="btn-primary">Find out more</button>
</div>
</div>
</div>
<div class="showcase-2">
<div class="img-container-2">
<img src="img/authenic-italian.png" alt="Photo of 2 pizzas on plates with glasses of water and cutlery on a table">
</div>
<div class="text-container-2">
<h1>Authentic Italian Food</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-secondary">View Our Menu</button>
</div>
</div>
<div class="showcase">
<div class="img-container">
<img src="img/good-food-picture.jpeg" alt="Photo outside of resteraunt with green leaf tree covering one third of the yellow building">
</div>
<div class="text-container">
<h1>Good Food Awards Winner 2019</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-primary">Find Out More</button>
<div class="img-good-food">
<img src="img/good-food.png" alt="Good Food Awards Logo">
</div>
</div>
</div>
<footer>
<h2>© Chef Italia 2021. Designed and developed with 💙 by Tyler Lechowski</h2>
</footer>
Did you try to just add:
.img-container {
position:relative
}
.img-container img {
height: 100%;
width: 100%;
}
To define image size you can add for example:
.img-container {
position:relative;
width: 200px;
height: 200px;
}
but be sure you add it to .img-container, not .img-container img. In .img-container you define size in pixels but in .img-container img you make it 100% for width and height to fill whole container
Try adding this:
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
height: 100%;
min-width: 100%;
object-fit: cover;
position: absolute;
}
Oveflow hidden to hide any part of the picture that comes outside the container. Object-fit cover to make it cover the container. If you want smaller picture just specify height and width on the container.
I'm fairly new to html and css and I have a trouble with understanding of the layout. Here is an example which I have created to show my problem.
What I would expect is for #bottom to be inside the #page but it is below it. Additionally the div #else which I would thought should be below the #page is in the same space as the #bottom.
Could you please help me understand what I'm doing wrong here?
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#page {
margin: 0 auto;
width: 90vw;
border: 3px solid black;
}
#main {
display: block;
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
float: left;
margin: 0 auto;
height: 4vh;
width: 90vw;
border: 1px solid green;
}
#else {
height: 10vh;
width: 90vw;
background-color: red;
margin: 0 auto;
}
<div id="page">
<header>
</header>
<div id="main">
</div>
<div id="side">
</div>
<div id="bottom">
</div>
</div>
<div id="else">
</div>
I don't get why did you put this float:left in your footer.If you remove it everything should work fine
#bottom {
margin: 0 auto;
height: 4vh;
width: 90vw;
border: 1px solid green;
}
Remove float left from #bottom
#bottom {
background-color:green;
margin: 0 auto;
height:50px;
width:100px;
border: 1px solid green;
}
here is the link: https://codepen.io/Dholu_Effect/pen/PoqByQa?editors=1100
Also I would sugges you to use Flex-box, it will make things much easier.
<body>
<div id="page">
<header>Header</header>
<div id="main">Main</div>
<div id="side">Side</div>
<div id="bottom">Bottom</div>
</div>
<div id="else">Else</div>
</body>
And the css
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#page {
margin: 0 auto;
width: 90vw;
border: 3px solid black;
}
#main {
display: block;
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
margin: 0 auto;
height: 4vh;
width: 90vw;
border: 1px solid green;
background-color:#ddd;
}
#else {
height: 10vh;
width: 90vw;
background-color: red;
margin: 0 auto;
}
https://codepen.io/erwinagpasa/pen/ZEGjqjY
I think you can see this
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 90vw;
background-color: #011a2f
}
#page {
margin: 0 auto;
width: 90vw;
}
#main {
float: left;
height: 60vh;
width: 67.5vw;
background-color: #323232
}
#side {
overflow: hidden;
margin-left: 2px;
height: 60vh;
width: 22.5vw;
background-color: #ff1e56;
}
#bottom {
height: 5vh;
width: 90vw;
background-color: #000000;
}
#else {
height: 10vh;
width: 90vw;
background-color: #ffac41;
margin: 0 auto;
}
<div id="page">
<header></header>
<div id="main"></div>
<div id="side"></div>
<div id="bottom"></div>
</div>
<div id="else"></div>
This is the closest i can do for you to understand it in your beginner level
*{
box-sizing:border-box; /* this will let the border/padding be included in the elements size */
}
#page {
margin: 0 auto;
width: 90%;
border: 3px solid black;
}
header {
display: inline-block;
margin: 0 10%;
height: 20vh;
width: 80%;/* changed to percentage which is more logic to follow its parent not the viewport width */
border: 1px solid green;
}
#main {
display: inline-block;
height: 60vh;
width: 67.5%;
border: 1px solid green;
margin:0;
margin-left:5%;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: calc(22.5% - 6px);/* 2 for the margin left, 4 for the borders*/
border: 1px solid green;
}
#bottom {
/*float: left;*/
margin: 0 auto;
height: 4vh;
width: 90%; /* percentage */
border: 1px solid green;
}
#else {
height: 10vh;
width: 90%;
background-color: red;
margin: 0 auto;
}
<div id="page">
<header>
</header>
<div id="main">
</div>
<div id="side">
</div>
<div id="bottom">
</div>
</div>
<div id="else">
</div>
I just made few adjustments in your code, I hope that is fine with you:
Note: View in full screen mode for more clarity.
#page {
margin: 0 auto;
width: 90vw;
border: 1px solid black;
}
header {
display: absolute;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#main {
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
height: 4vh;
width: 90vw;
border: 1px solid green;
background-color:green;
}
#else {
height: 10vh;
width: 90vw;
background-color: pink;
margin: 0 auto;
}
<div id="page">
<header>header
</header>
<div id="main">main
</div>
<div id="side">side
</div>
<div id="bottom">bottom
</div>
</div>
<div id="else">else
</div>
My recommendation is that you use flexbox. Here is a quick responsive design I did with HTML5 selectors. Since you're new to HTML/CSS, I would suggest you start learning this way and avoid so many div classes, as that doesn't work that great with accessibility, which is a huge issue in today's development world.
And here is a codepen you can play with.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
font-family: 'Roboto', sans-serif;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
background: darkgray;
}
header {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
}
header h1 {
font-size: 4rem;
font-weight: 300;
}
main {
display: flex;
}
article {
width: 70%;
justify-content: flex-start;
padding: 0.5rem;
}
aside {
width: 30%;
justify-content: flex-end;
padding: 0.5rem;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
#media (max-width: 600px) {
main {
flex-direction: column;
}
main > article, aside {
width: 100%;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
footer {
background: #333333;
color: white;
margin: 0;
text-align: center;
}
<div class="content">
<header>
<h1>Header</h1>
</header>
<main>
<article>
<h3>Current Article</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit vero quibusdam maxime magnam rerum nemo provident? Commodi, non! Ad facilis, doloribus voluptatum alias nostrum voluptatibus enim libero, distinctio nam sunt similique pariatur nesciunt accusantium eveniet perferendis ea doloremque molestiae culpa consequuntur quia aspernatur, itaque voluptate? Voluptatem magni delectus harum totam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga rerum repudiandae error eveniet est explicabo, nihil eum. Inventore laboriosam consectetur dolor consequatur. Unde in doloribus repellendus dolorum perferendis officia hic?</p>
<p>Dicta molestias doloremque, corrupti dolorum ipsum ea perferendis neque a, animi magnam ab sint impedit repudiandae aspernatur vel natus cum suscipit vero nisi nihil blanditiis iste laborum. Eum, sunt quo!</p>
<ul>
<li>Lorem ipsum dolor sit.</li>
<li>Nisi doloremque ut deserunt?</li>
<li>Impedit aliquam itaque placeat.</li>
<li>Sit incidunt iure assumenda.</li>
<li>Inventore fuga optio perferendis!</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus illum aut quia alias delectus labore, maiores, excepturi quae nisi a non consequuntur! Officia fugiat enim nostrum molestias ipsa! Deleniti, repudiandae!</p>
<p>Illo, reprehenderit? Ipsum velit aut, ducimus minima in accusamus aperiam ex cumque recusandae tenetur architecto nemo repellat asperiores eum. Corrupti blanditiis, odio sequi ea ducimus ipsam temporibus culpa asperiores dicta.</p>
<p>Maxime alias, natus veritatis quis mollitia itaque voluptate iure neque dolore, expedita eaque, in ea sunt quibusdam ut ducimus fugit doloribus! Corporis molestiae nobis quae nesciunt inventore alias sed error.</p>
<p>Id est repellendus pariatur harum, hic sequi vero ab mollitia corporis nisi, consequuntur eaque doloremque, suscipit nobis velit dolore totam exercitationem facere voluptas iure? Temporibus eius minus vero aut cumque!</p>
</article>
<aside>
<h4>In other news:</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, culpa.</p>
<p>Molestiae, officiis non esse perspiciatis provident a doloribus dignissimos sint!</p>
<p>Inventore nihil illum maxime ipsa repudiandae quia omnis quae consequuntur!</p>
</aside>
</main>
</div>
<footer class="footer">
Company Name | All rights reserved ©2020
</footer>
I'm trying to show message within a div with icon on the left.
Expected result is icon should always adjacent to text and together they need to be aligned at bottom-center of div.
I'm using :after pseudo element. Keeping position: absolute of icon didn't help since that needs manually adjusting the icon position relative to text.
Here is the CSS.
.parent{
font-weight: 500;
height: 65px;
text-align: center;
padding: 15px 0 10px;
margin: auto;
display: block;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.parent > div {
float: none;
/* display: table-cell; */
vertical-align: middle;
position: absolute;
bottom: 0;
width: 100%;
}
.msg:after {
content: '';
background: url(data:image/...);
height: 16px;
width: 16px;
display: block;
position: absolute;
top: 0;
padding-right: 5px;
left: 108px;
}
And markup:
<div class="parent">
<div class="msg">text goes here</div>
</div>
Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.parent {
font-weight: 500;
margin: auto;
padding: 1em;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
border: 1px solid red;
}
.msg {
display: flex;
}
.msg p {
padding-left: 1em;
}
.msg:before {
content: "";
height: 16px;
flex: 0 0 16px;
background: red;
border-radius: 100%;
}
<div class="parent">
<div class="msg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae numquam unde, eum sequi expedita fugiat ipsa exercitationem nesciunt libero repellendus aperiam excepturi, dolorem repudiandae eveniet alias perspiciatis, vero veniam tempora natus magnam
itaque quos. Nemo sit nisi, veniam mollitia fugit eaque reiciendis ex doloribus rem et suscipit debitis commodi sapiente.</p>
</div>
</div>