How can I make the header fixed and the content scroll "under" the header? Also how can I get the CSS Play button to be above the line and look decent?
index.html:
<!DOCTYPE html>
<html>
<head>
<title>lingo records</title>
<meta charset="utf-8">
<link rel="icon" href="/favicon.png">
<link rel="author" href="http://forksforoatmeal.com">
<link rel="stylesheet" href="/assets/css/lingo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/assets/js/jquery.jplayer.min.js"></script>
<script src="/assets/js/lingo.js"></script>
</head>
<body>
<div id="header">
<h1 class="header">lingo records</h1>
<ul id="navigation">
<li>home</li>
<li>about</li>
<li>samples</li>
<li>contact</li>
</ul>
<div id="music_player">
<span id="pp"></span>
<span id="song"></span>
</div>
</div>
<div id="content">
<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. 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. 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="clear"> </div>
<div id="footer">
© 2010 lingo records. Josh Brown
</div>
</body>
</html>
lingo.css:
/* Yahoo Style Reset Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */
html{color:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body {
/* background-color: #63B7D4;*/
background-color: #fff;
margin: 30px;
font-family: 'Philosopher', sans-serif;
font-size: 14px;
color: #4F5155;
}
a {
color: #475152;
background-color: transparent;
font-weight: normal;
}
h1.header {
font-family: 'Philosopher', sans-serif;
font-size: 70px;
letter-spacing: -4px;
}
#header {
position: static;
border-bottom: 1px solid #D0D0D0;
}
#header #navigation a {
font-family: 'Philosopher', sans-serif;
font-size: 22px;
text-decoration: none;
}
ul#navigation > li {
display: inline;
list-style-type: none;
margin-right: 15px;
}
#header #navigation a:hover {
text-decoration: underline;
}
#header #navigation a:last-child {
margin-right: 0px;
}
#content {
margin-top: 60px;
font-size: 20px;
}
#footer {
position: fixed;
bottom: 0;
right: 0;
margin-bottom: 20px;
margin-right: 20px;
font-size: 12px;
}
/* Music Player */
#music_player {
float:right;
margin-right: 30px;
margin-bottom: 5px;
width: 250px;
}
.play {
display:block;
width:0;
height:0;
border-style:solid;
border-width: 8px 0px 8px 16px;
border-color:transparent transparent transparent #4F5155;
}
.pause{
display:block;
width:16px;
height:16px;
border-left:32px double #4F5155;
}
#font-face {
font-family: Philosopher;
src: url(/assets/fonts/Philosopher.otf);
font-weight:400;
}
Thanks in advance for your help!
-Josh
You can use position: fixed for it to stay in place as the user scrolls, although you'd probably need to apply a (semi-transparent) background for the header contents to be visible when the user scrolls. The styles you need to add are:
#header {
position: fixed;
width: 100%; /* Or whatever width you need it to be */
background-color: rgba(255, 255, 255, 0.7); /* Use semi-transparent png for IE support */
top: 10px;
}
#content {
margin-top: 160px; /* To push content off the top of the page */
}
As for the song player, you need to provide either a link to the page you are working on, or some sort of sample, as without the Javascript it is impossible to see what sort of markup is generated and what style is necessary for it to 'look decent'.
Edit: About that music player button... The method you're using looks to me to be a bit of a hack. I mean, you have to be really desperate to need to use border to create the play triangle, right? You're probably better off just using background-image instead, with something like
#pp {
background: url('path/to/image.png') no-repeat scroll left top;
padding-left: 10px;
}
for the play button.
Related
I'm trying to figure it out why margin top "0" doesn't work, as you can see on the code there's a white space between menu and section, I can only fix it by using negative values which I don't want to... anyone can help me out with this?
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
body {
margin: auto;
width: 50%;
}
header {
background-image: url("medimare5.png");
background-repeat: no-repeat;
background-size: 318px 175px;
width: 318px;
height: 175px;
margin-top: 10px;
}
menu {
background-color: #70acdd;
text-align: center;
padding: 2%;
border-radius: 2em 2em 0 0;
}
ul, li {
display: inline;
padding: 1%;
font-weight: bold;
}
li:hover {
border-bottom: 3px solid #FFF;
}
a {
text-decoration: none;
color: #FFF;
}
section {
background-color: #70acdd;
height: 100%;
padding: 2%;
margin-top: -1.7%;
display: inline-block;
}
footer {
background-color: #70acdd;
padding: 2%;
border-radius: 0 0 2em 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>
Medimare
</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
</header>
<menu>
<ul>
<li>Inicio</li>
<li>Consultas</li>
<li>Conócenos</li>
<li>Contacta</li>
</ul>
</menu>
<section>
<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."</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."</p>
</section>
<footer>
<p>Medimare 2020 © Todos los derechos reservados.</p>
</footer>
</body>
</html>
Maybe I should start using divs? I don't know..
Thank you everyone!
The problem when you set margin-top: 0 on the section is that the menu has bottom margin. If you set margin-bottom: 0 on the menu, it should work as you expect
I don't think this requires explanation
menu {
margin-bottom: 0;
}
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...
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;
font-style: italic;
background-color: #064501; /* Dark Woodrow Green */
padding: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
#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;
font-style: italic;
}
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)
- Fix non-colored area below the footer.
-->
<body>
<header>
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<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>
<div id="Footer">
<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>
</div>
</body>
</html>
This question has probably been asked a million times, but I've tried a good bit of common solutions to it and still no result. There is a small space between the footer and end of the page, showing the background and I don't know what is causing it. UPDATE: I don't know what happened, but it seems that the space has disappeared or something. Really weird ghost browsers I guess.
I hope to have understood the problem. There is a margin applied to the footer tag that leaks out from div#Footer. It is because of the collapsing margins in CSS. If you give a 1px pixel padding or a transparent 1px border to the div, the footer tag margin will be contained.
If you don't need the margin you could simply remove it:
#Footer > div {
margin-top: 0;
}
I am trying to align my avatar/logo with the website title (side by side). How would I accomplish this?
html {
background: #bdb4c1;
}
#logo {
width: 100px;
height: 100px;
}
hr {
border: 0;
color: red;
border-bottom: 1px solid #101010;
}
body {
max-width: 800px;
height: 1000px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
margin: auto;
padding: 20px;
}
h1, h3 {
font-weight: 700;
line-height: 1.5;
color: #272727;
}
p {
color: #383838;
}
<body>
<div id="title">
<img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
<h1>JOSH BAKOS</h1>
</div>
<hr>
<h3>INFORMATION</h3>
<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>
<h3>EXPERIENCE</h3>
<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.</p>
<p>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>
<h3></h3>
</body>
Your <img> and <h1> tag cannot be aligned because <h1> is a block element.
By default, block elements are displayed below the previous html element (i.e. below your <img> here).
There are many possible solutions. A simple one could be to move the <img> tag inside the <h1>:
<h1><img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">JOSH BAKOS</h1>
Another solution is to set the h1 inside the #title to inline-block (this way you can also control their vertical-alignment):
html {
background: #bdb4c1;
}
#logo {
width: 100px;
height: 100px;
}
hr {
border: 0;
color: red;
border-bottom: 1px solid #101010;
}
body {
max-width: 800px;
height: 1000px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
margin: auto;
padding: 20px;
}
#title * {
vertical-align: top;
}
#title h1 {
display: inline-block;
margin-top: 0;
}
h1, h3 {
font-weight: 700;
line-height: 1.5;
color: #272727;
}
p {
color: #383838;
}
<body>
<div id="title">
<img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
<h1>JOSH BAKOS</h1>
</div>
<hr>
<h3>INFORMATION</h3>
<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>
<h3>EXPERIENCE</h3>
<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.</p>
<p>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>
<h3></h3>
</body>
I am trying to make both the header/footer position fixed to the top/bottom of the window and only scroll the middle content.
I tried fixed position on the containers as well as overflow-y on the content for no avail. Any suggestion?
Thanks
header,
footer {
font-weight: bold;
height: 2em;
line-height: 2em;
background-color: #d9d8da;
}
footer li {
display: inline-block;
width: 32%;
}
ul {
padding: 0;
text-align: center;
}
header label:nth-child(1) {
float: left;
padding: 0em 1em 0em 1em;
}
header label:nth-child(2) {
font-weight: normal;
position: absolute;
width: calc(100% - 6.5em);
text-align: center;
}
header label:nth-child(3) {
float: right;
padding: 0em 1em 0em 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/home.css" />
<title>RRR</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<label>☰</label>
<label>My app</label>
<label>⋮</label>
</header>
<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. 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>
</div>
<footer>
<ul>
<li>NO</li>
<li>EXTRA</li>
<li>YES</li>
</ul>
</footer>
</body>
</html>
I forgot to also add width: 100%; to header and footer in my previous answer. Here's your code modified:
html, body {
heigth: 100%;
padding: 0;
margin: 0;
}
header,
footer {
position: fixed;
width: 100%;
font-weight: bold;
height: 2em;
line-height: 2em;
background-color: #d9d8da;
}
footer {
position:fixed;
bottom: 0px;
height: 2em;
}
.content {
padding: 2em 0;
}
footer li {
display: inline-block;
width: 32%;
}
ul {
padding: 0;
margin: 0;
text-align: center;
}
header label:nth-child(1) {
float: left;
padding: 0em 1em 0em 1em;
}
header label:nth-child(2) {
font-weight: normal;
position: absolute;
width: calc(100% - 6.5em);
text-align: center;
}
header label:nth-child(3) {
float: right;
padding: 0em 1em 0em 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/home.css" />
<title>RRR</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<label>☰</label>
<label>My app</label>
<label>⋮</label>
</header>
<div class="content">
<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. 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>
<footer>
<ul>
<li>NO</li>
<li>EXTRA</li>
<li>YES</li>
</ul>
</footer>
</body>
</html>
add position: fixed; to both header and footer.
For the footer, also add "bottom: 0px`
and your content should have top and bottom margins high enough to cover the space of those fixed elements when it's scrolled all the way up or down.