CSS: Bild positionieren

  • Hallo, ich habe ein klitzekleines problem...
    Ich arbeite derzeit an einer homepage die läuft bis jetzt auch so weit so gut.
    Also folgendes:


    An der seite der Page ist eine Sidebar die ein- und ausfährt. in der oberen ecke dieser sidebar soll ein bild hin (32pxx32px) wenn man dort raufklickt fährt das menu ein. das wäre an sich kein problem. aber ich kriege das bild nicht dort hin. es steckt mir die zunge entgegen und bleibt stur in der Linken oberen ecke der website.


    das ganze soll in etwa so aussehen (Photoshop)




    bisheriger Code:


    HTML


    CSS:

    Code
    .menu_extender {
        background-position: left
    
    }


    Ich hoffe ihr könnt mir helfen

  • Agent47:


    Könntest du deinen Post vielleicht reparieren? ^^
    ich glaube du hast in deinem Satz einen Sytax Fehler :P


    Ja benutzen tue ich margin z.b hier:



    Desweiteren habe ich ein problem mit dem Content bereich... er überdeckt den Hintergrund und besteht eigentlich nur aus einem 10x10px weißes bild was eine transparenz von 70% hat
    Die Navbar überdeckt allerdings nichts:


  • edit;


    [hide]

    [/hide]


    Probier das mal du hast oben das '<a>' nicht richtig geschloßen.

    2 Mal editiert, zuletzt von Agent47 ()

  • Beitrag von Nadja Iwanow ()

    Dieser Beitrag wurde gelöscht, Informationen über den Löschvorgang sind nicht verfügbar.
  • Agent47:


    Da ich den Fehler nicht finde Poste ich kurzerhand temporär den login und die dazu gehörige CSS


    account.html (wird zu php geändert)

    PHP
    <html>    <head>        <title>San Andreas Trucking | User Bereich</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">        <link rel="stylesheet" type="text/css" href="../CSS/account.css">        <style>            body {                background-color: #fff;                margin: 0px;                overflow: hidden;                font-family:arial;                color:#fff;            }            h1{                margin:0;            }            a {                color:#0078ff;            }            #canvas{                width:100%;                height:700px;                overflow: hidden;                position:absolute;                top:0;                left:0;                background-color: #1a1724;                           }            .canvas-wrap{                position:relative;            }            div.canvas-content{                position:relative;                z-index:2000;                color:#fff;                text-align:center;                padding-top:30px;            }        </style>    </head>    <body>    <div class="navbar">        <div class"menu_extender">        <a href="#menu">        <img src="../IMAGES/MENU/menu_extender.gif">          </a>        </div>        <h2>Menu</h2>        <nav>            <a href="#">Home</a>            <a href="#">Fahrzeug beantragen</a>            <a href="#">Einstellungen</a>            <a href="#">Ausloggen</a>        </nav>    </div>        <div class="container">        <div class="text">            <h1>Platzhalter (Container,text)</h1>            <a class="menu-toggle" href="#">Show/hide nav</a>        </div>    </div>     <section class="canvas-wrap"> //das    <div class="canvas-content"></div> //und das    <div id="canvas" class="gradient"></div>  //sind für den Hintergrund verantwortlich    </section>    <script type="text/javascript" src="../SCRIPT/jquery.js"></script>    <script type="text/javascript">        $(document).ready(function() {            var menu = "close";            $('.menu-toggle').click(function() {                if (menu == "close") {                    $('.navbar').css('-webkit-transform', 'translate(0, 0)');                    $('.navbar').css('-o-transform', 'translate(0, 0)');                    $('.navbar').css('-moz-transform', 'translate(0, 0)');                    $('.navbar').css('-ms-transform', 'translate(0, 0)');                    $('.container').css('-webkit-transform', 'translate(20%, 0)');                    $('.container').css('-o-transform', 'translate(20%, 0)');                    $('.container').css('-moz-transform', 'translate(20%, 0)');                    $('.container').css('-ms-transform', 'translate(20%, 0)');                    menu = "open";                }                else {                    $('.navbar').css('-webkit-transform', 'translate(-95%, 0)');                    $('.navbar').css('-o-transform', 'translate(-95%, 0)');                    $('.navbar').css('-moz-transform', 'translate(-95%, 0)');                    $('.navbar').css('-ms-transform', 'translate(-95%, 0)');                    $('.container').css('-webkit-transform', 'translate(0, 0)');                    $('.container').css('-o-transform', 'translate(0, 0)');                    $('.container').css('-moz-transform', 'translate(0, 0)');                    $('.container').css('-ms-transform', 'translate(0, 0)');                    menu = "close";                }            })          });    </script>    <!-- Main library -->    <script src="../SCRIPT/three.min.js"></script>    <!-- Helpers -->    <script src="../SCRIPT/projector.js"></script>    <script src="../SCRIPT/canvas-renderer.js"></script>    <!-- Visualitzation adjustments -->    <script src="../SCRIPT/3d-lines-animation.js"></script>    <!-- Animated background color -->    <script src="../SCRIPT/color.js"></script>    </body>    <footer>    </footer></html>


    account.css

    Code
    * {    margin: 0px;    padding: 0px;}html, body {    height: 100%;}.container {    width: 100%;    height: 100%;    background: url(../IMAGES/index_background.png);    text-align: center;    -webkit-transition: all 1s ease;    -o-transition: all 1s ease;    -moz-transition: all 1s ease;    -ms-transition: all 1s ease;}.text {    padding-top: 20px;    color: black;}.menu-toggle {    display: block;    text-decoration: none;    margin-top: 20px;    font-size: 18px;}.menu-toggle:hover {    color: #fff;    background: #ff4800;    cursor: pointer;}.navbar {    position: fixed;    height: 100%;    width: 25%;    top: 0px;    left: 0px;    background: url(../IMAGES/index_background.png);    overflow: hidden;    -webkit-transform: translate(-95%, 0);    -o-transform: translate(-95%, 0);    -moz-transform: translate(-95%, 0);    -ms-transform: translate(-95%, 0);    -webkit-transition: all 1s ease;    -o-transition: all 1s ease;    -moz-transition: all 1s ease;    -ms-transition: all 1s ease;}.navbar h2 {    padding: 20px 0px;    color: black;    text-align: center;}nav a {    display: block;    padding: 20px 80px;    text-decoration: none;    font-size: 20px;    color: black;    border-bottom: 1px solid black;}nav a:hover {    color: #ff4800;    cursor: pointer;}.menu_extender {position: relative;right: 100px;top : 10px;}


    Der Hintergrund wie HIER zu sehen ist zudem überdeckt.