I cannot get my menu bar to appear horizontally. I am still working on the whole page itself, but just need to focus on the #nav items not displaying correctly. Right now it is appearing centered and I would like it to be inline in the upper-right.
How can I fix this?
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 30%;
background-repeat: no-repeat;
height: 500px;
top: 0;
font-family: cursive;
margin: 0 auto;
max-width: 500px;
background-color: black;
}
.left {
background-color: red;
}
a {
font-size: 15px;
}
#nav {
background-color: purple;
width: 15px;
height: 25px;
border-radius: 5px;
}
#nav li {
margin: 10px;
text-align: center;
float: right;
display: inline;
background-color: pink;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
<body>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> HOW TO
</li>
</ul>
</div>
</header>
<h2>Micropropagation</h2>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div class="third>
<p> " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
Just need to add display: inline-block; to your #nav li
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
jsfiddle
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: cursive;
margin: 0 auto;
}
a {
font-size: 15px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
h2 {
position: relative;
}
<title>Plant Tissue Culturing</title>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> WHERE
</li>
</ul>
<br/>
<br/>
<h2>Micropropagation</h2>
</div>
<br />
</header>
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="third">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</body>
Related
I am trying to make a sticky sidebar that stops at the bottom of a webpage's header image, but I'm unable to get it to work. I've recreated the issue in the snippet below and in this JSFiddle which might be easier to look at/test in.
The sidebar is looking how I want it, but when I scroll down it doesn't halt at the top of the page
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
Purpose</li>
<li>
Founding</li>
<li>
Future</li>
<li>
Contributors</li>
<li>
Contact</li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
I have marked all my edits in css.
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.h-100 {
display: flex; /*add this it*/
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
top: 81px; /*add this it*/
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
display: flex!important; /*add this it*/
flex-direction: column; /*add this it*/
height: 100%; /*add this it*/
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
Purpose</li>
<li>
Founding</li>
<li>
Future</li>
<li>
Contributors</li>
<li>
Contact</li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
I've made a basic parallax website and I am looking to put a simple navigation bar on the top right of the screen. When I load up the website in my browser, the link (which at the moment is linked to #) won't allow me to click it until I reach the class .section. If it is touching any of the images that have the parallax effect, it becomes opaque, and won't allow me to click. I had a feeling it had something to do with bad placement, and even when I moved it around it seemed to have no effect. It also won't float to the right. Here is some of the HTML and CSS:
body, html {
height: 100%;
margin:0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url('../AlignedResonance/mountainsvg.svg');
min-height: 100%;
}
.pimg2 {
background-image: url('../AlignedResonance/tree.jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('../AlignedResonance/lake.jpg');
min-height: 400px;
}
.section {
text-align:center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color:#666;
}
.section-dark {
background-color: #282e34;
color:#ddd;
}
.ptext {
position:absolute;
top:50%;
width: 100%;
text-align: center;
color:black;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
}
.ptext .border {
background-color: #111;
color: #fff;
padding:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Aligned Resonance</title>
<link rel="stylesheet" type="text/css" href="../AlignedResonance/style.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
</ul>
<div class="pimg1">
<!-- class ptext -->
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
Text 2
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
Text 3
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
</body>
</html>
Sorry if I don't have a correct format etc., as I am new to HTML as well as this site.
Try updating the z-index for your navbar class:
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
z-index: 1;
}
I have three paragraphs with heading and each heading have a border-bottom which is on the left side.
I used h2:after{//CSS here } to display the border. I used left: 13.5%; for the first heading to display the border on the left side.I can use the left:25% for second and left:39% for the last heading to display the border but I know this is not a good way to display. Because If I used to like this then I have to use the media query for all the device to set the border.
I want to know which is the best way to use the border-bottom and all are display on the left side.
Getting the output
I need a output
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
}
.heading h2:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 13.5%;
transform: translateX(-13.5%);
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Simply apply it to the span instead of the h2 and no need to specify a specific value to left, simply make it 0 and also bottom to 0 (or any negative value if you want it to be lower)
[don't forget position:relative on span]
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position:relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
bottom:0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
You should put your pseudo element :after in your span because it covers the exact width of your heading text. Then you should give your span a relative positioning so it will become its parent. Then just give it a 0% left positioning so it will align with the left. Your code should look like this.
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position: relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
I'm having some trouble trying to align a button with the right side of a responsive div (I'm trying to make all my html responsive).
What I am achieving right now is this current example:
.container1 {
background-color: yellowgreen;
position: relative;
width: 100%;
height: 400px;
}
.container1-text1 {
position: absolute;
top: 50%;
left: 50%;
width: 40%;
-webkit-transform: translate(-105%, -50%);
-ms-transform: translate(-105%, -50%);
transform: translate(-105%, -50%);
background-color: orange;
padding: 1.2em;
}
.container1-text2 {
position: absolute;
top: 50%;
left: 50%;
width: 40%;
-webkit-transform: translate(5%, -50%);
-ms-transform: translate(5%, -50%);
transform: translate(5%, -50%);
background-color: fuchsia;
padding: 1.2em;
}
.custom-button-style {
float: right;
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
cursor: pointer;
}
<div class="container1">
<div class="container1-text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="container1-text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<a href="" target="_blank">
<div class="custom-button-style">BUTTON TEXT</div>
</a>
</div>
Fiddle of current example: http://jsfiddle.net/6zstozwf/
But what I would like to achieve is this:
To keep it short, I thought on wrapping both the button and the second "pink/fuchsia" div on a wrapper-div, but I didn't have success on it.
The main problem is, that you have your elements positioned absolute. That will break your layout especially on small devices.
There are a few solutions out there. This one down below is made with display: flex mainly. See comments in code for explanation.
*, *::before, *::after {
/* changing calculation of box model for all elements */
box-sizing: border-box;
}
body {
/* I guess your whole page should be green anyway.
Otherwise you can put this back to .container1 */
background-color: yellowgreen;
}
.container1 {
/* making the container kind of "flexible" */
display: flex;
/* spread elements from across width but leave a gap between them */
justify-content: space-between;
/* vertically align elements to the top */
align-items: flex-start;
/* when elements reach over a 100% wrap them to the next line */
flex-wrap: wrap;
/* vw means viewport width - similar to % */
padding: 5vw;
}
/* combine styles for both text elements */
.container1-text1, .container1-text2 {
width: 40vw;
padding: 1.2em;
}
.container1-text1 {
background-color: orange;
}
.container1-text2 {
background-color: fuchsia;
}
.button-container {
/* just an element spread to 100% width
all inline elements should be aligned to the right */
width: 100%;
text-align: right;
padding-top: 5vw;
}
.custom-button-style {
display: inline-block;
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
}
<div class="container1">
<div class="container1-text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="container1-text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="button-container">
<a href="" target="_blank" class="custom-button-style">
BUTTON TEXT
</a>
</div>
</div>
You're having trouble because of your absolute positioning and your float. Both cause more trouble than they're worth. Look at inline-block and leave positioning static, then your anchor can flow below them as normal and be aligned right with text-align.
* {
box-sizing: border-box;
}
.container {
background-color: yellowgreen;
margin-bottom: 20px;
text-align: center;
}
.container > div {
display: inline-block;
width: 40%;
margin: 4.5%;
background-color: orange;
padding: 1.2em;
}
* {
box-sizing: border-box;
}
.container {
background-color: yellowgreen;
margin-bottom: 20px;
text-align: center;
}
.container > div {
display: inline-block;
width: 40%;
margin: 4.5%;
background-color: orange;
padding: 1.2em;
}
.container > div.text2 {
background-color: fuchsia;
}
.custom-button-style {
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
cursor: pointer;
}
.text-right {
text-align: right;
}
.custom-button-style {
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
cursor: pointer;
}
.text-right {
text-align: right;
}
<div class="container">
<div class="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="text-right">
<a href="" target="_blank">
<span class="custom-button-style">BUTTON TEXT</span>
</a>
</div>
Fiddle
I am using a separate background image on this website than the one applied first. The background image I want to use in the header area of the page is not showing even though I triple checked for the link to the image being correct. Is there anything interfering with the image's ability to show up?
body, html {
font-family: 'Asap', sans-serif;
text-align: center;
padding: 0px;
margin: 0px;
}
body {
background-image: url("../Images/firepit2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
a {
text-decoration: none;
color: #000;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
}
a:hover {
font-weight: bold;
}
a:active {
}
#Logo {
font-size: 3em;
background-color: #064501; /* Dark Woodrow Green */
margin-top: 0px;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
#Quote {
background-color: #064501;
margin: 0px;
padding-bottom: 17px;
}
#HeaderText {
background-image: url("Images/GrassBackground.jpg");
}
#Navigation {
list-style: none;
margin-top: 0px;
background-color: rgba(255, 255, 255, .65);
padding: 10px;
}
#Navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#Navigation li a {
text-decoration: none;
color: #000;
}
#Wrapper {
width: 50%;
margin: 0px auto;
margin-top: 90px;
background-color: rgba(255, 255, 255, .65);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-radius: 40px;
}
#Greeting {
border-bottom: 1px solid;
padding-bottom: 20px;
}
#Wrapper p {
line-height: 1.1em;
margin-top: 26px;
text-align: center;
}
footer {
background-color: #064501; /* Dark Woodrow Green */
margin-top: 90px;
margin-bottom: 0px;
padding-bottom: 0px;
font-style: italic;
border-bottom: 1px solid #064501;
}
footer p {
float: left;
}
footer ul {
float: right;
}
footer ul li {
display: inline;
}
footer::after {
display: block;
content: '';
clear: both;
}
#Copyright {
margin-left: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
#Contact {
margin-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
#Contact li {
padding-left: 3px;
padding-right: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Woodrow Lawn and Turf</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1">
-->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="../CSS/index.css">
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,700,700i" rel="stylesheet">
</head>
<!-- DEVELOPER NOTES -->
<!--
- Keywords and description meta are still subject to change by the client.
- Make sure to add correct target attributes and file paths to the nav links.
- All images used in this mockup are subject to copyright currently.
- Make sure to add alternate font families to the font-family style. (2 only)
- Viewport scale commented currently.
-->
<body>
<header>
<div id="HeaderText">
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<p id="Quote"><i>"Turf turf lawn turf turf lawn"</i></p>
</div>
<nav>
<ul id="Navigation">
<li>About Us</li>
<li>|</li>
<li>Lawn Stuff</li>
<li>|</li>
<li>Dirt Stuff</li>
<li>|</li>
<li>Flower Bed Stuff</li>
<li>|</li>
<li>Patio Stuff</li>
<li>|</li>
<li>Firepit Stuff</li>
<li>|</li>
<li>Commercial and Business Stuff</li>
</ul>
</nav>
</header>
<div id="Wrapper">
<h1 id="Greeting">Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<p id="Copyright">© Copyright Woodrow Lawn and Turf LLC 2017</p>
<ul id="Contact">
<li>Contact:</li>
<li>(999)999-9999</li>
<li>|</li>
<li>stuffcompany#comp.net</li>
</ul>
</footer>
</body>
</html>
The elements in the header container has background colors which covers the image
body, html {
font-family: 'Asap', sans-serif;
text-align: center;
padding: 0px;
margin: 0px;
}
body {
background-image: url("../Images/firepit2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
a {
text-decoration: none;
color: #000;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
}
a:hover {
font-weight: bold;
}
a:active {
}
#Logo {
font-size: 3em;
/** background-color: #064501; /* Dark Woodrow Green * this overrides your background image*/
margin-top: 0px;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
#Quote {
/**background-color: #064501;** this overrides your background image*/
margin: 0px;
padding-bottom: 17px;
}
#HeaderText {
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/arctichare.png");
}
#Navigation {
list-style: none;
margin-top: 0px;
background-color: rgba(255, 255, 255, .65);
padding: 10px;
}
#Navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#Navigation li a {
text-decoration: none;
color: #000;
}
#Wrapper {
width: 50%;
margin: 0px auto;
margin-top: 90px;
background-color: rgba(255, 255, 255, .65);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-radius: 40px;
}
#Greeting {
border-bottom: 1px solid;
padding-bottom: 20px;
}
#Wrapper p {
line-height: 1.1em;
margin-top: 26px;
text-align: center;
}
footer {
background-color: #064501; /* Dark Woodrow Green */
margin-top: 90px;
margin-bottom: 0px;
padding-bottom: 0px;
font-style: italic;
border-bottom: 1px solid #064501;
}
footer p {
float: left;
}
footer ul {
float: right;
}
footer ul li {
display: inline;
}
footer::after {
display: block;
content: '';
clear: both;
}
#Copyright {
margin-left: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
#Contact {
margin-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
#Contact li {
padding-left: 3px;
padding-right: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Woodrow Lawn and Turf</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1">
-->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="../CSS/index.css">
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,700,700i" rel="stylesheet">
</head>
<!-- DEVELOPER NOTES -->
<!--
- Keywords and description meta are still subject to change by the client.
- Make sure to add correct target attributes and file paths to the nav links.
- All images used in this mockup are subject to copyright currently.
- Make sure to add alternate font families to the font-family style. (2 only)
- Viewport scale commented currently.
-->
<body>
<header>
<div id="HeaderText">
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<p id="Quote"><i>"Turf turf lawn turf turf lawn"</i></p>
</div>
<nav>
<ul id="Navigation">
<li>About Us</li>
<li>|</li>
<li>Lawn Stuff</li>
<li>|</li>
<li>Dirt Stuff</li>
<li>|</li>
<li>Flower Bed Stuff</li>
<li>|</li>
<li>Patio Stuff</li>
<li>|</li>
<li>Firepit Stuff</li>
<li>|</li>
<li>Commercial and Business Stuff</li>
</ul>
</nav>
</header>
<div id="Wrapper">
<h1 id="Greeting">Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<p id="Copyright">© Copyright Woodrow Lawn and Turf LLC 2017</p>
<ul id="Contact">
<li>Contact:</li>
<li>(999)999-9999</li>
<li>|</li>
<li>stuffcompany#comp.net</li>
</ul>
</footer>
</body>
</html>
Wow end my life now. For almost an hour I have been trying to fix this problem and I forgot to add 2 periods before the slash in the URL for the background image in my folder...