I'm creating a MailChimp HTML email template and have the structure sorted.
I have an image that I created in illustrator that I want as the background for midContent. I want the lightblue part of this background image to overlap the above image. I've tried using z-index, but it doesn't seem to work. Is the flex-box column right for this kind of task, or should I use something else?
.templateContainer{
max-width:450px !important;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#templateHeader img {
text-align: center;
height: 150px;
padding: 5px 0;
}
#templateHeader, #postheader {
text-align: center;
}
#postheader {
height: 75px;
background-color: #EAEAEA;
}
#postheader-container {
width: 90%;
height: 100%;
margin: 0 5%;
}
#postheader-container p {
text-align: center;
font-family: helvetica-light;
font-size: 14px;
color: #039FD6;
margin: 0 auto;
padding: 20px 0px;
}
#templateBody {
height: 495px;
}
.center {
display:flex;
align-items:center;
justify-content:center;
}
#topContent {
height: 225px;
width: 100%;
}
#topContent img {
width: inherit;
}
#midContent {
background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
z-index: 1;
background-size: cover;
background-position: 100% 0%;
width: 100%;
}
#midContent p {
padding: 40px 25px 0px 25px;
text-align: center;
color: #ffffff;
font-family: helvetica-light;
font-size: 16px;
margin: 0 auto;
}
#bottomContent {
width: 100%;
height: 125px;
margin-top: 1%;
}
#bottom-container {
height: auto;
width: 70%;
margin: 0% 15% 0% 15%;
}
#bottom-container button {
width: 85%;
padding: 10px;
margin: 3% 7% 0 7%;
font-family: helvetica-light;
font-weight: bold;
font-size: 12px;
color: #ffffff;
background-color: #0B409E;
text-transform: uppercase;
border-radius: 8px;
border-color: transparent;
}
#templateFooter {
width: 100%;
height: 30px;
background-color: #ECECEC;
}
#footer-container {
width: 90%;
margin: 0 5% 0 5%;
padding-top: 10px;
}
#footer-container p {
text-align: center;
font-family: helvetica-light;
font-size: 8px;
font-weight: bold;
color: #000000;
margin: 0 auto;
}
span {
color: #0B409E;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="templateContainer">
<!-- BEGIN HEADER // -->
<div id="templateHeader">
<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
<div id="postheader">
<div id="postheader-container" class="center">
<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
</div>
</div>
</div>
<!-- // END HEADER -->
<!-- BEGIN BODY // -->
<div id="templateBody">
<div id="topContent" class="center">
<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
</div>
<div id="midContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
</div>
<div id="bottomContent">
<div id="bottom-container">
<button>This is a button</button>
<button>Another button</button>
</div>
</div>
</div>
<!-- // END BODY -->
<!-- BEGIN FOOTER // -->
<div id="templateFooter">
<div id="footer-container">
<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
</div>
<!-- // END FOOTER -->
</div>
</body>
</html>
use position:relative with z-index:10000 for #midContent
position:relative;
z-index: 10000;
.templateContainer{
max-width:450px !important;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#templateHeader img {
text-align: center;
height: 150px;
padding: 5px 0;
}
#templateHeader, #postheader {
text-align: center;
}
#postheader {
height: 75px;
background-color: #EAEAEA;
}
#postheader-container {
width: 90%;
height: 100%;
margin: 0 5%;
}
#postheader-container p {
text-align: center;
font-family: helvetica-light;
font-size: 14px;
color: #039FD6;
margin: 0 auto;
padding: 20px 0px;
}
#templateBody {
height: 495px;
}
.center {
display:flex;
align-items:center;
justify-content:center;
}
#topContent {
height: 225px;
width: 100%;
}
#topContent img {
width: inherit;
}
#midContent {
background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
position:relative;
z-index: 10000;
background-size: cover;
background-position: 100% 0%;
width: 100%;
}
#midContent p {
padding: 40px 25px 0px 25px;
text-align: center;
color: #ffffff;
font-family: helvetica-light;
font-size: 16px;
margin: 0 auto;
}
#bottomContent {
width: 100%;
height: 125px;
margin-top: 1%;
}
#bottom-container {
height: auto;
width: 70%;
margin: 0% 15% 0% 15%;
}
#bottom-container button {
width: 85%;
padding: 10px;
margin: 3% 7% 0 7%;
font-family: helvetica-light;
font-weight: bold;
font-size: 12px;
color: #ffffff;
background-color: #0B409E;
text-transform: uppercase;
border-radius: 8px;
border-color: transparent;
}
#templateFooter {
width: 100%;
height: 30px;
background-color: #ECECEC;
}
#footer-container {
width: 90%;
margin: 0 5% 0 5%;
padding-top: 10px;
}
#footer-container p {
text-align: center;
font-family: helvetica-light;
font-size: 8px;
font-weight: bold;
color: #000000;
margin: 0 auto;
}
span {
color: #0B409E;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="templateContainer">
<!-- BEGIN HEADER // -->
<div id="templateHeader">
<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
<div id="postheader">
<div id="postheader-container" class="center">
<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
</div>
</div>
</div>
<!-- // END HEADER -->
<!-- BEGIN BODY // -->
<div id="templateBody">
<div id="topContent" class="center">
<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
</div>
<div id="midContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
</div>
<div id="bottomContent">
<div id="bottom-container">
<button>This is a button</button>
<button>Another button</button>
</div>
</div>
</div>
<!-- // END BODY -->
<!-- BEGIN FOOTER // -->
<div id="templateFooter">
<div id="footer-container">
<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
</div>
<!-- // END FOOTER -->
</div>
</body>
</html>
Related
After moving things around, I tried to change the position: absolute to position: relative of the actual iframe class, it made the video position under 'Featured' but the dimension of the video is messed up. If I change it back to position: absolute, the video covers the entire page banner, but the responsiveness is good, however the dimension is too big. How do I make it look like the video is under the Featured page, aligned in the center, and responsive as well?
This is my code:
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
#media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
#media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
#media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
#media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
#media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
Your code is a mess to be honest. You have multiple div without closing tag,p without closing tags,
also some = are missing while declaring classes in your html code.
First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.
Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
i had been working on a project in the past days but i came across with a visual error that show my boxes doesn't have a proper right margin.
i had tried changing the flex on css but i didn't get other good results to fix this so i ha to scrap that idea
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
margin-right: 5%;
margin-left: 30%;
margin-top: 5%;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
margin-left: 1%;
margin-right: 70%;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
/* Flex container */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
/* Make post larger than form */
.post {
flex: 3;
margin-left: -65%;
}
.form {
flex: 1;
}
.tema {
background-color: white;
margin-top: 20px;
margin-left: 2%;
padding: 20px;
border-radius: 15px;
}
.thumbnail {
border: solid;
width: 100%;
height: 100px;
}
.titulo-tema {
text-align: center;
}
.boton-tema {
background-color: #00b300;
text-align: center;
padding: 20px;
margin-left: 150px;
margin-right: 150px;
margin-top: 20px;
border-radius: 15px;
}
.boton-tema:hover {
background-color: #004d00;
-moz-transition-duration: 0.3s;
}
.container-temas {
display: flex;
justify-content: space-between;
padding: 20px;
flex-wrap: wrap;
}
#media screen and (min-width: 480px) {
ul {
margin-left: 0%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -40%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 50px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 50px;
}
}
#media screen and (min-width: 767px) {
ul {
margin-left: 35%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -80%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 70px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 70px;
}
}
#media screen and (min-width: 1030px) {
ul {
margin-left: 75%;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: -65%;
margin-bottom: 0%;
margin-right: 0%;
}
.form {
margin-right: 70%;
margin-left: 0%;
margin-bottom: 0%;
}
li {
padding: 20px;
}
h1 {
font-size: 30px;
}
p {
font-size: 20px;
}
.titulo-tema {
font-size: 30px;
}
}
<html>
<head>
<title>math lizard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<ul>
<a href="">
<li>tema 1</li>
</a>
<a href="">
<li>tema 2</li>
</a>
<a href="">
<li>tema 3</li>
</a>
</ul>
</div>
<div class="container-temas">
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p class="descripcion-breve">Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tincidunt vehicula. Sed nec ante molestie, dignissim sapien et, finibus felis. Mauris a enim eget sapien laoreet interdum id a tellus. Duis blandit et lorem non aliquet. Vivamus
id tellus ut eros finibus tempor ac ac sem. Etiam lacinia nisl eu varius ullamcorper. Vestibulum finibus ligula aliquam ipsum fringilla, nec luctus dolor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est est, aliquet
ut commodo at, luctus sit amet nunc. Aenean in aliquet neque, vitae commodo tellus. Nulla et semper massa. Quisque tristique turpis ante, non semper libero fringilla a. Praesent et arcu id massa semper iaculis. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
</div>
</body>
</html>
i just expect to get a proper margin so this problem won't happend everytime a long text is posted on the index
It's hard for me to tell exactly where you are wanting your end result to be, and I cannot comment due to the fact I don't have 50 reputation. However, after looking over the code, rather than doing a flexbox, you could simply add a "width: 40%" to the .tema class. This will keep the divs from expanding into the other area (I personally don't think the margin is the best way to go with it, at least it isn't what I would do.) Here is the code for this, if I am understanding what you want your end result to be correctly (having the large text div not overflow into the right area). This should at least fix part of the area, but note this code does not fix your media queries nor other classes.. I hope I answered this in the way you were looking
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
margin-right: 5%;
margin-left: 30%;
margin-top: 5%;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
margin-left: 1%;
margin-right: 70%;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
/* Flex container */
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
/* Make post larger than form */
.post {
flex: 3;
margin-left: -65%;
}
.form {
flex: 1;
}
.tema {
background-color: white;
margin-top: 20px;
margin-left: 2%;
padding: 20px;
border-radius: 15px;
width: 40%;
}
.thumbnail {
border: solid;
width: 100%;
height: 100px;
}
.titulo-tema {
text-align: center;
}
.boton-tema {
background-color: #00b300;
text-align: center;
padding: 20px;
margin-left: 150px;
margin-right: 150px;
margin-top: 20px;
border-radius: 15px;
}
.boton-tema:hover {
background-color: #004d00;
-moz-transition-duration: 0.3s;
}
.container-temas {
display: flex;
justify-content: space-between;
padding: 20px;
flex-wrap: wrap;
}
#media screen and (min-width: 480px) {
ul {
margin-left: 0%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -40%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 50px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 50px;
}
}
#media screen and (min-width: 767px) {
ul {
margin-left: 35%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -80%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 70px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 70px;
}
}
#media screen and (min-width: 1030px) {
ul {
margin-left: 75%;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: -65%;
margin-bottom: 0%;
margin-right: 0%;
}
.form {
margin-right: 70%;
margin-left: 0%;
margin-bottom: 0%;
}
li {
padding: 20px;
}
h1 {
font-size: 30px;
}
p {
font-size: 20px;
}
.titulo-tema {
font-size: 30px;
}
}
<div class="nav">
<ul>
<a href="">
<li>tema 1</li>
</a>
<a href="">
<li>tema 2</li>
</a>
<a href="">
<li>tema 3</li>
</a>
</ul>
</div>
<div class="container-temas">
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p class="descripcion-breve">Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tincidunt vehicula. Sed nec ante molestie, dignissim sapien et, finibus felis. Mauris a enim eget sapien laoreet interdum id a tellus. Duis blandit et lorem non aliquet. Vivamus id
tellus ut eros finibus tempor ac ac sem. Etiam lacinia nisl eu varius ullamcorper. Vestibulum finibus ligula aliquam ipsum fringilla, nec luctus dolor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est est, aliquet
ut commodo at, luctus sit amet nunc. Aenean in aliquet neque, vitae commodo tellus. Nulla et semper massa. Quisque tristique turpis ante, non semper libero fringilla a. Praesent et arcu id massa semper iaculis. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; </p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
</div>
So, I made a really cool website. Then, in a separate file, I made a really cool navigation bar. However, when I put them together, the navigation bar is gone. The background of the very first div called "list" should be filled and should bigger, however, it is not. Hopefully, someone can help me to have the navigation bar and site on the same page. Thanks!
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
}
.list a {
margin-top: 20px;
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
}
.list a:hover {
background-color: #70b5ff;
color: #111111;
}
.list a.on {
background-color: #81ff7c;
color: #005604;
}
.imagefornav {
width: 160px;
height: 100px;
}
body, html {
height: 100%;
margin: 0;
margin-top: 0;
padding: 0;
font-family: Verdana, sans-serif;
line-height: 35px;
font-weight: 300;
color: #797a7c;
}
.title {
letter-spacing: 5px;
color: #1d3863;
text-align: center;
text-decoration: underline overline;
font-size: 35px;
line-height: 75px;
margin-top: 13%;
text-transform: uppercase;
opacity: 1.00;
padding-right: 370px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 370px;
animation: Fadein 2s ease-in;
}
#keyframes Fadein {
from {
opacity: 0;
}
to {
opacity: 0.80;
}
}
.imgc1, #imgc2, #imgc3, #imgc4 {
position: relative;
opacity: 0.80;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.imgc1 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 700px;
width: 100%;
margin: 0;
margin-top: -16px;
}
.border1 {
padding: 1px;
background-color: #111;
font-family: arial, sans-serif;
}
#imgc2 {
background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
height: 600px;
background-position: center right;
}
#Imgtxt1 {
font-size: 41px;
line-height: 100px;
color: #111111;
padding-top: 100px;
}
#imgc3 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 650px;
}
#section1 {
text-align: center;
padding: 50px 70px;
font-size: 19px;
}
#section2 {
text-align: center;
padding: 50px 70px;
background-color: #666;
color: #f4f4f4;
height: 50%;
margin: 0px;
}
#section3 {
height: 400px;
width: 100%;
}
.invis {
visibility: hidden;
}
#BF {
font-size: 15px;
animation: Comein 200s ease-in;
padding-left: 0px;
text-align: left;
visibility: hidden;
opacity: 0;
}
#keyframes Comein {
0% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
6% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
7% {
opacity: 1;
padding-left: 600px;
visibility: visible;
}
100% {
padding-left: 601px;
opacity: 1;
}
}
#ranger {
font-size: 25px;
padding-left: 5px;
}
#borderabout {
background-color: #666;
width: 100%;
color: #FFFFFF;
text-align: center;
border-radius: 25px;
opacity: 0.70;
}
#borderourgoal {
font-size: 35px;
line-height: 70px;
}
#ourgoal {
letter-spacing: 10px;
}
#you {
font-size: 60px;
}
#about {
letter-spacing: 10px;
}
#border3 {
background-color: #1be2e5;
opacity: 0.60;
height: 650px;
color: #111111;
}
#opacityforborder3 {
padding-top: 200px;
font-size: 30px;
}
#imgtxt2 {
height: 100%;
}
.button1 {
border-radius: 15px;
margin-top: 80px;
margin-left: 605px;
border: none;
background-color: #666;
color: #FFFFFF;
padding: 20px;
text-align: center;
text-decoration: none;
font-size: 25px;
}
.button1:hover {
background-color: #FFFFFF;
color: #666;
border-style: solid;
border-width: 1.5px;
border-color: #666;
}
#contacts {
font-size: 25px;
text-align: center;
width: 100%;
}
#button2 {
padding: 10px;
margin-left: 300px;
height: 100px;
width: 100px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
border: none;
border-radius: 25px;
margin-top: 25px;
}
#button2:hover {
padding: 10px;
margin-left: 285px;
height: 140px;
width: 140px;
background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
border: none;
border-radius: 25px;
margin-top: 5px;
}
#Mygmail {
font-size: 20px;
margin-left: 290px;
margin-bottom: 0px;
width: 75%;
}
#dots {
visibility: hidden;
}
#refs {
float: right;
margin-right: 10px;
}
#linktext {
font-size: 17px;
margin-left: 35px;
}
#link01 {
margin-left: 300px;
}
#link1 {
margin-left: 170px;
}
#link2 {
margin-left: 60px;
}
#link3 {
margin-left: 125px;
}
#link4 {
margin-left: 50px;
}
a {
color: #60d16b;
}
#imgc4 {
background-color: #666;
height: 300px;
color: #FFFFFF;
}
#image1 {
height: 265px;
width: 400px;
margin-top: 20px;
margin-left: 20px;
}
#byme {
margin-left: 350px;
font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<title>Resource Rangers</title>
<link href="CSS for 4th project (1).css" rel="stylesheet">
</head>
<style>
</style>
<body>
<div class="List">
<a class="a1" href="about.asp">Lack of Water</a>
Waters Journey
How
Why?
<a class="on" href="default.asp">Home</a>
</div>
<div class="imgc1"><br>
<div class="title">
<div class="border1">
<h3 align="center"> Resource Rangers </h3>
</div>
</div>
</div>
<div id="section1">
<div id="about">
<h2> About </h2>
</div>
<section>
<div id="borderabout">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit
felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula
condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque
lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam
porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum
dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus
venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim
blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend
leo. <span id="ranger">Resource Ranger!</span>
</p>
</div>
</section>
</div>
<div id="imgc2">
<div id="Imgtxt1">
<div id="border2">
<h1 align="center"> "When the Wells dry, we know the worth of water"
<span class="invis">.</span>
<div id="BF"> - Benjamin Franklin </div>
</h1>
</div>
</div>
</div>
<div id="section2">
<section>
<div id="ourgoal">
<h2> Our Goal </h2>
</div>
<div id="borderourgoal">
<p>
<span id="you">You</span> to be inspired to and help you get involved, for the benefit of our
community of , as well as the global community, and our planet.
</p>
</div>
</section>
</div>
<div id="imgc3">
<div id="Imgtxt2">
<div id="border3">
<div id="opacityforborder3">
<h1 align="center" class="moreinfo"> To find out more information </h1>
<button class="button1" onclick="location.href = 'default.asp';">Click Here</button>
</div>
</div>
</div>
</div>
<div id="section3">
<span id="contacts">
<h2> Contacts </h2>
</span>
<div id="Mygmail">
<h3> My Gmail
<span id="dots">......................................................</span>More References
</h3>
</div>
<div id="stuff1">
<button id="button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
<span id="refs"> <span id="linktext">Here are some more links if you are looking to go more in depth into
water conservation! </span><br>
<span id="link01">https://saveourwater.com</span><br>
<span id="link1"> https://www.farnellfamily.com/cfarnell/why/default.html</span><br>
<span id="link2"> https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/</span><br>
<span id="link3"> https://www.constellation.com/energy-101/water-conservation-tips0.html</span><br>
<span id="link4"> https://www.lipsum.com/feed/html</span></span>
</div>
</div>
<div id="imgc4">
<div id="Imgtxt3">
<div id="border4">
<img id="image1" src="wix3.png">
<span id="byme">By All rights reserved</span>
</div>
</div>
</div>
</body>
<script type="text/javascript"></script>
</html>
In your html you apply the class List.
however, in your CSS you call .list (lowercase l).
Change your HTML class to list and it will work.
Edited the snippet. In the html use 'list' instead of 'List'. Also I have made, .list position as fixed.
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
position: fixed;
top: 0;
z-index: 1000;
}
.list a {
margin-top: 20px;
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
}
.list a:hover {
background-color: #70b5ff;
color: #111111;
}
.list a.on {
background-color: #81ff7c;
color: #005604;
}
.imagefornav {
width: 160px;
height: 100px;
}
body, html {
height: 100%;
margin: 0;
margin-top: 0;
padding: 0;
font-family: Verdana, sans-serif;
line-height: 35px;
font-weight: 300;
color: #797a7c;
}
.title {
letter-spacing: 5px;
color: #1d3863;
text-align: center;
text-decoration: underline overline;
font-size: 35px;
line-height: 75px;
margin-top: 13%;
text-transform: uppercase;
opacity: 1.00;
padding-right: 370px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 370px;
animation: Fadein 2s ease-in;
}
#keyframes Fadein {
from {
opacity: 0;
}
to {
opacity: 0.80;
}
}
.imgc1, #imgc2, #imgc3, #imgc4 {
position: relative;
opacity: 0.80;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.imgc1 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 700px;
width: 100%;
margin: 0;
margin-top: -16px;
}
.border1 {
padding: 1px;
background-color: #111;
font-family: arial, sans-serif;
}
#imgc2 {
background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
height: 600px;
background-position: center right;
}
#Imgtxt1 {
font-size: 41px;
line-height: 100px;
color: #111111;
padding-top: 100px;
}
#imgc3 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 650px;
}
#section1 {
text-align: center;
padding: 50px 70px;
font-size: 19px;
}
#section2 {
text-align: center;
padding: 50px 70px;
background-color: #666;
color: #f4f4f4;
height: 50%;
margin: 0px;
}
#section3 {
height: 400px;
width: 100%;
}
.invis {
visibility: hidden;
}
#BF {
font-size: 15px;
animation: Comein 200s ease-in;
padding-left: 0px;
text-align: left;
visibility: hidden;
opacity: 0;
}
#keyframes Comein {
0% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
6% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
7% {
opacity: 1;
padding-left: 600px;
visibility: visible;
}
100% {
padding-left: 601px;
opacity: 1;
}
}
#ranger {
font-size: 25px;
padding-left: 5px;
}
#borderabout {
background-color: #666;
width: 100%;
color: #FFFFFF;
text-align: center;
border-radius: 25px;
opacity: 0.70;
}
#borderourgoal {
font-size: 35px;
line-height: 70px;
}
#ourgoal {
letter-spacing: 10px;
}
#you {
font-size: 60px;
}
#about {
letter-spacing: 10px;
}
#border3 {
background-color: #1be2e5;
opacity: 0.60;
height: 650px;
color: #111111;
}
#opacityforborder3 {
padding-top: 200px;
font-size: 30px;
}
#imgtxt2 {
height: 100%;
}
.button1 {
border-radius: 15px;
margin-top: 80px;
margin-left: 605px;
border: none;
background-color: #666;
color: #FFFFFF;
padding: 20px;
text-align: center;
text-decoration: none;
font-size: 25px;
}
.button1:hover {
background-color: #FFFFFF;
color: #666;
border-style: solid;
border-width: 1.5px;
border-color: #666;
}
#contacts {
font-size: 25px;
text-align: center;
width: 100%;
}
#button2 {
padding: 10px;
margin-left: 300px;
height: 100px;
width: 100px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
border: none;
border-radius: 25px;
margin-top: 25px;
}
#button2:hover {
padding: 10px;
margin-left: 285px;
height: 140px;
width: 140px;
background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
border: none;
border-radius: 25px;
margin-top: 5px;
}
#Mygmail {
font-size: 20px;
margin-left: 290px;
margin-bottom: 0px;
width: 75%;
}
#dots {
visibility: hidden;
}
#refs {
float: right;
margin-right: 10px;
}
#linktext {
font-size: 17px;
margin-left: 35px;
}
#link01 {
margin-left: 300px;
}
#link1 {
margin-left: 170px;
}
#link2 {
margin-left: 60px;
}
#link3 {
margin-left: 125px;
}
#link4 {
margin-left: 50px;
}
a {
color: #60d16b;
}
#imgc4 {
background-color: #666;
height: 300px;
color: #FFFFFF;
}
#image1 {
height: 265px;
width: 400px;
margin-top: 20px;
margin-left: 20px;
}
#byme {
margin-left: 350px;
font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<title>Resource Rangers</title>
<link href ="CSS for 4th project (1).css" rel ="stylesheet">
</head>
<style>
</style>
<body>
<div class="list">
<a class= "a1" href="about.asp">Lack of Water</a>
Waters Journey
How
Why?
<a class= "on" href="default.asp">Home</a>
</div>
<div class= "imgc1">
<br>
<div class= "title">
<div class= "border1">
<h3 align="center"> Resource Rangers </h3>
</div>
</div>
</div>
<div id= "section1">
<div id= "about">
<h2> About </h2>
</div>
<section>
<div id= "borderabout">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend leo. <span id= "ranger">Resource Ranger!</span>
</p>
</div>
</section>
</div>
<div id= "imgc2">
<div id="Imgtxt1">
<div id= "border2">
<h1 align="center"> "When the Wells dry, we know the worth of water"
<span class= "invis">.</span> <div id= "BF"> - Benjamin Franklin </div> </h1>
</div>
</div>
</div>
<div id= "section2">
<section>
<div id= "ourgoal">
<h2> Our Goal </h2>
</div>
<div id= "borderourgoal">
<p>
<span id= "you">You</span> to be inspired to and help you get involved, for the benefit of our community of , as well as the global community, and our planet.
</p>
</div>
</section>
</div>
<div id= "imgc3">
<div id="Imgtxt2">
<div id= "border3">
<div id= "opacityforborder3">
<h1 align="center" class= "moreinfo"> To find out more information </h1>
<button class= "button1" onclick="location.href = 'default.asp';">Click Here</button>
</div>
</div>
</div>
</div>
<div id= "section3">
<span id= "contacts">
<h2> Contacts </h2>
</span>
<div id= "Mygmail">
<h3> My Gmail<span id= "dots">......................................................</span>More References</h3></div>
<div id= "stuff1">
<button id= "button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
<span id= "refs"> <span id= "linktext">Here are some more links if you are looking to go more in depth into water conservation! </span><br>
<span id="link01">https://saveourwater.com</span>
<br>
<span id= "link1"> https://www.farnellfamily.com/cfarnell/why/default.html</span><br>
<span id= "link2"> https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/ </span><br>
<span id= "link3"> https://www.constellation.com/energy-101/water-conservation-tips0.html</span><br>
<span id= "link4"> https://www.lipsum.com/feed/html</span></span>
</div>
</div>
<div id= "imgc4">
<div id="Imgtxt3">
<div id= "border4">
<img id= "image1" src="wix3.png">
<span id="byme">By All rights reserved</span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
in your html class name "List" where as in css its "list". change "List" to "list" in html. please keep the class name in html and css same. or else they will not work.
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
}
<div class="List">
</div>
<!-- in the above class name is "List". change it to "list" -->
<div class="list">
</div>
I am trying to get images to keep the same ratio when they are placed in a div, next to text.
This is what it currently looks like. As you can see the images are stretched to how high the div is that contains the text next to it.
This is the HTML:
<body>
<div id="content" class="content">
<div id="title" class="title">
Sports
</div>
<nav class="nav_bar">
<ul>
<li>Home</li>
<li class="active">Sport</li>
<li>Academics</li>
<li>Other</li>
<li>Stats</li>
</ul>
</nav>
<div id="page_description" class="page_description">
One of my main objectives for the first term of university was to get back my fitness. I decided to do this through going to the gym and playing futsal.
</div>
<div id="gym" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/gym.jpeg" class="pic" alt="The Gym logo"/>
</div>
</div>
<hr class="hr_divider">
<div id="5-aside" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
5 Aside Footy
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/5-aside.jpeg" class="pic" alt="5 Aside"/>
</div>
</div>
<hr class="hr_divider">
</div>
</body>
And here is the CSS:
.page_description {
background-color:rgba(555,555,555,0.5);
width: 40%;
margin-left: auto;
margin-right: auto;
font-size: large;
border-radius: 8px;
margin-bottom: 2%;
}
.main_container {
width: 40%;
margin-left: auto;
margin-right: auto;
/* overflow: hidden; */
background-color:rgba(555,555,555,0.5);
border-radius: 8px;
display: flex;
/* margin-bottom: 5%; */
}
.other_div {
float: left;
min-width: 60%;
max-width: 60%;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
}
.activity_title_hours{
display: flex;
}
.activity_title {
float: left;
font-size: 35px;
text-decoration: underline;
height: 100%;
/* width: 50%; */
line-height: 40px;
}
.activity_hours {
float: left;
font-size: 25px;
min-height: 100%;
line-height: 40px;
text-align: left;
}
.pic {
float: right;
/* min-width: 35%; */
box-sizing: border-box;
margin-top: 1%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
padding-top: 5%;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.activity_description p {
font-size: 20px;
}
hr {
border-width: 2px;
}
.hr_tag {
width:40%;
margin-left: auto;
margin-right: auto;
}
.hr_divider {
width: 40%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.hr_title_divider {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.title {
text-align: center;
text-decoration: underline;
font-size: 45px;
padding-bottom: 1%;
padding-top: 1%;
color: white;
}
.content {
height: 100%;
width: 100%;
text-align: center;
display: inline-block;
}
How can I stop the images from stretching like they currently do?
Thanks
In your rule for .pic, change height: 100%; to height: auto;
I am beginner with HTML and CSS so I decided to try code .psd layout. Unfortunately, I am stuck with that part of layout:
I mean that lines between circles with images.
Here is my code for that:
html {
font-size: 62.5%;
}
body {
width: 1400px;
font-family: "Roboto Slab", serif;
}
section {
padding-right: 230px;
padding-left: 230px;
}
.culture {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f9f9f9;
overflow: auto;
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 4rem;
color: #222;
text-align: center;
}
.culture p {
color: #777;
text-align: center;
}
.culture > p {
padding-top: 20px;
padding-bottom: 89px;
font-size: 2rem;
}
.value {
float: left;
padding-right: 56px;
}
.line {
width: 170px;
height: 2px;
background-color: #777;
}
.value_img {
width: 91px;
height: 91px;
margin: 0 auto 25px;
border: 2px #777 solid;
border-radius: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.balance {
background-image: url("http://d-k.aq.pl/note.png");
}
.quality {
background-image: url("http://d-k.aq.pl/chart.png");
}
.excellence {
background-image: url("http://d-k.aq.pl/star.png");
}
h3 {
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
color: #222;
text-align: center;
}
.value p {
padding-top: 20px;
font-size: 1.4rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
</head>
<section class="culture">
<h2>
CULTURE & VALUES
</h2>
<p>
Phasellus gravida ex at odio elementum.
</p>
<div class="value">
<div class="value_img balance">
</div>
<h3>
WORK-LIFE BALANCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque
</p>
</div>
<div class="line">
</div>
<div class="value">
<div class="value_img quality">
</div>
<h3>
QUALITY OVER QUANTITY
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
<div class="line">
</div>
<div class="value">
<div class="value_img excellence">
</div>
<h3>
DELIVER EXCELLENCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
</section>
Should I use absolute positioning for them?
Use padding of .wrapper for setting width of all items.
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 10%;
}
.item {
border: 3px solid #777;
width: 100px;
height: 100px;
border-radius: 50%;
}
.line {
border: 1px solid #777;
margin: 0 2%;
flex: 1 0;
}
<div class="wrapper">
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
</div>
You can use pseudo elements and negative margins :
.value + .value .value_img:before {
content: '';
display: block;
margin: 50px 0 0 -190px;
width: 170px;
height: 2px;
background-color: #777;
}
.line {/* deleted from html */}
you may also take a look at display:flex to set the layout instead float, margin can be used too instead fixed average padding values
html {
font-size: 62.5%;
}
body {
width: 940px;/* padding of section removed */
font-family: "Roboto Slab", serif;
margin: auto;
}
section {
/* ??
padding-right: 230px;
padding-left: 230px;
*/
}
.culture {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f9f9f9;
overflow: auto;
display: flex;/* set things easily and will allow vertical and or horizontal alignements */
flex-wrap: wrap;/* we need this here */
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 4rem;
color: #222;
text-align: center;
width: 100%;
}
.culture p {
color: #777;
text-align: center;
}
.culture > p {
padding-top: 20px;
padding-bottom: 89px;
font-size: 2rem;
width: 100%;
}
.value {
padding: 0 28px;/* around equally , helps to center things visually */
}
/* draw the lines here, .value + .value .. does not select first */
.value + .value .value_img:before {
content: '';
display: block;
margin: 50px 0 0 -190px;
width: 170px;
height: 2px;
background-color: #777;
}
.line {/* no need no more */}
.value_img {
width: 91px;
height: 91px;
margin: 0 auto 25px;
border: 2px #777 solid;
border-radius: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.balance {
background-image: url("http://d-k.aq.pl/note.png");
}
.quality {
background-image: url("http://d-k.aq.pl/chart.png");
}
.excellence {
background-image: url("http://d-k.aq.pl/star.png");
}
h3 {
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
color: #222;
text-align: center;
}
.value p {
padding-top: 20px;
font-size: 1.4rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
</head>
<section class="culture">
<h2>
CULTURE & VALUES
</h2>
<p>
Phasellus gravida ex at odio elementum.
</p>
<div class="value">
<div class="value_img balance">
</div>
<h3>
WORK-LIFE BALANCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque
</p>
</div>
<div class="value">
<div class="value_img quality">
</div>
<h3>
QUALITY OVER QUANTITY
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque.
</p>
</div>
<div class="value">
<div class="value_img excellence">
</div>
<h3>
DELIVER EXCELLENCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque.
</p>
</div>
</section>