I have a transparent navbar which always keeps overlaying the main content.
HTML:
<!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>Navbar</title>
<link rel="stylesheet" href="styles.css">
<!-- <script src="index.js"></script> -->
</head>
<body>
<header id="header_main">
<div id="d1">
<h1 id="h1_title_responsive">YASH</h1>
</div>
<ul id="ul_nav">
<li class="li_nav" id="li1"><img src="logo.png" id="logo_img"></li>
<li class="li_nav" id="li2">Home</li>
<li class="li_nav" id="li3">About</li>
<li class="li_nav" id="li4">Contact</li>
<h1 id="h1_title">YASH</h1>
<li id="search_li"><input name="search" id="search_box" placeholder="Search this website" type="text"></li>
</ul>
</header>
<div id="d2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsam et quam eum placeat consequatur iure at rerum? Necessitatibus numquam facilis, fugiat non eum ipsum. Aperiam maxime provident harum quia!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa excepturi a nihil laudantium corporis fugit quisquam enim natus facilis dolor. Vitae quibusdam blanditiis atque, eligendi architecto hic repellat amet accusantium!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit enim natus? Aspernatur libero alias unde veniam cumque impedit cum corrupti facere consectetur molestiae laudantium, asperiores esse quis, autem saepe
</p>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
#header_main{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
}
body{
background: red;
}
.li_nav{
list-style: none;
margin: 0.9vh 1vw;
font-size: large;
z-index: 1;
font-weight: bolder;
}
a{
color: white;
text-decoration: none;
padding: 2px;
border-radius: 3px;
}
.a_text:hover{
color: black;
background: white;
}
#li1{
color: white;
}
#logo_img{
height: 40px;
width: auto;
}
#ul_nav{
display: flex;
align-items: center;
justify-content: left;
}
#h1_title{
color: white;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
}
#d1{
display: none;
}
#h1_title_responsive{
display: flex;
color: white;
justify-content: center;
position:relative;
width: 100vw;
}
#search_box{
border-radius: 7px;
height: 2em;
font-size: 80%;
font-weight: bolder;
width: 170%;
}
#search_li{
list-style: none;
position: absolute;
left: 75%;
width: 12.5%;
}
#d2{
height: 1000vh;
}
#media (max-width: 700px) {
#h1{
visibility: hidden;
}
#d1{
display: flex;
}
}
This is a screenshot of the issue:
[enter image description here][1]
https://i.stack.imgur.com/WgWoL.png
and in my css the #d2 is 1000vh because I want the navbar to work perfectly even when scrolling
The navbar position: fixed means that the navbar element is removed from the flow of the document.
You can find the full explanation of what position: fixed does here: https://developer.mozilla.org/en-US/docs/Web/CSS/position.
To prevent the navbar from covering the main content, you have to add either some padding or margin above the content.
#d2{
padding-top: // height of the navbar + some extra
}
The navbar has position fixed. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Fix this by adding a height to your navbar.
Example:
#header_main{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
height:50px; /*set to your own*/
}
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'm learning html/css, and while making a page, I want to test if I could make the color of a button to change from red to green when the width is under 900px. After multiple tests, the other properties work fine (bold text, text color) but the background-color of the button doesn't seem to change at all, and I can't find why.
The HTML code is :
<!DOCTYPE html>
<html lang="fr">
<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>Landing EST</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styleaccueil.css">
<!-- <link rel="stylesheet" href="styleaccueilphone.css"> -->
</head>
<body>
<header id="hautdepage">
<img class="logoheader" src="/">
Nos activités
Formulaire
Nous connaître
<a href="mailto:xxx" class="texteheader" target="_blank" >Nous contacter</a>
</header>
<div id="toutsaufheaderfooter" >
<div class="presentation">
<div class="textepresentation">
<h1 class="titrepresentation">Qui sommes nous ?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis atque consectetur ut amet laboriosam ratione fugit impedit velit, dolore in aliquid sint sit corporis ad sequi excepturi a tenetur molestiae eligendi ex delectus alias officia! Ratione dignissimos necessitatibus doloribus! Ipsa vel officiis optio, iure modi atque quo at aspernatur numquam.</p>
<div class="boutonspresentation" >
<a href="https://fr.linkedin.com" class="bouton1" target="_blank" >Faisons connaissance</a>
<a href="mailto:xxx" class="bouton1" target="_blank" >Contactez-nous</a>
</div>
</div>
<iframe src= "https://www.youtube.com/embed/weP6BLvfzG8" frameborder= "0" allowfullscreen></iframe>
</div>
<div class="deuxiemesalve">
<div class="deuxiemesalveparagraphetitre">
<div class="blocdeuxiemesalve" >
<h2 class="h2deuxiemesalve">Lorem ipsum dolor sit amet.</h2>
<p class="textedeuxiemesalve">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, tenetur quasi magnam fuga beatae eum voluptas repellat. Unde quam asperiores esse? Nesciunt praesentium enim aperiam culpa fugiat reprehenderit esse labore, nulla molestias. Hic debitis, officiis pariatur odit enim ut facere.</p>
</div>
<div class="blocdeuxiemesalve" >
<h2 class="h2deuxiemesalve">Lorem ipsum dolor sit amet.</h2>
<p class="textedeuxiemesalve">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, tenetur quasi magnam fuga beatae eum voluptas repellat. Unde quam asperiores esse? Nesciunt praesentium enim aperiam culpa fugiat reprehenderit esse labore, nulla molestias. Hic debitis, officiis pariatur odit enim ut facere.</p>
</div>
<div class="blocdeuxiemesalve" >
<h2 class="h2deuxiemesalve">Lorem ipsum dolor sit amet.</h2>
<p class="textedeuxiemesalve">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, tenetur quasi magnam fuga beatae eum voluptas repellat. Unde quam asperiores esse? Nesciunt praesentium enim aperiam culpa fugiat reprehenderit esse labore, nulla molestias. Hic debitis, officiis pariatur odit enim ut facere.</p>
</div>
</div>
</div>
<div class="troisiemesalve">
<img class="imagedouble" src="images/howscrumwork.jpg">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum laudantium vel non quas eum aliquid ut quo incidunt aspernatur in aperiam, nulla, commodi vitae placeat. Magni similique cum omnis quae!</p>
<img class="imagedouble" src="images/mecpostit.jpg">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum laudantium vel non quas eum aliquid ut quo incidunt aspernatur in aperiam, nulla, commodi vitae placeat. Magni similique cum omnis quae!</p>
</div>
</div>
<footer>
<div class="boitefooter">
<div class="footerun">
<p>ici on mettrais des liens vers les réseaux sociaux ou les mentions légales par exemple</p>
</div>
<div class="footerdeux">
<a class="retourvershautdepage" href="#hautdepage" > Retour en haut de page </a>
</div>
</div>
</footer>
</body>
</html>
The 1st CSS code is :
/* Reset CSS */
*{
margin: 0;
padding: 0;
/* box-sizing: border-box; */
}
body{
font-family: 'Lato', sans-serif;
width: 100%;
}
/*Ici je dis que toute la page sera en Lato sauf contradiction*/
/*Ici je me met le leins de la police Libre Franklin si besoin = font-family: 'Libre Franklin', sans-serif; */
header{
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
}
.logoheader{
min-width: 10%;
min-height: 10%;
max-width: 12%;
max-height: 12%;
margin : 1em
}
.texteheader{
margin: 1em;
color: black;
text-decoration:none;
}
.retourvershautdepage{
padding: 10px 30px;
background: rgb(192, 44, 44);
color: white;
text-decoration:none;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.retourvershautdepage:hover{
background: rgb(196, 104, 17);
}
.retourverspageaccueil{
padding: 10px 30px;
background: rgb(192, 44, 44);
color: white;
text-decoration:none;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.retourverspageaccueil:hover{
background: rgb(196, 104, 17);
}
footer{
margin-top: 3em;
text-align: center;
background-color: darkblue;
color: aliceblue;
width: 100%;
}
.boitefooter{
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: wrap;
}
#media only screen and (max-width:900px) {
.retourvershautdepage{
font-weight: bold;
background: rgb(44, 192, 44);
}
.retourvershautdepage:hover{
background: rgb(231, 217, 16);
}
}
.footerdeux{
margin-top: 15px;
}
The 2nd CSS is :
.presentation{
display: flex;
margin-top: 3em;
align-items: center;
justify-content: flex-end;
}
.presentation p{
margin-bottom: 20px;
}
.textepresentation{
width: 30%;
max-height: 15%;
margin-right: 8em;
}
a.bouton1 {
padding: 10px 30px;
margin: 5px;
background: rgb(0, 0, 95);
color: white;
text-decoration:none;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
a.bouton1:hover {
background: rgb(196, 17, 115);
}
iframe{
width: 900px;
height: 500px;
}
.deuxiemesalveparagraphetitre{
display: flex;
justify-content: space-evenly;
align-content: center;
align-items: center;
}
.deuxiemesalve{
display: flex;
justify-content: space-evenly;
align-content: center;
align-items: center;
margin-left: 7em;
margin-right: 7em;
text-align: center;
}
.h2deuxiemesalve{
margin-left: 2em;
margin-right: 2em;
margin-top: 3em;
}
.deuxiemesalveparagraphe{
display: flex;
justify-content: space-evenly;
align-content: center;
align-items: center;
}
.textedeuxiemesalve{
margin-left: 2em;
margin-right: 2em;
}
.troisiemesalve{
display: flex;
margin-top: 5em;
align-items: center;
}
.imagedouble{
width: 20%;
height: 15%;
margin-left: 2em;
margin-right: 2em;
}
.retourvershautdepage{
padding: 10px 30px;
background: rgb(192, 44, 44);
color: white;
}
#media only screen and (max-width: 900px) {
body{
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
font-family: 'Lato', sans-serif;
}
#toutsaufheaderfooter{
padding: 0 20px;
display: flex;
flex-direction: column;
}
.presentation{
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 15px;
}
iframe{
height: 248px;
width: 100%;
}
.textepresentation{
width: 95%;
padding: 15px 0;
margin-right: 0;
}
.boutonspresentation{
display: flex;
flex-direction: column;
}
.blocdeuxiemesalve{
padding: 15px 0;
}
.deuxiemesalve{
margin: 0;
margin-top: 15px;
}
.deuxiemesalveparagraphetitre{
display: flex;
flex-direction: column;
align-content: none;
align-items: none;
}
.h2deuxiemesalve{
margin: 0 0 15px 0;;
}
.textedeuxiemesalve{
margin: 0;
}
.troisiemesalve{
display: flex;
flex-direction: column;
margin-top: 0;
}
.imagedouble{
width: 60%;
padding: 10px 0;
margin: 15px 0;
}
}
Because your 2nd file define "retourvershautdepage backgroup color" again ,
You need to ensure #media is in the last of your css file , or it will be replaced by your 2nd file.
This is my first ever webpage:
https://karmah24.github.io/Coursera/mod2_sol/
In each of the sections the titles pizza, burger, beverages should be on the top right of the section. I've assigned each column: relative position, and the headers: absolute position. But this takes them out of normal document flow and when I view the page with different widths, the lorem epsum content moves up for different sizes.
How can I correct this? And why does the content in the paragraph tag move up for all the sizes since the header is taken out of the document flow?
Also how can I center the entire figure(image + caption)?
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1, .title2, .title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
position: absolute;
top: 0%;
right: 0%;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza" width="50%" height="50%">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger" width="50%" height="50%">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages" width="50%" height="50%">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
You can use float: right instead of position: absolute; so the text inside of the paragraph will float around your header.
Setup margin and padding to your paragraph. The browser default is different from browser to browser.
Don't use width="50%" height="50%" in img, they are outdated. Set it in CSS.
Use text-align: center; in section figure to set the content to center.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1,
.title2,
.title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
float: right;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
section p {
padding: 1%;
margin: 0;
}
section figure {
padding: 1%;
margin: 0;
text-align: center;
}
section img {
width: 50%;
height: auto;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
So first of all position: absolute removes the element out of the document flow, that means the space that the element take will be removed, so that's why other elements will move a little up.
So a way of setting the titles on the top right side and still take the space.
I will set the following for the parent element (section):
display: flex;
flex-direction: column;
And for the titles remove the position and top / left properties and add the following:
margin-left: auto;
When you set the margin-*direction*: auto it will move the element to the oposite direction.
Css flex module is a great way of creating layouts. Try learn it and it will make thing easier. source
Yes you should use CSS flex module or bootstrap 4, you can achieve this easily.
In the current code you should use px instead of % and column top padding should be similar of button height.
Currently experimenting with HTML and CSS and am struggling with this issue.
I'm messing around with a responsive website, and somehow can't make my navigation bar exceed the max-width of my navbar exceed the max-width of my content.
What I'd like it to look like https://imgur.com/a/KAk9mOi
I do really hope anyone can help me.
TIA.
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
max-width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main{
max-width: 600px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
https://jsfiddle.net/m0u79e8s/
I hope this is useful
* {
padding: 0px;
margin: 0px;
}
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main {
display: flex;
flex-direction: column;
align-items: center;
}
.content {
max-width: 460px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
<!doctype html>
<html>
<head>
<title>Responsive time</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./generic.css">
<link rel="stylesheet" href="./styles.css">
</head>
<html>
<body>
<main class="main">
<!-- Navigation elements -->
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<!-- Section -->
<section class="content">
<h1 class="test">Time to get responsive</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore deleniti, quia provident!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quas alias reiciendis velit, dolor eos temporibus culpa ex modi itaque nostrum natus doloribus sed maiores, a obcaecati quia sequi quisquam corrupti perspiciatis sit quam, qui expedita. Nemo sed dolor earum voluptate quod reiciendis rem laborum atque ex nulla sapiente ea ullam assumenda, fugiat quae incidunt dicta, cupiditate repellendus possimus aliquid! Ad veniam vero alias, rem quod atque dolores saepe possimus, tempora, eaque magnam culpa animi repellendus ratione dolorem harum quo.</p>
<!-- Form -->
<div class="login-card">
<form class="login" action="#" method="get">
<input class="login-input" type="email" placeholder="Indtast email">
<input class="login-input" type="password" placeholder="Indtast kodeord">
<button class="login-button">Send</button>
</form>
</div>
<picture>
<source media="(max-width:459px)" srcset="img/cow.jpg">
<source media="(min-width:460px)" srcset="img/dog.jpg">
<img src="/img/cow.jpg" alt="animals">
</picture>
</section>
<footer class="footer">
<div class="footer-content">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quas beatae voluptate.</p>
Some other link
</div>
<div class="footer-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi!</p>
<img class="logo-image" src="/rubbish" alt="">
</div>
</footer>
</main>
</body>
</html>
</html>
When I resize browsers window, my div gets down to bottom and a big space comes in top. I want that my div should remain in center of page even if resize the size of window lesser than size of div. In my school they haven't teach about this but I want to align this div in center of page
<!DOCTYPE html>
<html>
<head>
<title>CSS centering Done Right.</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body, .m {
height: 100%;
width: 100%;
}
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>
</head>
<body>
<title>CSS centering Done Right.</title>
<div class="m">
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, enim, possimus, voluptates, quia voluptatibus voluptas eum quaerat iure aperiam asperiores debitis fuga itaque quibusdam a ad odio assumenda iusto voluptatem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ex quia consequatur quae quasi amet veniam est quas error quos perferendis ducimus non similique in soluta magnam dolore molestias veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, doloremque iste magni in eveniet ipsa odio mollitia eligendi magnam placeat aliquam hic reprehenderit reiciendis itaque assumenda ratione delectus. Alias, quis.</div>
</div>
</body>
</html>
margin: auto; is what you need. Try this:
<style>
* {
margin: 0;
padding: 0;
}
/*html, body, .m {
height: 100%;
width: 100%;
}*/
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
margin: auto;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>