[Solved] Change Navigation Bar color(vertical) - CSS-Tricks

This topic is empty.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts

September 20, 2013 at 5:35 am #150705

Participant

I am kinda new to CSS actually. I was doing a website and now i would like to change the height of the navigation bar color(vertically). Can anyone help me ASAP :)

<!DOCTYPE html>
<html>
<head>
<style>
body { 
    background-size: 6000px 6500px;
    background-repeat: no-repeat;
    }
#menu {
        float: left;
        background-color: #1E90FF;
        border-bottom: 5px solid #ccc;
        border-top: 5px solid #ccc;
        height: 445px;
        width:100%;
    }
    #menu h1{
        font-family: Calibri, Arial, sans-serif;
        font-size: 100px;
        font-weight: bolder;
        text-align: center;
        margin-right: 25px;
        color: #F5F5F5;

    }
    #menu a {
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)


    }
    #menu a {
        line-height: 10px;
        display: inline-block;
        font-size: 40px;
        font-family: Calibri, Geneva, sans-serif;
        float: right;
        width:20px;
        margin-top:150px;
        padding: 15px 10px;
        text-decoration: none;
        font-weight: bolder;
        color: #fff;

    }

    a.home {height: 10px; background: #FFD700;}
    a.about {height:10px; background: #a24543;}
    a.news {height:10px; background: #32CD32;}
    a.contact {height:10px; background: #FF8C00;}


    #menu a:hover {
        color: #191970;
        background-color: #00FF00;
    }

#dropdown {
    float: right;
    position: relative;
    background-color: #F0FFFF;
}

#content h1{
    font-family: Calibri, Geneva, sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}

#content img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:400px;
    height:250px;
    border:1px blue


/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

#content h2{
float: left;
width: 700px;
height:200px;
border:10px groove navy;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:left;
-webkit-box-align:left;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

#content p{
text-align: left;
font-family: Calibri, Geneva, sans-serif;
font-size: 20px;
}

</style>

September 20, 2013 at 7:29 am #150715

Paulie_D

Member

CSS isn’t enough by itself. We’d, ideally, need the HTML.

Could you put a reduced case in http://codepen.io/ ?

Why are you rotating menu items…that seems odd?

And what with this?

    #menu a {
        line-height: 10px;
        display: inline-block; <---
        font-size: 40px;
        font-family: Calibri, Geneva, sans-serif;
        float: right; <---
}

Why both?…Just pick one.

September 20, 2013 at 8:23 am #150740

raaj5671

Participant

well i have upload it to codepen.io: http://codepen.io/anon/pen/HAdqJ
ok well i have update the code there.

September 20, 2013 at 8:45 am #150751

Paulie_D

Member

So it’s the colored menu items…right?

The menu items need to do what…be wider (effectively)?

Gotta tell you, I’m not feeling that design….but perhaps it will grow on me once it’s sorted out.

September 20, 2013 at 9:03 am #150753