I'm new to HTML and CSS and I'm wrote this for school.
All of a sudden my background image disappeared and I have no idea what the problem is!
The background image is gradient-bg.jpg and in the same directory as the header image.
What am I overlooking?
HTML:
<head>
<meta charset="utf-8" />
<title>
Laboration 1 av Emil
</title>
<link rel="stylesheet" type="text/css" href="style/stilmall.css" />
</head>
<body id="backnd">
<div id="wrapper">
<div id="header">
<h1 class="title">Musikbaren</h1>
</div>
<article id="content" style="float:left">
<h2 class="Rubrik">Detta är en rubrik</h2><hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta tristique faucibus. Cras id faucibus massa, vitae scelerisque dui. Vivamus sollicitudin arcu arcu, a cursus risus efficitur non. Pellentesque quis nisl a erat tempus scelerisque eu nec sapien. Aliquam nec mauris iaculis, varius tellus ac, sagittis dui.
</article>
<nav id="navbar" style="float:right">
<ul class="button-group">
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
</ul>
</nav>
<footer id="footer" style="text-align: center;">
Här skrivs kontaktuppgifter!!!!!!!!!!!!!
</footer>
</div>
</body>
</html>
CSS-file:
#wrapper {
background-color: white;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
margin: 0 auto;
width: 980px;
min-width:980px;
border: solid 3px white;
}
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
#header {
background-image:url('../images/header-bg.jpg');
background-repeat:no-repeat;
width: 980px;
height: 140px;
border-radius: 35px;
}
h1{
padding-left: 50px;
color: #800000;
}
#content {
font-family: Times New Roman;
background-color: white;
width: 747px;
margin-left: 19px;
padding-top: 5px;
}
p{
padding-left: 10px;
padding-right: 10px;
}
#navbar {
background-color: white;
width: 185px;
margin-right: 19px;
padding-left: 5px;
padding-top: 5px;
}
#footer{
clear:both;
text-align:center;
padding:5px;
opacity: 0.5;
}
a{
display: block;
width: 100%;
font-size: 30px;
line-height:50px;
text-align: center;
color:black;
text-decoration: none;
list-style-type: none;
}
a:hover {
color: red;
}
.button {
display: block;
margin-bottom: 5px;
height: 50px;
width: 150px;
background-color:#b3b3b3;
border-radius: 10px;
margin-right: 10px;
}
.title{
font-family: Times New Roman;
font-size: 78;
padding-left: 68px;
height: 140px;
line-height: 140px;
margin-bottom: 5px;
margin-top: 0px;
}
.Rubrik{
padding-left: 50px;
color: black;
font-size: 30px;
font-family: Times New Roman;
}
Your <body> no longer has an ID of #backgnd this has changed to #backnd for whatever reason, this could also be the other way around.
Change the following:
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
Into:
#backnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
and it should work as before.
Hope this helps!
Related
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>
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;
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.