Can someone please tell me how to make text in the boxes can be pushed down to stop overlapping and text shouldn't go out of the box? Also, I need some margin in the column boxes.
There are media queries and ignore that one. I just want to know how to change the CSS so that text is not overflowing from the box and I don't want to use the overflow property also. Also how to give the margin to the column boxes provided boxes remain in the line.
Code CSS and HTML -->
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1 {
position: absolute;
background-color: orange;
top: 0;
right: 0;
padding: 2%;
}
h2.item2 {
position: absolute;
background-color: green;
top: 0;
right: 0;
padding: 2%;
}
h2.item3 {
position: absolute;
background-color: skyblue;
top: 0;
right: 0;
padding: 2%;
}
section {
padding: 2%;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">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 zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">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>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">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>
</div>
</body>
</html>
By setting the position to absolute you are removing the html from the normal 'flow' of the document, so you can't apply normal css properties such as margin.
To circumvent this, you should float the h2's right instead and then apply a margin to prevent your text being hiddent under the element.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1, h2.item2, h2.item3 {
background-color: orange;
padding: 2%;
display: inline-block;
float: right;
margin: .3rem;
}
h2.item2 {
background-color: green;
}
h2.item3 {
background-color: skyblue;
}
section {
padding: 2%;
}
.desc1, .desc2, .desc3{
padding: 1rem;
margin: 0.5rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">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 zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">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>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">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>
</div>
</body>
</html>
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 want these below contents to have 50% width equally on PC's and 100% in mobile devices.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box-left {
width: 100%
}
.box-right {
width: 100%
}
</style>
<div class="container">
<div class="box-left">
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.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
Expand or Shrink the view to check if its working.
.container {
display: flex;
flex-direction: column;
}
.box-left {
width: 100%;
font-size: 1rem;
font-family: 'Work Sans', sans-serif;
line-height: 1.5;
padding: 1rem;
}
.box-right {
margin: 0 auto;
width: 100%;
height: auto;
}
#media(min-width:576px) {
.container {
flex-direction: row;
}
.box-left {
width: 50%;
background: lightblue;
}
.box-right {
width: 50%;
background: lightcoral;
}
}
<div class="container">
<div class="box-left">
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.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
I'm practicing my CSS skills and as you can see below, I've managed to get all my main content between header and footer to line up nicely by using margin: auto.
However I am stuck on figuring out how I get a nice layout going within the footer. What I want is:
Mobile view: To have the footer elements stack vertically and in line with the rest of the site content.
Fullscreen (500px+): Have the footer elements line up horizontally and in line with the rest of the site content.
I've tried to use margin: auto like I did with the main content but it doesn't work.
I can't get the elements inside the footer to do anything, I can actually only see the embedded map for some reason I can't understand.
I hope someone can help me out. Thanks
https://jsfiddle.net/y40vcw1q/
html body {
margin: 0;
background-color: #DCDBF1;
font-family: "Raleway", sans-serif;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-areas:
"header"
"menu"
"content"
"content2"
"footer"
}
.wrapper > .content, .content2, .footercontent {
margin: 0 auto;
line-height: 2;
max-width: 50%;
}
.header {
grid-area: header;
border-bottom: #EFEEFC solid 1px;
}
.header h1 {
text-align: center;
}
.menu {
display: flex;
flex-direction: row;
grid-area: menu;
line-height: 2em;
padding-left: 20px;
}
.menu a {
padding-right: 10px;
}
.menu a:link {
text-decoration: none;
color: #666666;
}
.content {
grid-area: content;
}
.content2 {
grid-area: content2;
}
.content img {
height: auto;
width: 100%;
max-width: 200px;
border: solid black 1px;
}
.content2 img {
height: auto;
width: 100%;
max-width: 200px;
border: solid black 1px;
}
.footer {
grid-area: footer;
border-top: #EFEEFC solid 1px;
padding: 20px 0px;
background-color: #E595B3;
font-size: small;
}
.footer iframe {
border: 1px solid black;
height: auto;
width: 100%;
max-width: 200px;
}
#media screen and (min-width: 500px) {
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header header"
"menu menu"
"content content2"
"footer footer"
}
.header h1 {float: right;
padding-right: 50px;}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>title.</h1>
</div>
<div class="menu">
<div class="menuitem">
about
</div>
<div class="menuitem">
contact
</div>
<div class="menuitem">
cv
</div>
</div>
<div class="content">
<h1>Content</h1>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*" alt="">
<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>
<h1>Content 2</h1>
<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="content2">
<h1>Content 3</h1>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*" alt="">
<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>
<h1>Content 4</h1>
<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="footer">
<div class="footercontent">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.828828834796!2d-74.00234906126316!3d40.7629659216891!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25850a4606051%3A0x1976b26060ef9a02!2sHell's%20Kitchen%2C%20New%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sda!2sdk!4v1598647639460!5m2!1sda!2sdk"</iframe>
<h1>About</h1>
<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. </p>
<h1>Archive</h1>
<ul>
<li>jan</li>
<li>feb</li>
<li>mar</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I want to make the height of the paragraph 100%, but when I try it doesn't do it. Setting the size in pixels does work. What I have:
*,
html,
body {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
.infoDiv {
height: 50%;
background: grey;
background-size: cover;
opacity: 0.6;
}
.textStart p {
height: 100%;
display: table-cell;
vertical-align: middle;
}
<div class="infoDiv">
<div class="imgStart col-xs-12 col-sm-7"></div>
<div class="textStart col-xs-12 col-sm-5">
<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>
EDIT: The solution is giving it the ViewHeight (vh).
Here is the working code
*,
html,
body {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
.infoDiv {
height: 50%;
background: grey;
background-size: cover;
opacity: 0.6;
}
.textStart p {
height: 100vh;
display: table-cell;
vertical-align: middle;
}
<div class="infoDiv">
<div class="imgStart col-xs-12 col-sm-7"></div>
<div class="textStart col-xs-12 col-sm-5">
<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>
In CSS3 you could use
height: calc(100% - 60px);
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.