Issue with Html Page Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    Issue with Html Page

    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Issue with Html Page Empty Issue with Html Page

    Post by ShadesOfJay Tue 23 Dec - 10:23

    I have no clue how to fix this at all. 
    Forum: virtuous-realms.board-directory.net
    HTML Link: http://virtuous-realms.board-directory.net/h5-welcome-page

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Welcome</title>
        <style type="text/CSS">
    body {
        background: url(http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg) no-repeat center top fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: 1296px 700px;
        font-size: 11px;
        font-family: Courier;
        letter-spacing: 0.02in;
        }

        .box {
        margin-left: 70%;
        margin-top: 54%;
        width: 400px;
        background-image: url(http://i.imgur.com/0lzIxXu.png);
        text-align: center;
        }

        .forumotion{
        opacity: 0.0;
        bottom: 0px;
        left: 0px;
        width: 3oopx;
        background-image: url(http://i.imgur.com/0lzIxXu.png);
        text-align: center;
        }
        .sitename {
        text-align: center;
        font-family: Georgia;
        font-variant: small-caps;
        font-size: 30px;
        letter-spacing: 5px;
        color: #FFF;
        text-shadow: 0px 0px 10px;
        }
        a:link {
        color: #a294b5;
        text-decoration: none;
        }

        a:visited {
        color: #a294b5;
        text-decoration: none;
        }

        a:hover, a:active {
        color: #fff;
        text-decoration: none;
        text-shadow: 0px 0px 3px;
        transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -webkit-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        }
        @import url(http://weloveiconfonts.com/api/?family=entypo);
    @import url(http://fonts.googleapis.com/css?family=Alef);

    /* entypo */
    [class*="entypo-"]:before { font-family: 'entypo', sans-serif }
    *{-webkit-font-smoothing:antialiased;}
    body {
        background: url(http://subtlepatterns.com/patterns/cream_pixels_@2X.png);
        /*background-size*/
        background-size: 160px;
        font-family: Alef;
    }
    #nav {
        width: 180px;
        margin: 100px auto;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 180px;
    }
    ul a {
        display: block;
        width: 100%;
        height: 44px;
        background: #E7533C;
        color: #fafafa;
        text-decoration: none;
        text-align: left;
        line-height: 2;
        padding-left: 10px;
        font-size: 1.4em;
        border-bottom: 3px solid #cc4531;
    }
    ul a span {
        float: right;
        display: block;
        margin: 0;
        width: 44px;
        height: 44px;
        font-size: 1.4em;
        text-align: center;
        line-height: 1.5;
    }
    ul li {
        width: 0;
        height: 0px;
        background: #E7533C;
        clear: both;
    }
    ul li a {
        color: transparent;
        height: 0;
        /*box-shadow*/
        box-shadow: 0 2px  2px rgba(0,0,0,.1);
        padding-left: 0;
    }
    ul li a span {
        font-size: .9em;
        line-height: 2.4;
    }
    ul:hover li a { padding-left: 10px }
    ul:hover span { background: #cc4531 }
    ul:hover li span { background: transparent }
    ul li:hover > a { background: #cc4531 }
    ul li:hover {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    ul li:nth-child(1) {
        transition: all 0s ease;
    }
    ul li:nth-child(2) {

        transition: all 0s ease;
    }
    ul li:nth-child(3) {
     
        transition: all 0s ease;
    }
    ul li:nth-child(4) {

        transition: all 0s ease;
    }
    ul a:hover > span { background: #cc4531 }
    ul:hover > li a {
        color: #fff;
        height: 44px;
    }
    ul li a:hover { border-bottom: 3px solid #9d3323 }
    ul:hover li:nth-child(2) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease;
    }
    ul:hover li:nth-child(3) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease .1s;
    }
    ul:hover li:nth-child(4) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease .2s;
    }
    ul:hover li:nth-child(5) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease .3s;
    }
        </style>
    </head>

    <body>
        <div id="nav">
            <ul>
                <li style="list-style: none; display: inline">
                    <a href="#">Menu<span class="entypo-right-open-big"></span></a>
                </li>


                <li>
                    <a href="#">Forum<span class="entypo-doc-text"></span></a>
                </li>


                <li>
                    <a href="#">Blog<span class="entypo-pencil"></span></a>
                </li>


                <li>
                    <a href="#">About Us<span class="entypo-info"></span></a>
                </li>


                <li>
                    <a href="#">Contact Us<span class="entypo-mail"></span></a>
                </li>
            </ul>
        </div>


        <table align="center" width="70%">
            <tr>
                <td valign="middle">
                    <div class="box">
                        <div class="sitename">
                            Virtuous-Realms
                        </div>
                        <a href=
                        "http://www.virtuous-realms.board-directory.net/forum">click
                        here to enter the forum</a>
                    </div>


                    <div class="forumotion">
                        <a href="http://www.forumotion.com" target=
                        "_blank">forumotion.com</a>
                    </div>
                </td>
            </tr>
        </table>
    </body>
    </html>
    Ramdaman
    Ramdaman
    Active Poster


    Male Posts : 1590
    Reputation : 99
    Language : English, Albanian, Macedonian, Russian | HTML, CSS
    Location : New York City

    Issue with Html Page Empty Re: Issue with Html Page

    Post by Ramdaman Tue 23 Dec - 12:27

    You would have to go into more detail on what you would like fixed.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Tue 23 Dec - 13:10

    Code:
        <!DOCTYPE html>
        <html>
        <head>
            <title>Welcome</title>
            <style type="text/CSS">
     
      body {
      background: url(http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg) no-repeat center top fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: 1296px 700px;
    font-size: 11px;
    font-family: Courier;
    letter-spacing: 0.02in;
    }

    .box {
    margin-left: 70%;
    margin-top: 54%;
    width: 400px;
    background-image: url(http://i.imgur.com/0lzIxXu.png);
    text-align: center;
    }
     
    .forumotion{
    opacity: 0.0;
    bottom: 0px;
    left: 0px;
    width: 3oopx;
    background-image: url(http://i.imgur.com/0lzIxXu.png);
    text-align: center;
    }
    .sitename {
    text-align: center;
    font-family: Georgia;
    font-variant: small-caps;
    font-size: 30px;
    letter-spacing: 5px;
    color: #FFF;
    text-shadow: 0px 0px 10px;
    }
    a:link {
       color: #a294b5;
       text-decoration: none;
    }

    a:visited {
       color: #a294b5;
       text-decoration: none;
    }

    a:hover, a:active {
       color: #fff;
       text-decoration: none;
    text-shadow: 0px 0px 3px;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    }
     @import url(http://weloveiconfonts.com/api/?family=entypo);
    @import url(http://fonts.googleapis.com/css?family=Alef);
    /* entypo */
    [class*="entypo-"]:before { font-family: 'entypo', sans-serif }
    *{-webkit-font-smoothing:antialiased;}
     #nav.body{
        background: url(http://subtlepatterns.com/patterns/cream_pixels_@2X.png);
        /*background-size*/
        -webkit-background-size: 160px;
        -moz-background-size: 160px;
        -o-background-size: 160px;
        background-size: 160px;
        font-family: Alef;
    }
    #nav {
        width: 180px;
        margin: 100px auto;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 180px;
    }
    ul a {
        display: block;
        width: 100%;
        height: 44px;
        background: #E7533C;
        color: #fafafa;
        text-decoration: none;
        text-align: left;
        line-height: 2;
        padding-left: 10px;
        font-size: 1.4em;
        border-bottom: 3px solid #cc4531;
     
     
    }
    ul a span {
        float: right;
        display: block;
        margin: 0;
        width: 44px;
        height: 44px;
        font-size: 1.4em;
        text-align: center;
        line-height: 1.5;
    }
    ul li {
        width: 0;
        height: 0px;
        background: #E7533C;
        clear: both;
     
    }
    ul li a {
        color: transparent;
        height: 0;
        /*box-shadow*/
        -webkit-box-shadow: 0 2px  2px rgba(0,0,0,.1);
        -moz-box-shadow: 0 2px  2px rgba(0,0,0,.1);
        box-shadow: 0 2px  2px rgba(0,0,0,.1);
        padding-left: 0;
    }
    ul li a span {
        font-size: .9em;
        line-height: 2.4;
    }
    ul li a { padding-left: 10px }
    ul:hover span { background: #cc4531 }
    ul li span { background: transparent }
    ul li:hover > a { background: #cc4531 }
    ul li {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    ul a > span { background: #cc4531 }
    ul > li a {
        color: #fff;
        height: 44px;
    }
    ul li a { border-bottom: 3px solid #9d3323 }
    ul li {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease;
    }

    ul li a{
        margin-top: 8px;
        margin-bottom: 8px;
        height: 44px;
    }
            </style>
        </head>

        <body>
            <div id="nav">
                <ul>
                    <li style="list-style: none; display: inline">
                        <a href="#">Menu<span class="entypo-right-open-big"></span></a>
                    </li>


                    <li>
                        <a href="#">Forum<span class="entypo-doc-text"></span></a>
                    </li>


                    <li>
                        <a href="#">Blog<span class="entypo-pencil"></span></a>
                    </li>


                    <li>
                        <a href="#">About Us<span class="entypo-info"></span></a>
                    </li>


                    <li>
                        <a href="#">Contact Us<span class="entypo-mail"></span></a>
                    </li>
                </ul>
            </div>


            <table align="center" width="70%">
                <tr>
                    <td valign="middle">
                        <div class="box">
                            <div class="sitename">
                                Virtuous-Realms
                            </div>
                            <a href=
                            "http://www.virtuous-realms.board-directory.net/forum">click
                            here to enter the forum</a>
                        </div>


                        <div class="forumotion">
                            <a href="http://www.forumotion.com" target=
                            "_blank">forumotion.com</a>
                        </div>
                    </td>
                </tr>
            </table>
        </body>
        </html>
        </html>
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Tue 23 Dec - 13:13

    theres a exstra </html> that needs to be removed from code i posted but forumotion wont let me edit my post... says no post mode specified
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Issue with Html Page Empty Re: Issue with Html Page

    Post by ShadesOfJay Tue 23 Dec - 23:30

    _Twisted_Mods_ wrote:
    Code:
        <!DOCTYPE html>
        <html>
        <head>
            <title>Welcome</title>
            <style type="text/CSS">
      
      body {
      background: url(http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg) no-repeat center top fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: 1296px 700px;
    font-size: 11px;
    font-family: Courier;
    letter-spacing: 0.02in;
    }

    .box {
    margin-left: 70%;
    margin-top: 54%;
    width: 400px;
    background-image: url(http://i.imgur.com/0lzIxXu.png);
    text-align: center;
    }
      
    .forumotion{
    opacity: 0.0;
    bottom: 0px;
    left: 0px;
    width: 3oopx;
    background-image: url(http://i.imgur.com/0lzIxXu.png);
    text-align: center;
    }
    .sitename {
    text-align: center;
    font-family: Georgia;
    font-variant: small-caps;
    font-size: 30px;
    letter-spacing: 5px;
    color: #FFF;
    text-shadow: 0px 0px 10px;
    }
    a:link {
       color: #a294b5;
       text-decoration: none;
    }

    a:visited {
       color: #a294b5;
       text-decoration: none;
    }

    a:hover, a:active {
       color: #fff;
       text-decoration: none;
    text-shadow: 0px 0px 3px;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    }
     @import url(http://weloveiconfonts.com/api/?family=entypo);
    @import url(http://fonts.googleapis.com/css?family=Alef);
    /* entypo */
    [class*="entypo-"]:before { font-family: 'entypo', sans-serif }
    *{-webkit-font-smoothing:antialiased;}
     #nav.body{
        background: url(http://subtlepatterns.com/patterns/cream_pixels_@2X.png);
        /*background-size*/
        -webkit-background-size: 160px;
        -moz-background-size: 160px;
        -o-background-size: 160px;
        background-size: 160px;
        font-family: Alef;
    }
    #nav {
        width: 180px;
        margin: 100px auto;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 180px;
    }
    ul a {
        display: block;
        width: 100%;
        height: 44px;
        background: #E7533C;
        color: #fafafa;
        text-decoration: none;
        text-align: left;
        line-height: 2;
        padding-left: 10px;
        font-size: 1.4em;
        border-bottom: 3px solid #cc4531;
      
      
    }
    ul a span {
        float: right;
        display: block;
        margin: 0;
        width: 44px;
        height: 44px;
        font-size: 1.4em;
        text-align: center;
        line-height: 1.5;
    }
    ul li {
        width: 0;
        height: 0px;
        background: #E7533C;
        clear: both;
     
    }
    ul li a {
        color: transparent;
        height: 0;
        /*box-shadow*/
        -webkit-box-shadow: 0 2px  2px rgba(0,0,0,.1);
        -moz-box-shadow: 0 2px  2px rgba(0,0,0,.1);
        box-shadow: 0 2px  2px rgba(0,0,0,.1);
        padding-left: 0;
    }
    ul li a span {
        font-size: .9em;
        line-height: 2.4;
    }
    ul li a { padding-left: 10px }
    ul:hover span { background: #cc4531 }
    ul li span { background: transparent }
    ul li:hover > a { background: #cc4531 }
    ul li {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    ul a > span { background: #cc4531 }
    ul > li a {
        color: #fff;
        height: 44px;
    }
    ul li a { border-bottom: 3px solid #9d3323 }
    ul li {
        width: 100%;
        height: 44px;
      
        transition: all .1s ease;
    }

    ul li a{
        margin-top: 8px;
        margin-bottom: 8px;
        height: 44px;
    }
            </style>
        </head>

        <body>
            <div id="nav">
                <ul>
                    <li style="list-style: none; display: inline">
                        <a href="#">Menu<span class="entypo-right-open-big"></span></a>
                    </li>


                    <li>
                        <a href="#">Forum<span class="entypo-doc-text"></span></a>
                    </li>


                    <li>
                        <a href="#">Blog<span class="entypo-pencil"></span></a>
                    </li>


                    <li>
                        <a href="#">About Us<span class="entypo-info"></span></a>
                    </li>


                    <li>
                        <a href="#">Contact Us<span class="entypo-mail"></span></a>
                    </li>
                </ul>
            </div>


            <table align="center" width="70%">
                <tr>
                    <td valign="middle">
                        <div class="box">
                            <div class="sitename">
                                Virtuous-Realms
                            </div>
                            <a href=
                            "http://www.virtuous-realms.board-directory.net/forum">click
                            here to enter the forum</a>
                        </div>


                        <div class="forumotion">
                            <a href="http://www.forumotion.com" target=
                            "_blank">forumotion.com</a>
                        </div>
                    </td>
                </tr>
            </table>
        </body>
        </html>
        </html>
    That solves one problem thanks!
    What it is suppose to do and look like is this: http://cssdeck.com/labs/css-flatly-menu
    Except I changed a few things since it is a free code I found online.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Wed 24 Dec - 4:35

    well it probably be easier if you just tell me what chaanges you want and ill post the finished result
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Issue with Html Page Empty Re: Issue with Html Page

    Post by ShadesOfJay Wed 24 Dec - 4:50

    I can't explain it very well. So...
    You see this navigation bar here: [url= http://cssdeck.com/labs/css-flatly-menu] http://cssdeck.com/labs/css-flatly-menu[/url]
    And my similar one here on my test html page: http://virtuous-realms.board-directory.net/h5-welcome-page

    I am wanting the second link to do what the first link is doing. But, it wouldn't do what I wanted within a page I edited?
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Wed 24 Dec - 5:21

    http://css-kings.forumotion.com/h3-testing do the best you can of telling me anything you want to be different
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Issue with Html Page Empty Re: Issue with Html Page

    Post by ShadesOfJay Wed 24 Dec - 5:26

    I found the issue.
    http://virtuous-realms.board-directory.net/h5-welcome-page

    Compare yours to mine. I noticed that when you took out the code for the little box that says Virtuous Realms that the nav menu worked... So its the little box that is interfering? But why?
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Wed 24 Dec - 5:40

    oh you can take of the lil box by removing the class name from span and removing the width from the first width from ul >a >span ....... check out the page i posted and see if u want anything else
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Issue with Html Page Empty Re: Issue with Html Page

    Post by ShadesOfJay Wed 24 Dec - 5:44

    Okay. I think we are both confused. Before you did anything, the characters or the little icons for each drop down option worked. I like what you fixed before. But I WANT the little box.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Wed 24 Dec - 6:07

    ok look at it now
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Issue with Html Page Empty Re: Issue with Html Page

    Post by ShadesOfJay Wed 24 Dec - 6:10

    Now I want that little box I had that led to the forums =)
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Wed 24 Dec - 6:18

    ohhhhh i see it now lol the box was hidden off screen i had to scroll to see it... ok look now
    avatar
    ShadesOfJay
    Forumember


    Female Posts : 35
    Reputation : 1
    Language : English

    Issue with Html Page Empty Re: Issue with Html Page

    Post by ShadesOfJay Wed 24 Dec - 6:23

    There we go! Finally... I couldn't figure out for hours how to fix that drop down thingy. Thanks sooo much! Could I have the code now?
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Issue with Html Page Empty Re: Issue with Html Page

    Post by _Twisted_Mods_ Wed 24 Dec - 6:27

    your welcome .. if theirs anything else you need let me know


    Code:
    <head>
      <style>
        @import url(http://weloveiconfonts.com/api/?family=entypo);
    @import url(http://fonts.googleapis.com/css?family=Alef);
    /* entypo */
    [class*="entypo-"]:before { font-family: 'entypo', sans-serif }
    *{-webkit-font-smoothing:antialiased;}
        body{
        background: url("http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg") no-repeat fixed center top / 1296px 700px transparent;
        font-size: 11px;
        font-family: Courier;
        letter-spacing: 0.02in;
    }
     
    #nav {
        width: 180px;
        margin: 100px auto;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 180px;
    }
    ul a {
        display: block;
        width: 100%;
        height: 44px;
        background: #E7533C;
        color: #fafafa;
        text-decoration: none;
        text-align: left;
        line-height: 2;
        padding-left: 10px;
        font-size: 1.4em;
        border-bottom: 3px solid #cc4531;
    }
    ul a span {
        float: right;
        display: block;
        margin: 0;
        width: 44px;
        height: 44px;
        font-size: 1.4em;
        text-align: center;
        line-height: 1.5;
    }
    ul li {
        width: 0;
        height: 0px;
        background: #E7533C;
        clear: both;
    }
    ul li a {
        color: transparent;
        height: 0;
        /*box-shadow*/
        -webkit-box-shadow: 0 2px  2px rgba(0,0,0,.1);
        -moz-box-shadow: 0 2px  2px rgba(0,0,0,.1);
        box-shadow: 0 2px  2px rgba(0,0,0,.1);
        padding-left: 0;
    }
    ul li a span {
        font-size: .9em;
        line-height: 2.4;
     
    }
    ul:hover li a { padding-left: 10px }
    ul li span{display:none;}
    ul:hover li span{display:block;}
    ul li:hover {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    ul li:nth-child(1) {
        transition: all 0s ease;
    }
    ul li:nth-child(2) {

        transition: all 0s ease;
    }
    ul li:nth-child(3) {
     
        transition: all 0s ease;
    }
    ul li:nth-child(4) {

        transition: all 0s ease;
    }
    ul span { background: #cc4531 }
    ul:hover > li a {
        color: #fff;
        height: 44px;
    }
    ul li a:hover { border-bottom: 3px solid #9d3323 }
    ul:hover li:nth-child(2) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease;
    }
    ul:hover li:nth-child(3) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease .1s;
    }
    ul:hover li:nth-child(4) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease .2s;
    }
    ul:hover li:nth-child(5) {
        width: 100%;
        height: 44px;
     
        transition: all .1s ease .3s;
    }
        .sitename {
        text-align: center;
        font-family: Georgia;
        font-variant: small-caps;
        font-size: 30px;
        letter-spacing: 5px;
        color: #FFF;
        text-shadow: 0px 0px 10px;
    }
    .box {
        width: 400px;
        background-image: url("http://i.imgur.com/0lzIxXu.png");
        text-align: center;
        bottom: 0px;
        right: 0px;
        position: absolute;
    }
      </style>
    </head>

    <body>
     <div id="nav">
      <ul>
        <a href="#">Menu<span class="entypo-right-open-big"></span></a>
        <li><a href="#">Profile <span class="entypo-user"></span></a></li>
        <li><a href="#">Media <span class="entypo-video"></span></a></li>
        <li><a href="#">Games <span class="entypo-rocket"></span></a></li>
        <li><a href="#">Friends <span class="entypo-users"></span></a></li>
      </ul>
    </div>
    <div class="box">
                            <div class="sitename">
                                Virtuous-Realms
                            </div>
                            <a href="http://www.virtuous-realms.board-directory.net/forum">click
                            here to enter the forum</a>
                        </div>
    </body>