So I've been using the same format to center everything according to ALL screen resolutions. This has been going good for a while, until I tried to add a video.
Is it SPECIFICALLY because it's a video?
JSFIDDLE:
http://jsfiddle.net/SgQ56/
Here is my code.
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="http://i.imgur.com/UMz3wIf.png" />
</div>
<img src="http://i.imgur.com/8snNfFV.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div class="clear"></div>
<div id="mainbody">
<img src="http://i.imgur.com/oMJE74H.png" /></div>
<div id="banished">
<iframe width="325" height="240" src="http://www.youtube.com/embed/Ls8FBFFjMxk" frameborder="0" allowfullscreen></iframe>
</div>
<div id="footer">
<p>©2014 Rythmn Designs<p></div>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
.readmore
{
position: absolute;
margin: 0 auto;
top: 352px;
right: 382px
}
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news2
{
margin: 0 auto;
position: absolute;
top: 125px;
right: 375px
}
#banished
{
margin: 0 auto;
position: absolute;
top: 685px;
right:488px;
}
.news1
{
margin: 0 auto;
position: absolute;
top: 400px;
right: 378px
}
.teamspeak
{
position: absolute;
top: 125px;
right: 30px
}
#ts3viewer_1037062
{
position:absolute;
top: 155px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}
.twitter-timeline
{
right: 27px;
top: 407px;
position:absolute;
width: 310;
height:230;
}
.twitter
{
right: 35px;
top: 406px;
position:absolute;
width: 310;
height:230;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
Does this help? I tested it on my laptop and it seems to be in place
//edit Ok I think I fixed it this time??
#banished{
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 50%;
}
#banished iframe {
position: absolute;
top: 370px;
left: 633px;
height: 15%;
width: 35%;
}
I also put #banshed inside the #mainbody tag in the html
I think you typed right instead of left in #banished. If you change top to 690px and left to 650px it puts the video in the right place (probably not pixel perfect, you can adjust that)
Related
like the title describes; my text in paragraph tags are displaying below each other instead of next to each other. I'm new to HTML and CSS so excuse me if I asked a dumb question.
Here's a picture:
CSS & HTML code:
.Display_shit p {
color: White !important;
margin-right: 95% !important;
margin-left: 5% !important;
font-family: Arial, Helvetica, sans-serif !important;
}
.Display_shit .FP-Title p {
font-size: 40px !important;
top: 225px !important;
}
.Display_shit .FP-Text p {
font-size: 30px;
top: 300px;
}
a {
text-decoration: none;
}
.nav a {
font-family: myFirstFont;
}
#BackgroundVid {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
}
#rcorners1 {
border-radius: 25px;
background: #000;
position: fixed;
left: 0px;
right: 0px;
top: 200px;
height: 90%;
width: 90%;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
#CornerLeftUpLW {
position: fixed;
left: 15px;
top: 20px;
height: 30px;
width: 30px;
}
#CornerRightDownLW {
position: fixed;
left: 335px;
top: 45px;
height: 30px;
width: 30px;
}
#TextBackground {
position: fixed;
left: 0px;
right: 0px;
top: 150px;
height: 2000px;
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.nav {
height: 55px;
background-color: black;
position: unset;
display: inline-block;
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
padding: 20px;
font-size: 35px;
text-align: left;
/*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px rgb(133, 135, 255);*/
}
.nav a{
padding: 20px;
color: white;
}
.nav ul{
position: fixed;
top: -15px;
right: 20px;
}
.nav ul li{
display: inline-block;
}
.nav ul li a{
top: 0px;
right: 0px;
left: 0px;
padding: 10px;
}
<!doctype html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(./Ultra.otf);
}
</style>
<title>LaurenceWit.com</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<!--Background vid-->
<video autoplay muted loop id="BackgroundVid">
<source src="./img/4k background footage.mp4" type="video/mp4">
</video>
<!--Text stuff-->
<div id="rcorners1">
<div class="Display_shit">
<div class="FP-Title">
<p>Title text go brrr</p>
</div>
<div class="FP-Text">
<p>Why am I displayed like this</p>
</div>
</div>
</div>
<!--Navbar-->
<div class="nav">
<div>Laurence Wit</div>
<img src="./img/CornerLeftUp.png" id="CornerLeftUpLW">
<img src="./img/CornerRightDown.png" id="CornerRightDownLW">
<ul>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
And now I have to milk this text so that I can post it. Feel free to leave to opinions on the design since I'm new to this.
remove property margin-right 95% for paragraph
I am working on my final project for my intro to HTML and CSS class.
I am building a very simple website, and everything seemed to be going alright until I wanted to see how the page looks when I resize the browser window. The page looks fine until any sort of resizing is done, and then all of the elements start to get really messed up.
I am a complete noob and have been stuck trying to fix this for almost an hour now. I'm not really sure what to do. I'm trying to make the elements scale until a certain minimum width, but I fear ive built the whole website wrong from the beginning..
Here is the code, if someone could give some insight I would be very grateful..
#wrapper {
height: 1000px;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 150px;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 75px;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 64pt;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 24pt;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->
Your elements are all using fixed pixel sizes in css. you have other options there, you can set elements to percentage of viewport width (50vw) or height (50vh), or just a percentage (50%). If percentage is used inside of another element it will be scaled to that element not the browser window.
Also - you have pt sizes in your css. those dont exist in css and would need to be changed to px. There are various calculations out there for converting pt size to other units.
for example I've copied your snippets below and changed a few sizes to use viewport width (vw) viewport height (vh) and percentages. your css could be like this:
#wrapper {
height: 100vh;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 30vh;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 5vw;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 15vw;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 4vw;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->
Please take a look at the www.google.com.
There, I have footer with Advertising, Bussiness and About on the left and Privacy, Settings, Terms..etc on the right at the bottom of the page .
I am new too developer i am trying to develop same as google page just with html and css, without any functions.
Here is my Html page code
selector {
property: value;
}
h3 {
text-decoration: underline;
position: absolute;
top: 10px;
right: 180px;
border: 0;
}
h4 {
text-decoration: underline;
position: absolute;
top: 10px;
right: 120px;
border: 0;
}
.ribbon {
position: absolute;
top: -160px;
right: -560px;
width: 25px;
}
img {
position: fixed;
width: 300px;
top: 40%;
bottom: 60%;
left: 40%;
margin: auto;
}
a {
position: relative;
margin-top: 400px;
background: no-repeat left;
font-size: 12px;
left: 500px;
}
.venu {
width: 150px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: 2.png;
padding: 20px 20px 20px 45%;
position: fixed;
top: 55%;
bottom: 60%;
left: 30%;
margin: auto;
}
p {
position: fixed;
top: 75%;
bottom: 60%;
left: 30%;
margin: auto;
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
}
.left {
float: left;
left: -800px;
}
.right {
float: right;
text-align: right;
}
.button {
background-color: blue;
border: none;
color: white;
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 2px 2px;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
border: 0;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="2.css" />
<title>Google</title>
<style>
a:link,
a:visited {
background-color: #e0e0e0;
color: #696969;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div id="content">
<img src="22.png" class="ribbon" />
</div>
<button class="button">Sign in</button>
<h3>Gmail</h3>
<h4>Images</h4>
<img src="download.png" />
<input type="text" class="venu">
<p>Google.co.in offered in: English Hindi Tamil Telugu Kanada Malayalam</p>
<div id="footer">
<h4 class="left">Advertising Business About</h4>
<h4 class="right">Privacy Terms Settings Use Google.com</h4>
<div style="clear: both"></div>
</div>
Google Search
I'm Feeling Lucky
</body>
</html>
Please let me know if there is anything I am missing to get the footer.
Make two divs such as leftDiv and rightDiv.
In left Div, enter the list of elements required.
Do the same for right div.
.leftDiv{
float:left;
}
.rightDiv{
float:right;
}
You can use <footer> for setting footer
Here in your, code replace <h4> tags inside the <div id="footer"></div> with the <footer> tag. Just like this:
<div id="footer">
<footer>Advertising Business About</footer>
</div>
and you can also align your footer content by adding <div> tags.
Look at their code, I have made a snippet similar to theirs. Put float: right to the element.
body {
margin: 0;
padding: 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px 0;
background-color: grey;
}
.content.left {
margin-left: 30px;
}
.content.right {
float: right;
margin-right: 30px;
}
<footer>
<span class="content left">Some contents here</span>
<span class="content right">Some contents here</span>
</footer>
I just started my first practice site and I cant seem to position the navigation bar where I want it. I want it centered in the header right above the midbody. I look on W3 but i still cant seem to grasp it. Any help would be greatly appreciated.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link type="css/text" rel="stylesheet" href="animate.css">
<title>
</title>
</head>
<body>
<div class="Header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
<div id="lowerbody"></div>
</div>
<div class="footer"></div>
</body>
</html>
CSS:
.Header {
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
background-color: transparent;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
right: 0;
margin-top: 3px;
margin-right: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#lowerbody {
width: 99%;
height: 49%;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 432px;
margin-bottom: 2px;
border-radius: 5px;
background-color: #F5F5F5;
position: absolute;
}
body {
background-image: url("http://www.freewebheaders.com/wordpress/wp- content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
background-repeat: repeat;
background-attachment: fixed;
}
li {
display:inline;
top: -35px;
}
#navbar {
color: #F8F8F2;
font-family: Arial Black;
margin: auto;
}
Here is a Live Demo that centers your navbar both horizontally and vertically. text-align: center is used to align it horizontally, and line-height: 100px is used to center it vertically.
If you would like it centered on only one axis or the other, remove one of those two declarations.
.Header {
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
background-color: red;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
right: 0;
margin-top: 3px;
margin-right: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#lowerbody {
width: 99%;
height: 49%;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 432px;
margin-bottom: 2px;
border-radius: 5px;
background-color: #F5F5F5;
position: absolute;
}
body {
background-image: url("http://www.freewebheaders.com/wordpress/wp-content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
background-repeat: repeat;
background-attachment: fixed;
}
ul {
margin:0;
padding:0;
}
li {
display: inline;
top: -35px;
}
#navbar {
color: #F8F8F2;
font-family: Arial Black;
margin: auto;
text-align: center;
line-height: 100px;
}
<div class="Header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
<div id="lowerbody"></div>
</div>
<div class="footer"></div>
I am new to this. On my website, when the window is resized or is viewed on a different computer screen, the navigation bar (which is made up of rectangles and triangles) and text moves around and parts disappear. Do the sizes need to be in percentages? If so I am unsure of which parts I need to change.
To view it, please follow this link to my website on Codecademy and click on the full screen button.
body {
background-image: url('http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#background {
background-color: white;
height: 100%;
width: 75%;
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
}
#header {
word-wrap: break-word;
border: 1px solid black;
height: 30%;
width: 60%;
position: relative;
bottom: 90px;
margin-left: auto;
margin-right: auto;
}
.photocontainer {
border: transparent;
height: 55%;
width: 65%;
position: relative;
bottom: 60px;
margin-left: auto;
margin-right: auto;
}
.photocontainer img {
width:100%;
height:100%;
}
.navcontainer {
border: 1px solid black;
height: 10%;
width: 99%;
position: relative;
bottom: 70px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.navcontainer .navbar .navigation li {
list-style: none;
display: block;
float: left;
margin: 1em;
text-align: center;
position: relative;
left: 15%;
}
.navcontainer .navbar .navigation li a {
font-family: quicksand;
text-decoration: none;
text-transform: uppercase;
display: block;
width: 110%;
color: #000000;
font-size: 20px;
vertical-align: middle;
line-height: 31px;
}
.navigation li a:hover {
margin-top: 2px;
}
.navbar {
margin: 0 auto;
width: 90%;
position: relative;
bottom: 42px;
}
.navcontainer .navbar .rectangle {
background: #f1e5cd;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500; /* the stack order: foreground */
margin: 3em 0;
}
.navcontainer .navbar .l-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}
.navcontainer .navbar .l-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -40px;
left: -150px;
}
.navcontainer .navbar .r-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -107px;
}
.navcontainer .navbar .r-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -149px;
right: -145px;
}
<div id="background">
<div id="header"></div>
<div class="navcontainer">
<div class="navbar">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Order</li>
<li>Contact</li>
</ul>
<!-- end the ribbon body -->
</div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</div>
<div class="photocontainer"></div>
Read this article "http://www.w3schools.com/css/css_navbar.asp"
Your code is a bit confused.
Hope this helps.
Here you have a basic example:
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
li {
float: left;
}
a {
background-color: #dddddd;
display: block;
width: 60px;
}
You can find the solution in my fiddle, including absolutely positioned triangles. For simplification purposes I removed your header.
http://jsfiddle.net/L74gdm7j/2/
body {
background-image: url('http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#background {
background-color: white;
height: 100%;
width: 75%;
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
}
.photocontainer {
border: transparent;
height: 55%;
width: 65%;
position: relative;
bottom: 60px;
margin-left: auto;
margin-right: auto;
}
.photocontainer img {
width:100%;
height:100%;
}
.navcontainer {
height: 10%;
width: 99%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.navcontainer .navbar .navigation {
text-align: center;
margin: 0;
padding: 0;
}
.navcontainer .navbar .navigation li {
list-style: none;
display: inline-block;
margin: 1em;
text-align: center;
}
.navcontainer .navbar .navigation li a {
font-family: quicksand;
text-decoration: none;
text-transform: uppercase;
color: #000;
font-size: 20px;
line-height: 31px;
transition-duration: 0.2s;
display: inline-block;
position: relative;
}
.navigation li a:hover {
transform: translateY(10px);
}
.navbar {
margin: 0 auto;
width: 90%;
position: relative;
bottom: 42px;
}
.navcontainer .navbar .rectangle {
background: #f1e5cd;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500;
/* the stack order: foreground */
margin: 3em 0;
}
.navcontainer .navbar .l-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: 0;
left: -38px;
}
.navcontainer .navbar .l-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: -38px;
left: -38px;
}
.navcontainer .navbar .r-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
right: -38px;
top: 0;
}
.navcontainer .navbar .r-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: -38px;
right: -38px;
}
<body>
<div id="background">
<div class="navcontainer">
<div class="navbar">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul class="navigation">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Order
</li>
<li>Contact
</li>
</ul>
<!-- end the ribbon body -->
</div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</div>
<div class="photocontainer"></div>
</div>
</body>