CODEWITHSUNDEEP
css
user3490572
user3490572

Reputation: 53

Text in navigation bar doesn't show up

Hello I've made a simple layout where I also display a navigation bar on the top(fixed) Everything goes fine but the text which I want in the navigation bar doesn't show up. I've tried to find the solution but couldn't figure it out, thank you very.

HTML CODE:

    <div class="banner">
    <div class="banner-container"> test test
            <tbody>
                <tr>
                <span>test</span> <span>test1</span>
                </tr>
            </tbody>


    </div>          <!-- END banner-container -->
    </div>

CSS code:

    /*========================= BODY =========================*/
body{
    background: #ffffff;
    font-family: Hammersmith One;
    margin: 0;
}
span{
    margin: 0 10px;
}
.container{
        height:auto;
        margin-top:-10px;
}

/*========================= HEADER =========================*/
 .banner {
    margin: -10pt auto;
    width:100%;
    background-color:#d9d8d6;
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    position:fixed;
}
.banner-container{
        height:70px;
        width:900px;
        position:center;
        text-align:center;
}
.wrapper{
        background-color:#FFFFFF;
        width:900px;
        margin-top: 20px;
        margin: 0pt auto;
}
/*========================= CONTENT LEFT =========================*/
.content-index{
        width:70%;
        height:100%;
        float:left;
        padding-left:20px;
        padding-top:40px;
}

.content-index h1{
        font-size:20px;
        width:98%;
        background-color:#fdfdfd;
        text-align: left;
        color:#000000;
}
.content-index p{
        text-align: left;
        margin: 10px;
        width:98%;
}


.content-index-header{
    float: left;
    margin: 1px 1px 1px 1px;
    padding: 1px;
    width:100%;
    overflow:hidden;
}
.content-index-latest{
    height:100%;
    float: left;
    margin: 1px 1px 1px 1px;
    padding: 1px;
    width:100%;
    overflow:hidden;
}
.content-index-latest-cont {
    background:#FFFFFF;
    padding: 1px;
    float: left;
    width: 100%;
}

/*========================= CONTENT RIGHT =========================*/ 
.content-index-right{
        width:25%;
        height:100%;
        float:right;
        padding-right:20px;
        padding-top:40px;
}
.content-index-right h1{
        color:#000000;
        font-size:15px;
        text-align: center;
        background-color:#fdfdfd;
}

Upvotes: 0

Views: 73

Answers (4)

alessandrio
alessandrio

Reputation: 4370

margin (-10 auto) => (-10) top and bottom, (auto) left and right

.banner {
    width:100%;
    background-color:#d9d8d6;
    border:1px solid #000000;
    position:fixed;
}

Upvotes: 0

cclark413
cclark413

Reputation: 435

Out of curiosity, why are you using table elements without a table?

A couple other things:

  • Change banner margin:-10px auto to margin:0 auto. Right now it is putting it off the top of the page with the negative vertical margin.

  • Remove position:center from the container, as this is not an acceptable value. If you want to center it horizontally, give it a margin:0 auto as well.

  • If this for a navigation, I would recommend using a UL (list) method instead.

  • That is an awful lot of CSS for such a small amount of HTML. Some of styles you are setting on elements will prove to not be very modular later on in your coding.

Upvotes: 1

Selvamani
Selvamani

Reputation: 7684

Remove margin property for banner class.

.banner {
   background-color: #D9D8D6;
   border-color: #000000;
   border-style: solid;
   border-width: 1px;

   position: fixed;
   width: 100%;
}

Here the DEMO

Upvotes: 1

laaposto
laaposto

Reputation: 12213

Just remove margin: -10pt auto; from .banner

.banner {
    width:100%;
    background-color:#d9d8d6;
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    position:fixed;
}

DEMO

Upvotes: 1

Related Questions