Rand: 0 Auto zentriert mein Bild nicht

Question

May 12, 2013, 01:06 AM

Rand: 0 Auto zentriert mein Bild nicht

Ich bin sehr neu in all dem und versuche, diese Website zu erstellen, aber das Hauptbild auf der Seite ist nicht zentriert. Ich habe versucht, alle möglichen Dinge zu zentrieren, aber sie funktionieren nicht. Auch der Breitenprozentsatz wird ignoriert.

Ich habe den Rand / die Polsterung auf 0 angepasst. Ich weiß nicht, woran es liegen könnte.

CSS für das Bild:

#pictures img{
    width:"70%";
    margin: 0 auto;
    padding-bottom: 80px;
    padding-top: 20px;

}

und das html div, das damit zu tun hat:

<div id="pictures">
    <img src="img/homepage.png" alt="HomePage"></div>

VOLLES HTML

<!DOCTTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Jacobs Bookeeping</title>

    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">

    <link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">

</head>


<body>

    <div class="container clearfix">

    <div id="main">

    <div id="header">
        <img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
        </div>


    <div id="twitter">
        <a href="twitter.com/"><img src="img/twitter.jpg" alt="Twitter"></a>
    </div>

    <div id="facebook">
        <a href="www.facebook.com/"><img src="img/facebook.jpg" alt="Facebook"></a>
    </div>


        <ul class="nav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
                <li class="last"><a href="#">Resources</a></li>
        </ul>


        <div id="pictures">
                    <img src="img/homepage.png" alt="HomePage">
                </div>

            </div>
        </div>

    <div id="copyright">
                <p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — <a href="[email protected]">EMAIL JACOBS BOOKKEEPING </a> — CALL 206.861.5664 — &copy; 2013 JACOBS BOOKEEPING &nbsp &nbsp</p>

            </div>

</body>



</html>

VOLLSTÄNDIGES CSS

html {
    margin: 0px;
    padding: 0px;

 }

 body {

    font-family:'Futura', sans-serif;
    color: #FFFFFF;
    font-size: 13;
    margin: 0px;
    padding: 0px;
}

#main {
    border-top: 10px solid #EAE1C9;
    border-right: 10px solid #EAE1C9;
    border-left: 10px solid #EAE1C9;    
    padding-bottom: 20px;
    background: url('../img/bg-jacobs.jpg') repeat;
    background-color:#96B9BF;
}


a {
    color: #FFFFFF;
    text-decoration: none;
}

#facebook img{
    float: right;
    padding: 45px 5px 10px 10px;
    position: static;
}

#twitter img{
    float: right;
    padding: 45px 50px 20px 0px;
    position: static;
}
#header img {
        padding: 40px 0px 0px 40px;
        float: left;
        position: static;
}

ul.nav {
    margin-top: 45px;
    list-style: none;
    text-transform: uppercase;
    float: right;
    position: relative;

}

ul.nav li {
    margin: 0px 50px 0px 60px;
    display: inline;

}

ul.nav li a {
    color: #FFFFFF;
}

#pictures img{
    width:"80%";
    margin: 0 auto;
    padding-bottom: 80px;
    padding-top: 20px;
    display: block;
    text-align: center;

}

#copyright {
    text-align: right;
    background: #867131;
    border-top: 10px solid #EAE1C9;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    font-size: 10px;
    letter-spacing: 2px;
    color: white;
}


.container{
    width: auto; 
    margin: 0 auto;
}



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}