[Help] CSS

Discussion in 'Miscellaneous' started by xothis, May 23, 2014.

?

Can you code websites?

Yes 0 vote(s) 0.0%
No 1 vote(s) 100.0%
Potato... 0 vote(s) 0.0%
  1. Hi all I have a problem I dont know how to centre a navbar it always just centres the end button or so on. I havent found an efficient fix on many google searches so please help, thanks.

    HTML
    Code:
                <div id="navbar">
                    <ul>
                        <li>Home</li>
                        <li>About Me</li>
                        <li>Photos</li>
                        <li>Contact</li>
                    </ul>
                </div>
    CSS
    Code:
    #navbar {
        position: relative;
        top:10px;
        left:50%;
    }
    ul{
        list-style-type: none;
        position: fixed;
        margin: -10px;
    }
    
    li {
        display: inline;
        border: 2px solid #000000;
        font-family: Futura, Tahoma, sans-serif;
        color: #ffffff;
        border-radius: 5px;
        width: 100px;
        background-color: #cc0323
    }
  2. Code:
    #navbar {
        text-align: center;
        margin: auto;
    }
    
    should do it.
    xothis_dwarf and chickeneer like this.
  3. Aikar, you are such a coding genious >.<
    Bro_im_infinite likes this.
  4. Full CSS
    Code:
    html {
      max-width: 1200px;
      margin: 0 auto;
      background: #eee; /* Fills the page */
      position: relative; /* Fix for absolute positioning */
    }
    h2 {
        font-family: Verdana;
        font-weight: bold;
        text-align: center;
        padding-top: 25px;
        padding-bottom: 25px;
        color: #acd1b2;
    }
    
    img {
        height: 170px;
        width: 170px;
        box-shadow: rgba(0,0,0,0.2) 10px 10px;
    
    }
    
    #navbar {
        margin: auto;
        text-align: center;
    }
    #navbar li {
        text-align: left;
    }
    
    #header {
        position: relative;
        top: -10px;
        background-color: #3c4543;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    
    ul{
        list-style-type: none;
        position: fixed;
        margin: -10px;
    }
    
    li {
        display: inline;
        border: 2px solid #000000;
        font-family: Futura, Tahoma, sans-serif;
        color: #ffffff;
        border-radius: 5px;
        background-color: #cc0323
    }
    
    #left{
        width: 45%;
        float: left;
    }
    
    p {
        font-family: Tahoma;
        font-size: 1em;
    }
    
    #right{
        width: 45%;
        float: right;
    }
    
    table {
        border: #000000 1px solid;
        background-color: #acd1b2;
        float: right;
        margin-right: 10px;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    
    td {
        height: 75px;
        width: 75px;
    }
    
    td img {
        height: 75px;
        width: 75px;
        box-shadow: none;
    }
    
    th {
        font-family: Verdana;
        font-size: 1em;
        font-weight: normal;
        color: #3c4543
    }
    
    #bottom_left{
        border-bottom-left-radius: 15px;
    }
    
    #bottom_right{
        border-bottom-right-radius: 15px;
    }
    
    #footer{
        clear: both;
        position: relative;
        bottom: -20px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        height: 75px;
        background-color: #3c4543;
    }
    
    #button{
        border: 2px solid #000000;
        float:left;
        position: relative;
        left: 229px;
        bottom: -20px;
        border-radius: 5px;
        background-color: #cc0323;
        height: 30px;
        width: 150px;
    
    }
    
    #button p{
        position: relative;
        bottom: 10px;
        font-size: 0.8em;
        color: #acd1b2;
        text-align: center;
    }
    
    .bold{
        font-family: tahoma;
        font-weight: bold;
        font-size: 1.2em;
        font-variant: small-caps;
        color: #ffffff;
    }
    Full HTML
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <title>Result</title>
        </head>
        <body>
            <div id="header">
                <div id="navbar">
                    <ul>
                        <li>Home</li>
                        <li>About Me</li>
                        <li>Photos</li>
                        <li>Contact</li>
                    </ul>
                </div>
                <h2>Home</h2>
            <div id="footer">
                <div id="button">
                    <p>Send me an <span class="bold">e-mail</span>!</p>
                </div>
            </div>
        </body>
    </html>
    it didn't work :/
    I may have put something preventing it from working but I cant see what...