Adding "check" icon before text on notification - html

I'm trying to design a notification and I want to add an icon before the text, but I'm not getting it! My code looks like this:
HTML
<html>
<head>
<title></title>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="notif-container">teste</div>
</body>
</html>
CSS
body {
background-color: white !important;
}
.template, .notification {
display: none;
}
.notif-container::before{
max-width: 5px;
max-height: 5px;
background-image: url(https://image.flaticon.com/icons/svg/1828/1828743.svg);
background-position: left;
}
.notif-container {
width: 20%;
position: absolute;
right: 15%;
display: flex;
flex-flow: row;
flex-wrap: wrap;
padding: 10px;
background-image: -webkit-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -moz-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -o-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-position: center;
color: #ffffff;
text-shadow: 1px 1px #000;
border-radius: 2px;
margin: 5px;
font: caption;
font-size: 12px;
font-weight: bold;
text-align: center;
}
Somebody knows what I'm doing wrong and how can I do it? I already tried various ways but without success


You need position: relative on the element with the class notif-container.
body {
background-color: white !important;
}
.template, .notification {
display: none;
}
.notif-container::before {
content: '';
width: 16px;/*set the width instead of the max-width*/
height: 16px;/*The same goes here*/
background-image: url(https://image.flaticon.com/icons/svg/1828/1828743.svg);
background-position: center;/*Add this*/
background-size: contain; /*Add this*/
}
.notif-container {
width: 20%;
position: relative;/*change this*/
display: flex;
flex-flow: row;
flex-wrap: wrap;
padding: 10px;
background-image: -webkit-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -moz-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -o-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-position: center;
color: #ffffff;
text-shadow: 1px 1px #000;
border-radius: 2px;
margin: 5px;
font: caption;
font-size: 12px;
font-weight: bold;
text-align: center;
}
<div class="notif-container">teste</div>
Here is a clean version using flex-end on the parent element.
.notif-container{
display: flex;
justify-content: flex-end;
padding: 2rem;
}
.notif-container button {
border: none;
position: relative;/*change this*/
padding: 10px 24px;
color: #ffffff;
background-image: -webkit-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -moz-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -o-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-position: center;
text-shadow: 1px 1px #000;
border-radius: 2px;
margin: 5px;
font: caption;
font-size: 12px;
font-weight: bold;
}
.notif-container button::before {
content: '';
position: absolute;
left: 6px;
width: 16px;/*set the width instead of the max-width*/
height: 16px;/*The same goes here*/
background-image: url(https://image.flaticon.com/icons/svg/1828/1828743.svg);
background-position: center;/*Add this*/
background-size: contain; /*Add this*/
}
<div class="notif-container">
<button>teste</button>
</div>

Related

Clipped Button in css not as Expected

Expected
.clipped-button {
height: 42px;
min-width:120px;
width: auto;
display: block;
border:none;
border-radius:2px;
align-items:center;
clip-path: polygon(0px 0%, 0px 60%, 18px 100%, 100% 100%, 100% 40%, calc(100% - 18px) 0px);
padding: 2.625px;
background-color: #993029;
}
.btn {
width: 100%;
height: 100%;
background-color: rgb(205, 65, 58);
display:flex;
justify-content:center;
align-items:center;
clip-path: polygon(0px 0%, 0px 60%, 16px 100%, 100% 100%, 100% 40%, calc(100% - 16px) 0px);
color: rgb(255, 255, 255);
}
<button class="clipped-button"><div class="btn">Click Me</div>
</button>
Not getting the clipped corners rounded
Please help to round the clipped corners at top right and bottom left if possible

Rather than a clip-path perhaps something similar to the following is an option.
.button {
display: inline-block;
width: 200px;
height: 50px;
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
text-align: center;
text-decoration: none;
justify-content: center;
align-items: center;
outline: none;
color: #fff;
border-radius: 25px;
border: 5px solid rgb(190, 40, 40);
background-color: rgba(200, 60, 60, 0.6);
background-image: linear-gradient(to bottom right, rgba(255,0,0,0), rgba(200, 60, 60, 0.8));
}
.button:hover {
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
/*--background-color: rgba(200, 60, 60, 1.0); --alt color--*/
background-image: linear-gradient(to bottom right, rgba(255,0,0,0), rgba(250, 100, 100, 1.0));
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\1F846 \1F846';
position: absolute;
opacity: 0;
top: -2px;
right: -40px;
transition: 0.5s;
}
.button:hover span {
padding-right: 40px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<button class="button"><span> Click Me </span></button>

Background-image moving while i press button

I have a button with icon which I made by background-image property. And also I have focus, active pseudoclasses at button, and when button clicked it adds a border to button. And because of the border, I think, my icon moving on a px.
How can I fix it?
.form__button__section__button__social__facebook{
width: 420px;
height: 48px;
border-radius: 2px;
border:none;
outline: none;
margin-bottom: 16px;
background: #597DA3;
background-image: url("facebook_logo.png");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: 112px center;
font-family: 'RF Tone';
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
padding: 0px 0px 0px 15px;
}
.form__button__section__button__social__facebook:focus{
background-color: #3B5998;
border: 1px solid rgba(40, 40, 40, 0.1);
box-sizing: border-box;}
.form__button__section__button__social__facebook:hover,:active{
background-image: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}
<button class="form__button__section__button__social__facebook" > Facebook</button>

It's effected by the border.
Try adding a transparent border for the button like below.
.form__button__section__button__social__facebook{
width: 420px;
height: 48px;
border-radius: 2px;
border: 1px solid transparent;
outline: none;
margin-bottom: 16px;
background: #597DA3;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAaVBMVEU6VZ////81Up0yT5xgc61+jbsvTZyXo8hFXaOirM0nSJmlrs7O1OUkRpkfQ5c1UZ1oerKHlcDp6/M9WKHHzeHV2ulxgravt9Td4Ozl6PGDkb7ByN5YbatQZ6j29/q3v9h2hrhMY6aQnMSsAnKHAAAC70lEQVR4nO3caXLiMBRFYdoihhhsQ5jDlPT+F9mdqv7bRrYQ7z7XOQug9BUWHiQzmRARERERERERERERERERqVe0IZQPCtaDHFwo62Yz/VrP3jtbrH0Sy7rYH46/YtpV1oPtX6jCbBel+2npThjq/Taa51AYmrdTH583YdHsP/r5nAnLTa/j05+w+ezv8yRsq/MQoB9hmPeegb6E5eU2DOhFWK4G+rwIw3CgD2G4Dge6ELaboXPQi7CJu4nwK6zvKUAHwvCVBHQgrFMmoQdh4jGqL2wviUB5YRP/uMKnsJ2mAtWF9XLkwjblcs2FsDqMXZh6LpQXhn06UFtYpZ7t5YX1wEczboTF/AlAaWFYP0OovPZU9pmGt9194W79sIq/Jt2uqqrytwbcxJ4NT9e6tR7soEIk8N749E2K7zjgubEe6dAi75yOboGxwrnTQ/RvRZTwIHy6e1SccF5Yj3N4UcJjbT3MhKKEh9J6mAlFCZWvyR4WJXxDqBxChPohRKgfQoT6IUSoH0KE+iFEqB9ChPqNQ1h0vKJcxWwt/aofvelsDFzNOlpECO9dH/DT+8ZUWMYgErNdfXuB8Ga7RPwCofHy2wuE59EfpQvbH9MXCNejF65st2q8QPhtu5Mhv/BmfE2TX/hhvGMqv3BpvBslv/BuvGUqv3A2+nloff+YX3gx3rmYX2j9CCC78Ga9NzO78GS9dTG7cDv679B8c2Z24e/R/9LsRy+8Wm/kzy60nobZhdb3TvmF9u8e5hYaP0p8gfB99PPQ/l2F3MKp+StDuYXWvuxC60eJ+YXm907ZhQJ/NlA+4d9ZOrrbH6WTzbyjmL+D/Oz6BNsl/H8V/y9E7TYpOz7BGveoceyn6QohQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLs0R8aFUYEFLSeAgAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: 112px center;
font-family: 'RF Tone';
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
padding: 0px 0px 0px 15px;
}
.form__button__section__button__social__facebook:focus{
background-color: #3B5998;
border: 1px solid rgba(40, 40, 40, 0.1);
box-sizing: border-box;}
.form__button__section__button__social__facebook:hover,:active{
background-image: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}
<button class="form__button__section__button__social__facebook" > Facebook</button>

How to place two elements next to each other

The issue I'm having is that the two elements mafia and vampire don't align correctly. I'm able to retain the properties of the mafia element so that it looks like a box, but I can't do the same thing for the vampire element.
code:
div#boxes {
clear: both;
float: right;
width: 400px;
margin: 0 10px 10px;
vertical-align: top;
display: inline;
background-color: #fff;
border: 1px solid black;
height: 75px;
/* overflow: hidden; */
}
span#mafia {
clear: both;
float: left;
width: 199px;
margin: 0 -1px -1px;
vertical-align: top;
display: inline-block;
border: 1px solid rgb(153, 170, 181);
text-align: center;
position: relative;
top: -0.5px;
}
span#vampire {
clear: both;
/* float: initial; */
width: 50%;
margin: 0 -1px -1px;
vertical-align: top;
display: contents;
border: 1px solid rgb(153, 170, 181);
/* text-align: center; */
position: relative;
top: -0.5px;
/* margin-bottom: inherit; */
bottom: 50px;
padding-top: 50px;
}
div.rititle {
/* position: relative; */
vertical-align: top;
border-bottom: 1px solid rgb(153, 170, 181) !important;
float: left;
width: 200px;
/* margin-bottom: initial !important; */
text-align: center;
clear: both;
margin-left: auto;
display: inline-block;
font-size: 17px;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
span#mafia {
clear: both;
float: left;
width: 199px;
margin: 0 -1px -1px;
vertical-align: top;
display: inline-block;
border: 1px solid rgb(153, 170, 181);
text-align: center;
position: relative;
top: -0.5px;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
#container {
left: 0px;
color: #000;
width: 1000px;
min-width: 499px;
margin: 10px auto;
position: relative;
background-color: #FFF;
box-shadow: -2px 2px 5px #111;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
body {
color: #FFF;
background-color: #999;
font-family: Arial, sans-serif;
/* margin-bottom: 40px; */
}
.rititle {
margin-left: 10px;
font-weight: bold;
vertical-align: top;
}
* {
margin: 0px;
padding: 0px;
}
div {
display: block;
}
div#switch {
clear: both !important;
width: 200px !important;
margin: 0 0px 0px !important;
vertical-align: middle !important;
display: block !important;
text-align: center !important;
position: relative !important;
border: 1px solid rgb(153, 170, 181);
/*top: -76px;*/
float: right;
text-align: center !important;
border-bottom: 1px solid rgb(153, 170, 181) !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="boxes" style="background-color: rgb(39, 44, 48);color: rgb(230, 230, 230);border-color: rgb(153, 170, 181);"><span id="mafia" style="background-color: rgb(39, 44, 48); color: rgb(230, 230, 230); border-color: rgb(153, 170, 181);"><div class="rititle">Mafia</div><div style="font-size: 12px"><span class="rititle">Mafioso: </span>2. Cotton Mather</div>
<div style="font-size: 12px"><span class="rititle">Consort: </span>4. Edward Bishop</div>
<div style="font-size: 12px"><span class="rititle">Godfather: </span>7. Black Stain</div>
<div style="font-size: 12px"><span class="rititle">Consigliere: </span>10. bonr juice</div>
</span><span id="vampire" style="background-color: rgb(39, 44, 48); color: rgb(230, 230, 230); border-color: rgb(153, 170, 181);"><div id="switch" class="rititle">Coven</div><div style="font-size: 12px"><span class="rititle">Coven Leader: </span>1. Oppai Dragon</div>
<div
style="font-size: 12px"><span class="rititle">Medusa: </span>3. Jades Whoree</div>
<div style="font-size: 12px"><span class="rititle">Potion Master: </span>11. RainBow</div>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
</span>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
</div>
</body>
</html>
I am trying to align the two span elements called mafia and vampire along with their children elements like columns. Also, would it be possible to make it so that the height of the element boxes changes to fit the length of the longest column?

As simple as below using css flexbox;
Your code is sooo dirty, mostly redundant, false use of classes and styles.
.columns{
display: flex;
}
.columns .box{
flex: 1;
background: #000;
color: #fff;
border: 1px solid #f5f5f5;
text-align: center;
display: flex;
flex-direction: column;
}
.box .title{
font-weight: bold;
font-size: 15px;
padding: 5px;
border: 1px solid #f5f5f5;
}
<div class='columns'>
<div class='box'>
<span class='title'>Mafia</span>
</div>
<div class='box'>
<span class='title'>Coven</span>
<span>sssssss</span>
<span>sssssss</span>
<span>sssssss</span>
</div>
</div>

Unwanted Space next to main content on website

So next to the main content (outside of the browser width) if you scroll to the left of the page there is extra space occupied by only the background of the Body CSS background. Here's the site in action http://test.crows-perch.com/.
#charset "utf-8";
/* CSS Document */
body {
z-index: 0;
background: url(../images/background-texture%20d.jpg);
width: 100%;
}
#page {
z-index: 1;
width: 1000px;
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#Footer {
width: 100%;
height: 230px;
position: absolute;
left: 0px;
}
#TopLinks {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0;
height: 37px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: url(../images/background-texture-b.jpg);
}
#Links {
position: relative;
top: 5px;
left: 329px;
text-align: center;
}
#Links a {
text-decoration: none;
color: #7F7F7F;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-size: 13px;
}
#Links a:hover {
text-decoration: none;
color: #FFFFFF;
}
#HeaderContainer {
z-index: 3;
position: absolute;
top: 28px;
left: 0px;
width: 100%;
height: 65px;
margin: 0;
background: url(../images/tri-button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#title {
z-index: 4;
position: relative;
width: 252px;
height: 70px;
margin: 0 auto;
top: -10px;
right: 383px;
}
#Home {
z-index: 4;
position: relative;
width: 96px;
height: 65px;
margin: 0 auto;
right: 204px;
top: -70px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Home:hover {
width: 96px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#HomeT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Home {
text-decoration: none;
height: 65px;
}
#Guides {
z-index: 4;
position: relative;
margin: 0 auto;
top: -135px;
right: 89px;
width: 133px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Guides:hover {
width: 133px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#GuidesT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Guides {
text-decoration: none;
}
#Forum {
z-index: 4;
position: relative;
margin: 0 auto;
top: -200px;
left: 33px;
width: 114px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Forum:hover {
width: 114px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#ForumT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Forum {
text-decoration: none;
}
#Blog {
z-index: 4;
position: relative;
margin: 0 auto;
top: -265px;
left: 141px;
width: 102px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Blog:hover {
width: 102px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#BlogT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Blog {
text-decoration: none;
}
#Guilds {
z-index: 4;
position: relative;
margin: 0 auto;
top: -330px;
left: 262px;
width: 138px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Guilds:hover {
width: 138px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#GuildsT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Guilds {
text-decoration: none;
}
#Play {
z-index: 4;
position: relative;
margin: 0 auto;
width: 168px;
height: 65px;
top: -395px;
left: 415px;
background: url(../images/button%20texture%20bright.jpg);
background-size: cover;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Play:hover {
width: 168px;
background: url(../images/button%20overlay%20c.png) no-repeat center, url(../images/button%20texture%20bright.jpg) no-repeat top left;
background-size: cover;
}
#PlayT {
text-decoration: none;
font-family: "Cinzel Bold";
font-size: 18px;
font-weight: bold;
color: #000000;
line-height: 64px;
vertical-align: middle;
}
a.Play {
text-decoration: none;
}
#Top-Gradient {
z-index: 6;
position: absolute;
top: 95px;
left: 0px;
width: 100%;
height: 25px;
margin: 0;
background: url(../images/gradient.png) repeat-x;
}
#PictureContainer-top {
z-index: 5;
position: absolute;
top: 95px;
left: -2px;
width: 100%;
height: 423px;
margin: 0;
background: url(../images/fire%20bg%20art.jpg) center no-repeat;
background-size: 100%;
}
#G1 {
z-index: 6;
width: 1037px;
height: 19px;
left: -19px;
top: 194px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
opacity: 0.5;
position: relative;
}
#ContentTop {
z-index: 6;
position: relative;
margin: 0 auto;
background: url(../images/tri-button%20texture.jpg) repeat-x center top;
width: 1037px;
height: 49px;
left: -19px;
top: 173px;
-webkit-box-shadow: 0px 0px 17px -1px #000000;
box-shadow: 0px 0px 17px #000000;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
#SwordL {
margin-bottom: 17px;
margin-left: 9px;
}
#TeamUp {
z-index: 6;
position: relative;
margin: 0 auto;
top: -23px;
left: 96px
}
#SwordR {
margin-bottom: 15px;
margin-left: -9px;
}
#G2 {
z-index: 6;
width: 1039px;
height: 19px;
top: -60px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
position: relative;
margin: 0 auto;
}
#ContentAfterTop {
z-index: 9;
width: 1011px;
height: 35px;
top: -60px;
position: relative;
margin: 0 auto;
webkit-box-shadow: 6px 6px 43px -1px #000000;
box-shadow: 6px 6px 43px #000000;
border-width: 1px;
border-style: solid;
border-color: #000000;
position: relative;
background: url(../images/tri-button%20texture.jpg) repeat left top;
}
#G3 {
z-index: 5;
width: 267px;
height: 19px;
position: relative;
margin: 0 auto;
left: -633px;
top: 120px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
opacity: 0.5;
-webkit-transform: matrix(0, -1, 1, 0, 124, 143);
-ms-transform: matrix(0, -1, 1, 0, 124, 143);
-o-transform: matrix(0, -1, 1, 0, 124, 143);
transform: matrix(0, -1, 1, 0, 124, 143);
}
#G3-2 {
z-index: 5;
width: 269px;
height: 19px;
margin-top: 400px;
left: 730px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
opacity: 0.5;
-webkit-transform: matrix(0, 1, -1, 0, 144, -125);
-ms-transform: matrix(0, 1, -1, 0, 144, -125);
-o-transform: matrix(0, 1, -1, 0, 144, -125);
transform: matrix(0, 1, -1, 0, 144, -125);
position: relative;
}
#AfterPicBreak {
z-index: 6;
height: 240px;
border-color: #000000;
background: url(../images/bg%20texture%20top.jpg) repeat-x left top;
position: absolute;
margin: 0 auto;
top: 485px;
left: 0px;
width: 100%;
}
#G4 {
z-index: 5;
height: 92px;
width: 100%;
position: absolute;
left: 0px;
top: 430px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
}
#G5 {
z-index: 6;
width: 999px;
height: 19px;
position: relative;
margin: 0 auto;
right: 999px;
top: -247px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
-webkit-transform: matrix(-1, 0, 0, -1, 999, 19);
-ms-transform: matrix(-1, 0, 0, -1, 999, 19);
-o-transform: matrix(-1, 0, 0, -1, 999, 19);
transform: matrix(-1, 0, 0, -1, 999, 19);
}
#ContentBreak {
z-index: 5;
background: url(../images/break%20-%20large.jpg) repeat-x left top;
position: relative;
left: 0px;
top: -260px;
width: 999px;
height: 61px;
}
#Content {
z-index: 7;
background: url(../images/content%20bg.jpg) repeat left top;
position: relative;
top: -268px;
left: 0px;
width: 999px;
height: 88px;
padding-bottom: 700px;
}
#G6 {
z-index: 8;
position: relative;
margin: 0 auto;
top: -1078px;
left: -997px;
width: 996px;
height: 19px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
-webkit-transform: matrix(-1, 0, 0, -1, 996, 19);
-ms-transform: matrix(-1, 0, 0, -1, 996, 19);
-o-transform: matrix(-1, 0, 0, -1, 996, 19);
transform: matrix(-1, 0, 0, -1, 996, 19);
}
#LinkText {
z-index: 7;
position: relative;
top: -1040px;
text-align: center;
width: 100%;
}
#LinkText a {
font-size: 23px;
color: #D2C300;
font-family: "Cinzel Regular";
font-weight: 700;
font-size: 23px;
text-decoration: none;
}
#ContentSmallBreak {
z-index: 7;
background: url(../images/small%20break.jpg) repeat-x left top;
width: 999px;
height: 34px;
position: relative;
margin: 0 auto;
top: -1010px;
}
#BottomG {
z-index: 6;
background: url(../images/bg%20texture%20bottom.jpg) repeat-x center bottom;
width: 100%;
height: 247px;
position: relative;
top: -140px;
left: 0px;
}
#G7 {
z-index: 10;
height: 19px;
width: 100%;
position: relative;
left: 0px;
top: -156px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
}
#FooterBreak {
z-index: 8;
background: url(../images/break%20-%20large.jpg) repeat-x left top;
height: 54px;
position: relative;
left: 0px;
top: -158px;
width: 100%;
}
#FooterBG {
z-index: 6;
background: url(../images/parchment.jpg) repeat-x;
width: 100%;
height: 149px;
position: relative;
left: 0px;
top: -158px;
}
#FooterBreak2 {
z-index: 12;
background: url(../images/FooterBreak.jpg);
width: 100%;
height: 11px;
position: relative;
left: 0px;
top: -158px;
}
#font-face {
font-family: 'Cinzel Regular';
src: url('../fonts/cinzel-regular-webfont.eot');
src: url('../fonts/cinzel-regular-webfont.woff') format('woff'), url('../fonts/cinzel-regular-webfont.svg') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Cinzel Bold';
src: url('../fonts/cinzel-regular-bold.eot');
src: url('../fonts/cinzel-regular-bold.woff') format('woff'), url('../fonts/cinzel-regular-bold.svg') format('svg');
font-weight: 400;
font-style: normal;
}

