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>
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 having an issue with an :after element. I am using it for an underline in a header. For some reason, it is disturbing the flow of the page. Instead of the title being at the top/centered, on my actual page the title is going into the text under it and aligned left.
This is what is looks like:
I was unable to replicate the issue within a fiddle or snippet, so I was wondering if there is anything within my code that may be causing this. The issue is arising in both Chrome and Firefox.
jsfiddle
.section {
padding: 70px 0;
height: auto;
position: relative;
}
.section-wrap {
margin: 70px 13%;
position: relative;
height: auto;
}
.section-main-title-wrap {
width: 100%;
display: block;
position: relative;
}
.section-main-title {
position: relative;
color: blue;
font-family: 'Muli', sans-serif;
font-size: 1.8rem;
width: auto;
display: inline-block;
padding: .625rem 0;
margin-bottom: 40px;
}
.section-main-title:after {
content: "";
width: 80%;
height: 3px;
background: #489aad;
bottom: 0;
position: absolute;
left: 10%;
}
#home-box-container {
width: 100%;
height: auto;
display: block;
}
.home-box {
border-right: 2px solid #CDCDCD;
width: 30%;
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
.home-box:last-child {
border-right: none;
}
.home-box-title, .home-box-description {
color: #2c2b2c;
line-height: 1.4em;
}
.home-box-title {
margin-bottom: 25px;
font-family: 'Muli', sans-serif;
font-weight: 700;
font-size: 1.2rem;
text-align: center;
}
.home-box-description {
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
<section class="section">
<div class="section-wrap">
<div class="section-main-title-wrap">
<header class="section-main-title text-center">HELLO</header>
</div>
<div id="home-box-container" class="total-center">
<div class="home-box">
<h3 class="home-box-title">Paradigm</h3>
<p class="home-box-description">
"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="home-box">
<h3 class="home-box-title">Structure</h3>
<p class="home-box-description">
"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="home-box">
<h3 class="home-box-title">Integration</h3>
<p class="home-box-description">
"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>
</section>
I've been trying to solve a number of issues for this questionnaire I'm making. I've reformatted this question because my old one was pretty confusing and I'm taking a new angle on the issue.
With the new code I've summited the problem is that the child div .question-container inside the .questionnaire-box is spilling out all the text past the set height. I prefer .question-container to have the same height as .questionnaire-box and scroll on overflow.
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}
<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<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>
<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>
<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>
<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>
<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="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>
This is what it looks like inside my app.
And this is what I'm trying to achieve.
The question is a little overly-complex, but I assume the problem here is that you're unable to scroll down and view all of the content in .question-container.
Does this work?
https://jsfiddle.net/tobyl/bemkkz72/
If so, the critical CSS is the additional padding-bottom in this block:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
There were quite a few things I changed in your code for the snippet below - it will be too much to explain everything. Still, some of the most important changes:
No flexbox
Fixed element (nav) outside of the DIV above it
Look at the code. I can explain more, if this is what you are after, but not tonight (i.e. "good night" :-)...
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.questionnaire-container {
width: 100%;
height: calc(100% -50px);
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
width: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
}
.questionnaire-nav {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
padding: 10px 0;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
<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</p>
<p>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 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</p>
<p>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>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form></body>
</html>
Try to change these three things in .questionnaire-nav:
position to fixed
width to 75%
and deleted margin-left: -20px;
Does this work for you?
html, body {
max-height: 100%;
}
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
overflow-y: auto;
}
.questionnaire-nav {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
justify-content: center;
width: 75%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
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.
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form>
</div>
</body>
</html>
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>
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.