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>
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'm having this problem that my header,footer and bar part are not fixed when i scroll through the page if i attach an image the image kinda off overlaps and becomes above the header.
this is the css code:
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
position: fixed;
}
body{
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.homeage_product {
position: relative;
width: 50%;
}
.homeage_but {
width: 100%;
height: auto;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
#lblCartCount {
font-size: 12px;
background-color: crimson;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
.form-inline {
display: flex;
}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
also here i can't figure out why the following <div> tag is not clickable (meaning the user and the shooping cart):
<div class="icons">
<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
<asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
the rest of the html code:
</div>
<div class="content">
<!-- Image of a product with button refrence to the product it self -->
<div class="homeage_product" >
<img src="images/cake.jpg" alt="" style="width:100%; height:300px; padding: 0;">
<button class="homeage_but" >CLICK ME!</button>
</div>
</div>
<h4><center><u>Welome to our Bakery shop!</u></center></h4>
<p>
Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
tellus tincidtant tristique.
</p>
<div class="footer">
</div>
</body>
</html>
Add z-index your header style in css:
.header
{
z-index: 99;
}
The z-index property specifies the overlay order of positioned elements. Elements with a greater z-index will therefore always be in front of elements with a lower z-index. Setting the z-index to a value greater than (or even equal to) 0 sets that element to be on top of non-positioned elements with no z-index specified. You could always set it to a value lower than 99, but, it is common practice to avoid potential clashes with other positioned elements.
Let me know if this works for you :)
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'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>
Hi i have problem with positions of this tags
I have this code
<div class="wrap">
<div class="site-content">
<article class="col-sm-12 col-lg-8 article">
<div class="post-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum tincidunt sodales. Fusce euismod viverra eros sit amet porttitor. Aenean purus neque, tempus quis diam in, scelerisque pellentesque leo. Suspendisse nec molestie erat. Duis faucibus, tellus eget pretium ullamcorper, turpis ante finibus mi, sed accumsan libero elit nec urna. Phasellus odio lectus, interdum eu vehicula a, malesuada vel tellus. Suspendisse sit amet ullamcorper nibh. Nullam fermentum mi sed malesuada ullamcorper. Etiam et lacinia elit. Mauris pellentesque nunc sapien, id ultricies magna venenatis non. Phasellus volutpat leo ac diam bibendum placerat. Vestibulum elementum, ex a tempor bibendum, nibh neque egestas enim, vel aliquet nisl turpis vel ligula. Sed sagittis dolor id metus ultrices tristique a nec nibh. Curabitur hendrerit rutrum dui, at placerat nisl rutrum ut. Duis vitae semper nunc, non aliquet sapien.
</p>
</div>
</article>
<aside class="col-sm-12 col-lg-4 aside-panel">
<h3 class="caption">Most read posts</h3>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside1.png" alt="">
</a>
</div>
<span class="post-info">28. November 2014</span>
<span class="separator">//</span>
<span class="post-info">Iphone</span>
<a class="top-post-title" href="#">Etiam lorem orci hendrerit ac neque id interdum fringilla metus</a>
</div>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside3.jpg" alt="">
</a>
</div>
<span class="post-info">28. October 2014</span>
<span class="separator">//</span>
<span class="post-info">Huawei</span>
<a class="top-post-title" href="#">Pellentesque tincidunt consequat nibh at vestibulum</a>
</div>
</aside>
</div><!-- end of .site-content -->
</div><!-- end of .wrap -->
problem is: my wrap have height:0px but why? i have my content in wrap... and second problem is: why text after tag is not under all of my content?
Here is my CSS:
html{
height: 100%;
}
/* Blocks */
div.container{
padding: 0;
width:100%;
}
/* Post */
article.article{
position: static;
font-size: 16px;
line-height: 28px;
float: left;
}
article.article p{
text-align: justify;
margin-bottom: 28px;
}
.aside-panel{
position: static;
}
.post-intro{
position: absolute;
color:#fff;
bottom: 0;
left: 0;
width: 100%;
}
.post-content:after, .post-content:before{
content: " ";
display: table;
}
.info{
font-size: 17px;
font-style: italic;
width: 100%;
color: #eee;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.info-left{
left:0;
float: left;
}
.info-right{
right:0;
float: right;
}
.perex{
font-size: 20px;
margin: 10px 0 30px 0;
font-style: italic;
}
.intro-image{
min-width: 100%;
width: 100%;
height: 550px;
max-width: 1000px;
background-repeat: no-repeat;
background-position: center;
}
.overlay{/* Image overlay */
position: relative;
height: 100%;
background-color: rgba(32,32,32,.7);
}
.search{
position: absolute;
width: 300px;
margin:80px 0 10px 0;
right: 0;
}
.search .searchbox{
width: 255px;
background: transparent;
font-size: 22px;
padding: 0 25px;
color: #fff;
font-weight: bold;
outline: none;
border: 1px solid rgba(238,238,238,.3);
height: 45px;
}
.search .submit{
width:45px;
height: 45px;
border: 0;
border: 1px solid rgba(238,238,238,.3);
border-left: 0;
float: right;
background: transparent;
color: #a9a9a9;
font-size: 22px;
}
.searchbox:focus{
border: 1px solid #fff;
}
.searchbox:focus ~ .submit{
border: 1px solid #fff;
border-left: 0;
color: #fff;
}
.focused{
border: 1px solid #fff;
}
.fieldset-default{
border: 1px solid #c0c0c0;
}
/* Change color of placeholder when input is focused */
.searchbox:focus::-webkit-input-placeholder {color: #fff;}
.searchbox:focus:-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus::-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus:-ms-input-placeholder {color:#fff;}
.post-brand{
/*change for bigger logo */
position: absolute;
width: 350px;
margin:80px 0 10px 0;
color:#fff;
left:0;
line-height: 45px;
font-size: 40px;
}
.search fieldset{
padding: 0;
}
/* Navigate bar/box */
.box{
height: 50px;
width: 100%;
background-color: rgb(0,0,0);
}
.no-format{
text-decoration: none;
color: inherit;
}
.no-format:hover{
text-decoration: none;
color: inherit;
}
.box.box-top{
top:0;
}
.box .logo{
color:white;
font-family: 'Lobster', cursive;
font-size: 32px;
float: left;
}
.box .spacer{
width: 1px;
height:30px;
margin: 10px 30px;
background: white;
float:left;
}
/* Default definition of box item */
.box-item{
padding: 0 15px;
color:#919090;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
z-index: 999;
}
.box-item:hover{
padding: 0 15px;
color:#fff;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
text-decoration: none;
}
/* Aside with top articles */
.top-post{
margin-bottom: 20px;
}
.top-post-image{
margin-bottom: 5px;
height: 170px;
overflow: hidden;
}
.top-post-image img{
width: 100%;
height: auto;
}
.post-info{
color: #888787;
font-size: 13px;
}
.separator{
color: #888787;
font-size: 13px;
font-style: italic;
}
.horizontal-divider{
border-bottom: 1px solid #626262;
border-top: 1px solid #626262;
height: 4px;
}
.top-post-title{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
font-size: 19px;
}
.top-post-title:hover{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
}
/* Wrappers */
.wrap{
position: relative;
width:100%;
margin:auto;
max-width: 1100px;
}
.box .wrap{
height: 50px;
}
.site-content{
position: absolute;
height: auto;
}
Here you have my complete code: HERE
Look at text after comment
Its because you have positioned .site-content absolutely. Position it relatively.
.site-content{
position: relative;
height: auto;
}
Updated Fiddle
Make the following correction:
Remove position:absolute from .site-content
Add overflow:hidden to .wrap
I have tested it. Let me know if you have any further doubts or queries.
my sugestion is:
.site-content{
position:relative;
min-height:100%;
overflow:hidden;}
i use it and this work for me.