The main reason for this is the div with the ID Links. By default, is has a 100% width. Then you push it to the right by 329px (using left: 329px). These 329px are the amount of unwanted space you get.
Instead, you’ll probably want to do something like this:
#Links {
position: relative;
top: 5px;
text-align: right;
width: 1011px;
margin: 0 auto;
}
You’ll then still have two additional pixels. These are caused by the borders of #TopLinks and #HeaderContainer. You can fix this by either setting box-sizing: border-box or by getting rid of the 100% width and setting right: 0 instead.

I don't see any space to the left of the content, the space to the right is caused by the way you position elements: if you shift block elements to the right setting left property, they keep their width and need some space outside of the screen. You need to either set the width manually or change their display property toinline-block (start with #Links, you'll see what I'm talking about).

Float 2 divs and background image

I'm trying to float two divs and set background images to them. But the desired look I couldn't get.
This is what I wanna do
But this is what I get
My HTML
<div class="orange_bk">Outstanding</div> <div class="black_bk">Play</div>
css
.orange_bk{
float: left;
background: url(../images/Outstanding%20button.png);
background-position: 8px -10px;
width: 45%;
height: 33px;
background-repeat: no-repeat;
line-height: 23px;
text-align: center;
font-size: 15px;
}
.black_bk{
float: right;
background: url(../images/Play%20Button.png);
background-position: 8px -10px;
width: 45%;
height: 33px;
background-repeat: no-repeat;
line-height: 23px;
text-align: center;
font-size: 15px;
}
These are the two images I used

