1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Need Help with My website

Discussion in 'Web Development' started by Cade Bray, Apr 13, 2013.

  1. Cade Bray

    Cade Bray New Member

    I first want to say sorry If I'm posting in the wrong area. I recently Got a Template from the website and Used it and it was fine. When I upload it the my Website FTP It sorta Crashed. I can't see The whole thing, but Friends are able to see it fine.

    The Style.css
    Code:
    @font-face {
        font-family: 'PTSerif-Caption';
        src: url('../fonts/PT_Serif-Caption-Web-Regular.eot');
        src: local('☺'), url('../fonts/PT_Serif-Caption-Web-Regular.woff') format('woff'), url('../fonts/PT_Serif-Caption-Web-Regular.ttf') format('truetype'), url('../fonts/PT_Serif-Caption-Web-Regular.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    body {
        background: url(../images/bg-body.jpg) repeat left top;
        font-family: Arial, Helvetica, sans-serif;
        min-width: 960px;
        margin: 0;
    }
    img {
        border: 0;
    }
    .wrapper {
        width: 960px;
        margin: 0 auto;
    }
    .clearfix:after {
        clear:both;
        content:"";
        display:block;
        height:1%;
        line-height:0;
        visibility:hidden;
    }
    /*------------------------------ HEADER ------------------------------*/
    .btn1, .btn2, .btn3, #newsletter input {
        background: url(../images/interface.png) no-repeat;
    }
    .btn1, .btn2, .btn3 {
        color: #fdfdfd;
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        text-shadow: -3px 0 3px #053131;
        text-transform: uppercase;
    }
    .btn1 {
        background-position: 0 0;
        height: 34px;
        line-height: 34px;
        width: 202px;
        padding: 0 3px 9px;
    }
    .btn2 {
        background-position: 0 -53px;
        height: 37px;
        line-height: 37px;
        width: 216px;
        padding: 0 3px 8px;
    }
    .btn3 {
        background-position: 0 -108px;
        font: 22px/49px Georgia, "Times New Roman", Times, serif;
        height: 49px;
        width: 222px;
    }
    .btn1:hover {
        background-position: -222px 0;
    }
    .btn2:hover {
        background-position: -232px -53px;
    }
    .btn3:hover {
        background-position: -232px -108px;
    }
    /*------------------------------ HEADER ------------------------------*/
    #header {
        background: url(../images/bg-header.png) repeat-x center top;
        height: 50px;
        padding: 16px 0 0;
        text-align: right;
    }
    /** Logo **/
    #logo {
        float: left;
        display: inline-block;
        margin-left: 10px;
    }
    /** Navigation **/
    #navigation {
        display: inline-block;
        height: 30px;
        list-style: none;
        margin: 0 10px;
        padding: 0;
    *width: 516px; /** Needed for IE7 **/
    }
    #navigation li {
        float: left;
        margin: 0 30px;
    }
    #navigation li:first-child {
        margin-left: 0;
    }
    #navigation li a {
        color: #efefef;
        line-height: 30px;
        padding: 0;
        text-decoration: none;
    }
    #navigation li a:hover, #navigation li.selected a {
        color: #44b2f1;
    }
    /*------------------------------ CONTENTS ------------------------------*/
    #contents {
        background: url(../images/bg-content.png) repeat-x center top;
        margin: 0 0 24px;
        padding: 56px 0 0;
    }
    #contents h1, #featured h3 {
        color: #fbfdfd;
        font: italic 34px Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        margin: 0 0 18px;
    }
    #contents p {
        color: #e8eff4;
        font-size: 14px;
        line-height: 24px;
        margin: 0;
        padding: 0 0 30px;
        text-align: justify;
    }
    #contents p a {
        color: #e8eff4;
    }
    #contents p a:hover {
        color: #0aa3fa;
    }
    #contents p b {
        display: block;
    }
    #contents .body {
        width: 940px;
        margin: 0 auto;
        padding: 0 10px;
    }
    #contents .click-here {
        float: right;
        background: url(../images/spacecraft.jpg) no-repeat center top;
        display: inline-block;
        height: 162px;
        width: 301px;
        margin-left: 20px;
        text-align: center;
    }
    #contents .click-here h1 {
        color: #addcfe;
        font-style: italic;
        line-height: 36px;
        margin: 18px 0;
    }
    /** adbox **/
    #adbox {
        background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
        font-family: Georgia, "Times New Roman", Times, serif;
        min-height: 433px;
        margin: -56px 0 22px;
    /** Needed for IE7 **/
    *margin: 0;
    *position: relative;
    *top: -56px;
    }
    #adbox .wrapper {
        width: 940px;
        padding: 54px 10px 26px;
    }
    #adbox .info {
        height: 354px;
        width: 330px;
        overflow: hidden;
    }
    #adbox h1 {
        color: #ffffff;
        font-size: 48px;
        font-style: italic;
        line-height: 50px;
        margin-bottom: 30px;
    }
    #adbox p {
        color: #176eb0;
        font-size: 14px;
        line-height: 24px;
    }
    #adbox p a {
        color: #176eb0;
    }
    #adbox div.highlight {
        background: #171a1a url(../images/adbox-bg-heading.jpg) repeat-x left top;
        min-height: 82px;
        border-color: #000;
        border-style: solid none;
        border-width: 1px;
    }
    #adbox div.highlight h2 {
        color: #484b4b;
        font-size: 34px;
        line-height: 82px;
        width: 940px;
        margin: 0 auto;
        padding: 0 10px;
        text-shadow: -3px 0 3px #121413;
    }
    #adbox div.highlight h2 i {
        font-weight: normal;
    }
    /** main **/
    .main {
        padding: 0 10px;
    }
    /** sidebar **/
    #sidebar {
        float: right;
        width: 220px;
        margin: 0 10px 0 80px;
    }
    #sidebar ul {
        list-style: none;
        margin: 0 0 80px;
        padding: 0;
    }
    #sidebar > ul li {
        margin: 0 0 16px;
    }
    #sidebar > ul li img {
        border: 4px solid #fff;
        border-radius: 3px;
    }
    #sidebar > ul li a:hover {
        filter:alpha(opacity=80);
        opacity:0.8;
    }
    #sidebar .click-here {
        background: url(../images/spacecraft-dark.jpg) no-repeat center top;
        display: inline-block;
        height: 162px;
        width: 221px;
        margin-left: 20px;
        text-align: center;
    }
    /** time **/
    .time {
        color: #2986bb;
        font-size: 12px;
    }
    /** list **/
    .list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .list li span.time {
        float: right;
        margin-top: 6px;
    }
    .list li h4 {
        color: #fbfdfd;
        font-size: 16px;
        line-height: 24px;
        margin: 0;
        text-transform: uppercase;
    }
    .list li {
        padding: 0 0 48px;
    }
    #contents .list li p {
        padding: 0;
    }
    .list li a.more {
        float: right;
        color: #34b0fb;
        display: inline-block;
        font-size: 14px;
    }
    .list li a.more:hover {
        color: #c3e9fe;
    }
    /** pagination **/
    .pagination {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .pagination li {
        float: left;
        font: 12px Arial, Helvetica, sans-serif;
        margin: 0 2px;
    }
    .pagination li a {
        color: #36b4fd;
        padding: 3px;
        text-decoration: none;
    }
    .pagination li a:hover, #pagination li.selected a {
        color: #95d3f9;
    }
    /** gallery **/
    #gallery #sidebar, #contact #sidebar {
        margin-left: 10px;
    }
    #gallery .photos {
        margin: 0 0 20px;
    }
    #gallery .viewer {
        margin: 0 0 18px;
    }
    #gallery .photos > ul {
        background-color: #072a3e;
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 12px 15px;
    }
    #gallery .photos > ul li {
        float: left;
        margin: 0 9px;
        position: relative;
    }
    #gallery .photos > ul li a:hover span.cover {
        background-color: #e8eff4;
        display: block;
        height: 96px;
        width: 100%;
        opacity: 0.49;
        position: absolute;
        top: 0;
        left: 0;
    }
    /** Contact **/
    #contact form {
        width: 709px;
    }
    #contact form ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #contact form ul li {
        display: inline-block;
        width: 100%;
        margin: 0 0 18px;
    }
    #contact form ul li > label {
        float: right;
        color: #e8eff4;
        display: inline-block;
        font: italic 14px/36px 'PTSerif-Caption';
        width: 230px;
    }
    #contact form ul li > label.msg {
        margin-bottom: 60px;
        padding-top: 80px;
    }
    #contact form ul li:hover > label {
        color: #2da6fc;
    }
    #contact textarea {
        float: left;
        background-color: #fff;
        color: #060606;
        font: 14px/36px Arial, Helvetica, sans-serif;
        height: 367px;
        width: 450px;
        border: 0;
        margin: 0 10px 0 0;
        padding-left: 10px;
        overflow: auto;
    }
    #contact form ul li div {
        display: inline-block;
        width: 225px;
        margin: 50px 0;
        padding-left: 5px;
    }
    #contact form ul li div label {
        color: #fcc43d;
        display: inline-block;
        font: 12px Arial, Helvetica, sans-serif;
        font-weight: normal;
    }
    #contact input[type='text'] {
        background-color: #fff;
        color: #060606;
        font: 14px/36px Arial, Helvetica, sans-serif;
        height: 36px;
        width: 440px;
        border: 0;
        margin-right: 10px;
        padding: 0 10px;
    }
    #contact input[type='checkbox'] {
        background-position: 0 0;
        height: 13px;
        width: 12px;
        border: 0;
        margin-left: 0;
        margin-right: 10px;
        padding: 0;
    }
    #contact input[type='submit'] {
        cursor: pointer;
        border: 0;
        margin-top: 3px;
        margin-left: 5px;
    }
    #contact div.checkbox label {
        cursor: pointer;
    }
    /*------------------------------ FOOTER ------------------------------*/
    #footer {
        background-color: #e8eff4;
        border-top: 1px solid #fdfcfc;
    }
    #footer .body {
        background: #072438 url(../images/bg-footer.jpg) no-repeat center top;
        min-height: 136px;
        padding: 36px 0;
    }
    #footer h4 {
        color: #fff;
        font: normal 14px Georgia, "Times New Roman", Times, serif;
        margin: 0 0 12px;
    }
    #footer p {
        color: #7890a1;
        font-size: 12px;
        line-height: 24px;
        margin: 0;
        padding: 0 0 6px;
    }
    /** featured **/
    #featured {
        display: block;
        list-style: none;
        width: 960px;
        margin: 0 auto;
        padding: 30px 0;
    }
    #featured li {
        float: left;
        width: 220px;
        margin: 0 10px;
        text-align: center;
    }
    #featured li h3 {
        color: #07304d;
        font-size: 18px;
        margin: 18px 0;
    }
    #featured li h3 a {
        color: #07304d;
        text-decoration: none;
    }
    #featured li h3 a:hover {
        color: #51a9e9;
    }
    #featured li p {
        color: #07304d;
        font-size: 12px;
        text-align: center;
    }
    /** links **/
    #links {
        float: left;
        width: 460px;
        margin: 0 10px;
    }
    #links > div {
        float: left;
        width: 230px;
    }
    #links ul {
        list-style: none;
        width: 178px;
        margin: 0;
        padding: 0;
    }
    #links ul li {
        background: url(../images/border-footer.png) repeat-x left bottom;
        margin: 0 0 6px;
        padding: 3px 0 8px;
    }
    #links ul li:first-child {
        padding-top: 0;
    }
    #links ul li a {
        color: #7890a1;
        font-size: 12px;
        line-height: 24px;
        text-decoration: none;
    }
    #links ul li a:hover {
        color: #e8eff4;
    }
    /** newsletter **/
    #newsletter {
        float: left;
        width: 460px;
        margin: 0 10px 10px;
    }
    #newsletter form {
        display: inline-block;
    }
    #newsletter input {
        float: left;
        font: 12px/36px "Palatino Linotype", "Book Antiqua", Palatino, serif;
        height: 36px;
        border: 0;
        margin: 0;
        padding: 0;
    }
    #newsletter input[type='text'] {
        background-position: 0 bottom;
        width: 282px;
        margin-right: 24px;
        padding-left: 6px;
        padding-right: 6px
    }
    #newsletter input[type='submit'] {
        background-position: -304px bottom;
        color: #fff;
        cursor: pointer;
        width: 102px;
    }
    #newsletter input[type='submit']:hover {
        background-position: right bottom;
    }
    #footer .footnote {
        float: right;
        display: inline-block;
        color: #03436f;
        width: 460px;
        margin-right: 10px;
    }
    
    HTML behide the page
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Instinct PVP</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <div id="header">
            <div class="wrapper clearfix">
                <div id="logo">
                    <a href="index.html"><img src="images/logo.png" alt="LOGO"></a>
                </div>
                <ul id="navigation">
                    <li class="selected">
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="about.html">Rules</a>
                    </li>
                    <li>
                        <a href="blog.html">Donate</a>
                    </li>
                    <li>
                        <a href="gallery.html">Forum</a>
                    </li>
                    <li>
                        <a href="contact.html">Events</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="contents">
            <div id="adbox">
                <div class="wrapper clearfix">
                    <div class="info">
                        <h1>Welcome to Instinct PvP</h1>
                        <p>
                            The Staff Welcome you to a Lifetime of worn torn PvP. We hope your Faction Is victorius in Everyway!
                        </p>
                    </div>
                </div>
                <div class="highlight">
                    <h2>Annoucement - <i>The server will be active soon.</i></h2>
                </div>
            </div>
            <div class="body clearfix">
                <div class="click-here">
                    <h1>GO TO THE STORE!</h1>
                    <a href="index.html" class="btn2">Click Here!</a>
                </div>
                <p style="font-size:12px;">
                Instinct PvP Is your #1 PvP Server. We have Events Every Week To keep you hooked into the Community and happy with your Experiance with the server! Our Ip is simple, "pvp.Instinctpvp.net". We hope to see you on the server and enjoying your Every moment. On The website you can Be even more interactive With use by using the forum and Looking at events.
                </p>
            </div>
        </div>
        <div id="footer">
            <ul id="featured" class="wrapper clearfix">
                <li>
                    <h3><a href="blog.html">Blog entery #1</a></h3>
                    <p>
                        The server is up and running! Bad news is Its not public just yet. When it is the Ip will be pvp.Instinctpvp.com:26065
                    </p>
                </li>
                <li>
                    <h3><a href="blog.html">Blog entery #2</a></h3>
                    <p>
                        We are almost done with the website as you can see. The website Might have some bugs so please tell us.
                    </p>
                </li>
                <li>
                    <h3><a href="blog.html">Blog entery #3</a></h3>
                    <p>
                        No Post
                    </p>
                </li>
                <li>
                    <h3><a href="blog.html">Blog entery #4</a></h3>
                    <p>
                        No post
                    </p>
                </li>
            </ul>
            <div class="body">
                <div class="wrapper clearfix">
                    <div id="links">
                        <div>
                            <h4>Social</h4>
                            <ul>
                                <li>
                                    <a href="" target="_blank">Google +</a>
                                </li>
                                <li>
                                    <a href="" target="_blank">Facebook</a>
                                </li>
                                <li>
                                    <a href="" target="_blank">Youtube</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h4>Sponsers</h4>
                            <ul>
                                <li>
                                    <a href="index.html">Link Title 1</a>
                                </li>
                                <li>
                                    <a href="index.html">Link Title 2</a>
                                </li>
                                <li>
                                    <a href="index.html">Link Title 3</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <p class="footnote">
                        © Copyright © 2023.Company name all rights reserved
                    </p>
                </div>
            </div>
        </div>
    </body>
    </html>
    I honestly Don't know whats happening.
    I also Have another Question. The Contact part That is on most of the template, Where does the Email go? do I have to do Something to recieve the messages or is it just for Looks.
     
  2. Mimoun

    Mimoun Administrator Staff Member Director Verified Member