I am new at HTML and want to know how to fix the position of my elements in a window because every time I try to minimize the window everything becomes messy. I am about to make a website and this is my first try so bear with errors. Here's my code:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header .choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="LB21.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
</header>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
The image below shows the issues I'm having:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
max-height: 1000px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size:calc(34px + 2.2vw);
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}.choice {
display: flex;
justify-content: space-evenly;
max-width: 900px
}
.choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
cursor: pointer;
border-radius: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
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've set up a simple responsive HTML/CSS page that could be used as HTML Email and although it's responsive on website, when I try to send it with gmail, it messes everything up. The logos get smaller, the button gets no style whatsoever. Sometimes when I try to send the email it shows the items in horizontal way and not vertical like I want.
I have tried sending the email with multiple online providers for such service but the code is always wrong, also I have read that inline styling is better and I've tried that as well but still to no avail.
Below is my code
<!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>Document</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Saira:wght#100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: rgb(187, 187, 187);
padding: 10%;
font-family: 'Montserrat', sans-serif;
font-family: 'Saira', sans-serif;
}
.container {
background-color: white;
display: flex;
flex-direction: column;
}
.header {
height: 130px;
display: flex;
align-items: center;
width: 100%
}
#logo {
max-height: 60%;
margin-left: 2vw;
max-width: 100%
}
#banner {
max-width: 100%;
}
.titulli {
display: flex;
justify-content: center;
font-size: 3vw;
}
.teksti {
background-color: rgb(236, 236, 236);
}
p {
margin: 2vw 10vw 2vw 10vw;
}
.butonat{
display: flex;
flex-direction: column;
align-items: center;
margin: 5vw;
}
#butoni{
margin-bottom: 3vw;
font-size: 4vw;
font-weight: bold;
height: 10vw;
width: 30vw;
border:none;
background-color: rgb(255, 230, 0);
border-radius: 10%;
}
.grupiLogot{
display: flex;
flex-direction: row;
}
.logot {
max-width: 7vw;
padding: 0.5vw;
}
.footeri{
color: rgb(255,230,0);
background-color: rgb(27, 27, 27);
display: flex;
flex-direction: column;
align-items: center;
padding: 4vw 0 4vw 0;
}
h4{
margin: 0.2vw;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<!-- <img id="logo" src="logo.png" alt=""> -->
<img id="logo" src="https://i.ibb.co/GtY9kYz/logo2.png" alt="">
</div>
<img id="banner" src="https://i.ibb.co/LtG9PDg/banner.png" alt="">
<div class="titulli">
<h2>20% Off Summer Sale Now!</h2>
</div>
<div class="teksti">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias necessitatibus eos inventore minus
velit, quas fugiat expedita explicabo consequuntur ea enim temporibus nostrum deserunt, veniam,
voluptatum assumenda libero nesciunt ipsa.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nemo tenetur sunt eligendi quae maxime
nesciunt! Iure consequatur ad quaerat.</p>
</div>
<div class="butonat">
<button id="butoni">SHOP NOW</button>
<div class="grupiLogo">
<img src="https://i.ibb.co/XY5W1hV/facebook.png" alt="" class="logot">
<img src="https://i.ibb.co/JdSsCN3/instagram.png" alt="" class="logot">
<img src="https://i.ibb.co/Cv91mdp/twitter.png" alt="" class="logot">
<img src="https://i.ibb.co/j3rdqgk/whatsapp.png" alt="" class="logot">
</div>
</div>
<div class="footeri">
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
</div>
</div>
</body>
</html>
Here are screenshots from how it shows on Iphone: https://imgur.com/a/6ZZEpXt
You need to get familiar with what is supported and what isn't. One service that does this is caniemail.com. Flex, for example, is not supported.
Generally people resort to table layouts due to Outlook desktop on Windows.
There are some versions of Gmail, amongst other email environments, that disregard your <style> section(s), so you do need to inline the styles too.
Search for 'fluid hybrid email' for a basic structure to get you going.
You may need emailresourc.es too for a wide range of information.
I have tried my best to solve the issue but it's not working. I want to make a gradient border on my website for a slideshow (similar to the one on this video). I used (:before) pseudo selector here is my HTML code:
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
border: 2px solid red;
height: 75vh;
width: 95%;
margin: 2% auto;
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: white;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
Please tell me the mistake I am making and why my z-index is not working correctly. In my view, I have written the code correctly.
Is this something that you are looking for?
You can see that I recreated the example based on this video that you have provided.
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
margin: 2% auto;
height: 75vh;
width: 95%;
background: linear-gradient(0deg, #000, #262626);
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
What you were missing in your code to see the text was the line below:
.slide-box {
background: linear-gradient(0deg, #000, #262626);
}
The z-index worked just fine but because your background color was white and also the text color was white, you could not see the text.
Here is the code how you can achieve gradient border(code is copied from css-tricks). For more please visit here
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.module {
background: #222;
color: white;
padding: 2rem;
}
<div class="module-border-wrap">
<div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div>
</div>
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.
Link to project
I've have finally managed to get the header layout I want but one thing I can't get done and that is the alignment of the text (h2 and h3) in the left sidebar. I have tried to do it with a fixed proportie but it get side-effects and I think it has something to do with the rotated text.
The main title should be in left bottom, on one line and the date should be on the right of the main title also on one line. Those combined must align at center of the side-main text aligned to the left.
Edit: Link to layout
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
margin-top: 60px;
width: 70px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.agenda-text {
width: 100%;
color: #FFF;
transform: rotate(-90deg);
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Many thanks in advance!
Hope you can help me out.
Regards,
Jason
This doesn't look super polished as a whole yet, but I believe it does solve your issue with the rotation of the side-main.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main-wrapper">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Css:
*{
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header{
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav{
position: fixed;
width: 100%;
height: 60px;
background: rgba(255,255,255,.2);
}
.side-main-wrapper {
transform: rotate(-90deg);
margin-top: 60px;
}
.side-main{
display: flex;
flex-direction: column;
height: 70px;
width: calc(100vh - 60px);
border-bottom: 1px rgba(255,255,255,.2) solid;
}
.agenda-text{
color: #FFF;
text-transform: uppercase;
}
.header-main{
height: calc(100vh - 60px);
margin-top: 60px;
}
Rather than rotating the entries of the flex column, I wrapped the side-main in a side-main-wrapper and rotated that. Then I just treated the side-main as a regular flex column, and it started behaving.
I added flex: 1; and some margin-left to .agenda-text and then opened up the .side-main width a bit. Hope this is something like what you are looking for, but just guessing since you didn't specify
Edit: Looks wack in preview and fullscreen... but works in the actual edit jsfiddle screen... maybe this is not a good answer
Edit Took out flex: 1 and margin-left. I've made it look how you described, but with an issue. I think a big step forward is adding a container around the .agenda-texts and then rotate that instead of the text. The problem with my approach is that the flex positioning is based on the width of the sidebar, before everything gets turned sideways. So with a left bar width like 300px it works but with a smaller width like you are looking for probably not. Can't imagine making this fully responsive without doing the whole thing over
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
height: calc(100vh - 60px);
margin-top: 60px;
width: 300px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.side-main-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
transform: rotate(-90deg);
}
.agenda-text {
color: #FFF;
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<div class="side-main-title">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>