CSS: Bild positionieren

Nadja Iwanow · 25. Juli 2015

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

Code

<div class="navbar">
        <div class"menu_extender">
        <a href="#menu">
        <img src="../IMAGES/MENU/menu_extender.gif"> //Aus- Einklapp bild
        </div>
        </a>
        <h2>Menu</h2>
        <nav>
            <a href="#">Home</a>
            <a href="#">Fahrzeug beantragen</a>
            <a href="#">Einstellungen</a>
            <a href="#">Ausloggen</a>
        </nav>
   </div>

Alles anzeigen

CSS:

Code

.menu_extender {
    background-position: left

}

Ich hoffe ihr könnt mir helfen

Agent47 · 25. Juli 2015

Etwa benutz du margin oder position:relative mit top,left:

Nadja Iwanow · 25. Juli 2015

Agent47:

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

Ja benutzen tue ich margin z.b hier:

Code

* {
    margin: 0px;
    padding: 0px;
}


und hier:
.menu-toggle {
    display: block;
    text-decoration: none;
    margin-top: 20px;
    font-size: 18px;
}


position benutze ich nur position: fixed;

Alles anzeigen

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:

Code

<div class="navbar">
        <div class"menu_extender">
        <a href="#menu">
        <img src="../IMAGES/MENU/menu_extender.gif">
        </div>
        </a>
        <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>

Alles anzeigen

Agent47 · 25. Juli 2015

Code

.menu_extender {
margin: top links bottom rechts;
Oder:
position: relative;
left: ?;
top : ?;
}

Besser so? :p sonst versteh ich dich nicht

Nadja Iwanow · 25. Juli 2015

.menu_extender {
position: relative;
right: 100px;
top : 10px;
}

ich weis nicht wieso aber keines von beiden will funktionieren

Agent47 · 25. Juli 2015

edit;

[hide]

Code

<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>

Alles anzeigen

[/hide]

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

Nadja Iwanow · 25. Juli 2015

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)

Spoiler anzeigen

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>

Spoiler anzeigen

account.css

Spoiler anzeigen

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;}

Spoiler anzeigen

Der Hintergrund wie HIER zu sehen ist zudem überdeckt.

Agent47 · 26. Juli 2015

Morgen,

wenn ich fragen darf? Du willst also das Bild was deine Navigation anzeigt permanent an der rechten Ecke haben?

Mfg

H4rd_B4se · 26. Juli 2015

Also das Icon setzt du so in die linke obere Ecke:

CSS

position: fixed;
top: 20px;
left: 20px;

Nadja Iwanow · 26. Juli 2015

Agent47 sozusagen... wenn die Nav eingefahren ist soll das bild ca 10x10px aus der Linken oberen ecke stehen. also 10x10 vom rand entfernt.

H4rd_B4se Sowas in der richtung hatte ich schon probiert, aber leider erfolglos

CSS: Bild positionieren

Beitrag von Nadja Iwanow (25. Juli 2015)

breadfish.de 12. März 2022