I'm trying to find a simple fix to get my header to stay in a fixed position, but when I apply "position:fixed" to my header class nothing happens. I tried it with the h1 tag in the header too. I'd really appreciate it if someone could tell me what I'm doing wrong and what the simplest method would be to get the header to stay fixed when you scroll down the screen. I pasted the header section below.
Thank you for all suggestions!
<header class="logo">
<h1>The Loch Ness Monster Report</h1>
<ul id="nav-menu">
<li><a class="selected" href="index.html">Latest Sightings</a></li>
<li>History</li>
<li>Report a Sighting</li>
<li>Donate</li>
</ul>
</header>
The CSS is working because the other elements are connected. This is what I'm using for the CSS for the header element.
.logo {
position: fixed;
z-index: 1;
}
You could do something like this.
header{
width: 100vw; //set header width equal to viewport width.
}
.logo {
position: fixed; //set header fix to top
z-index: 1;
display: flex; // displays logo content horizontally
justify-content: flex-start; // set logo content
flex-direction: row;
height: auto;
background: #000000;
color: white;
}
#nav-menu{
display: flex;
flex-direction: row; //display lost horizontally
}
h1{
font-size: 140%;
}
li{
padding: 5px;
list-style: none;
}
a{
text-decoration: none;
color: white
}
li:hover{
background-color: white;
border-radius: 5px;
}
a:hover{
color: red;
}
body{
// reset body properties
padding: 0;
margin: 0;
}
.container{
padding-top: 60px;
}
section{
height: 500px;
width: 960px;
}
.section1{
background-color: blue;
}
.section2{
background-color: orange;
}
.section3{
background-color: red;
}
<body>
<header class="logo">
<h1>The Loch Ness Monster Report</h1>
<ul id="nav-menu">
<li><a class="selected" href="index.html">Latest Sightings</a></li>
<li>History</li>
<li>Report a Sighting</li>
<li>Donate</li>
</ul>
</header>
<div class="container">
<Section class="section1">
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.
</Section>
<Section class="section2">
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.
</Section>
<Section class="section3">
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.
</Section>
</div>
</body>
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;
}
Must stick to the bottom of the webpage, should not be visible until
the user reaches the bottom of the page
For example
HTML
<footer>
This is a footer.
</footer>
CSS
footer {
padding: 10px;
background-color: #999999;
color: white;
text-align: right;
bottom: 0;
width: 96.75%;
position: fixed;
}
The problem is, it's still visible when the user hasn't reached the bottom of the page. I want it so it's not visible until they hit the bottom.
There are many techniques you can use, most do not involve JavaScript. Some rely on more modern CSS features not yet implemented in all browsers (like grid).
Here is a simple, fairly robust and cross browser example. It involves giving the body and HTML a 100% height and using negative margins.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>
With more content, the footer is pushed down
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}
<body>
<div class="content">
<div class="content-inside">
<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>
<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>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>
You can use javascript ...
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
document.getElementsByTagName("footer")[0].style.visibility = 'visible';
}else{
document.getElementsByTagName("footer")[0].style.visibility = 'hidden';
}
};
body {
position: relative;
height:1000px; /*only for example to having scroll */
}
footer {
visibility:hidden;
padding: 10px;
background-color: #999999;
color: white;
text-align: right;
bottom: 0;
width: 96.75%;
position: fixed;
}
<footer> the footer</footer>
https://jsfiddle.net/drqjmssy/
From the jsfiddle link, I am trying to have "div class='main_content'" be the same vertical height as the "div class='sidebar'". How does one accomplish that? If you can't load the fiddle or it's awful formatting, here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My project</title>
<style>
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav > ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
</style>
</head>
<body>
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<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>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<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>
</article>
</div>
<footer>
© Yazen 2018.
</footer>
</div>
</body>
</html>
Sorry if any of this is confusing./////////////////////////////////////////////////////////////////////////////////
You could wrap the elements in a new tag (I've used section) and add display: flex.
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav>ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
section {
display: flex;
}
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<section>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<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>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<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>
</article>
</div>
</section>
<footer>
© Yazen 2018.
</footer>
</div>
I know it's much to read but I hope anybody takes the time to help me. Thanks!!!
This is a pice of my code from my responsive website.
<!DOCTYPE html>
<html>
<head>
<style>
#media (max-width:1227px) and (min-width:769px) {
html {
background-color:rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
padding-left:7px;
padding-right:4px;
list-style-type:none;
}
main {
margin-left:210px;
}
nav {
width:200px;
min-height:600px;
position:absolute;
border-style:solid;
border-width:1px;
border-color:black;
margin-right:10px;
background-color:white;
}
#book_cover {
width:100%;
}
#book_informations {
display:table;
width:100%;
}
#book_left {
margin-right:20px;
float:left;
width:300px;
display:table-header-group;
}
#book_middle {
margin-right:20px;
width:500px;
float:left;
display:table-footer-group;
}
#book_right {
float:left;
width:300px;
border-style:solid;
border-width:1px;
padding:5px;
display:table-row-group;
}
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="navigation_ul_left">
<li class="li_navigation_left">Test1</li><br>
<li class="li_navigation_left">Test2</li><br>
<li class="li_navigation_left">Test3</li><br>
<li class="li_navigation_left">Test4</li><br>
<li class="li_navigation_left">Test5</li><br>
<li class="li_navigation_left">Test6</li><br>
</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="http://lorempixel.com/g/400/200/">
<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
</div>
<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
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 id="book_right">
<div id="payment_div">
<p id="chose_payment">Das ist mein Test-Text.</p></div>
</div>
</div>
</main>
</body>
</html>
The CSS is for the layout between 769px and 1227px. Within this dimensions I want the layout look like this:
The left "column" in the main (excluding the navigation on the left side) should be fixed size, ca. 250 px. The right "column" (the big Lorem-ipsum-placeholder-text) should be variable (perhaps width in %) and fill the space between left "column" and right browser border.
The problem is, I'll have to do it without changing the HTML code. I only can change the CSS code.
I tried this with display:table;, display:table-row-group;… But that doesn't work.
Does anybody know what I'm doing wrong?
What you need to use is #Media ruling in your css in order to maintain both resolutions and to make sure that your html will adapt depending on what resolution the user is using.
please check this code
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
padding-left: 7px;
padding-right: 4px;
list-style-type: none;
}
nav {
width: 200px;
min-height: 600px;
position: absolute;
border-style: solid;
border-width: 1px;
border-color: black;
margin-right: 10px;
background-color: white;
float: left;
clear: both;
}
#book_informations {
width: 100%;
float: left;
}
#book_left {
margin-right: 3%;
float: left;
width: 25%;
display: table-header-group;
}
main {
width: 75%;
float: left;
margin-left: 230px;
}
#book_cover {
width: 100%;
}
#book_middle {
width: 70%;
float: left;
display: table-footer-group;
}
#book_right {
float: left;
width: 100%;
border-style: solid;
border-width: 1px;
padding: 5px;
display: table-row-group;
}
#media screen and (max-width: 768px) {
#book_middle {
margin-left: 2%;
}
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="navigation_ul_left">
<li class="li_navigation_left">Test1</li>
<br>
<li class="li_navigation_left">Test2</li>
<br>
<li class="li_navigation_left">Test3</li>
<br>
<li class="li_navigation_left">Test4</li>
<br>
<li class="li_navigation_left">Test5</li>
<br>
<li class="li_navigation_left">Test6</li>
<br>
</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="200.jpg">
<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
<div id="book_right">
<div id="payment_div">
<p id="chose_payment">Das ist mein Test-Text.</p></div>
</div>
</div>
<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
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>
</main>
</body>
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.