You could ditch the images altogether and use background: #fb892b; for the orange and set a gradient over the top. Also use border-radius for the rounded corners
Quick jsfiddle using gradients and border-radius
.orange_bk, .black_bk {
color:#fff;
float: left;
background: #fb892b;
width: 50%;
height: 33px;
line-height: 2em;
text-align: center;
font-size: 15px;
border-radius:.25em 0 0 .25em;
padding:.25em 0;
font-weight:bold;
font-family: sans-serif;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0.00)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
}
.black_bk {
float: right;
background: #000;
border-radius: 0 .25em .25em 0
}

Try to set line-height to be the same as the height of the background (33px).
Also both divs have width: 45%; ..what do you want to do with the rest of 10% that the element that contains these elements has ?

You can tidy this code up a lot and keep it much simpler. E.g. wrap an element around those two divs and do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.wrap {
width: 598px;
overflow: hidden;
}
.wrap div {
width: 50%;
line-height: 58px;
text-align: center;
font-size: 15px;
}
.orange_bk {
float: left;
background: url(../images/Outstanding%20button.png) no-repeat 0 0;
}
.black_bk{
float: right;
background: url(../images/Play%20Button.png) no-repeat 0 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="orange_bk">Outstanding</div> <div class="black_bk">Play</div>
</div>
</body>
</html>

The orange div is simply to long for your orange BG. Try adding a max-width for .orange_bk!
You should also set id to display:block and add a padding-top, so that the text is vertically centered

Try this:
* {
margin: 0;
padding: 0;
}
body {
color: white;
}
.orange_bk{
float: left;
background: url(r55XB.png);
width: 50%;
height: 26px;
padding-top: 7px;
background-repeat: no-repeat;
text-align: center;
font-size: 15px;
}
.black_bk{
float: right;
background: url(tRfQv.png);
width: 50%;
height: 26px;
padding-top: 7px;
background-repeat: no-repeat;
text-align: center;
font-size: 15px;
}</style>
Using percentage values with a non-repeating background makes it look awkward when the window is sized normally so you may want to change something related to that.

.main{width:400px;}
.orange_bk{
float: left;
background: url(r55XB.png);
/*background-position: 8px -10px;*/
width: 45%;
height: 58px;
background-repeat: no-repeat;
line-height: 58px;
text-align: center;
font-size: 15px;
text-shadow: 2px 2px 2px #000;
color:#FFF;
}
.black_bk{
float: left;
background: url(tRfQv.png);
background-position: -119px 0px;
width: 45%;
height: 58px;
background-repeat: no-repeat;
line-height: 58px;
text-align: center;
font-size: 15px;
text-shadow: 2px 2px 2px #000;
color:#FFF;
}
try this solution.....
and also please modify the images into same size