Bild über dem vertikalen Menü

  • Hallo zusammen,


    ich habe mich durch alle Artikel gelesen, probiere seit Stunden und kriege das nicht hin. Ich will schlicht und einfach nur ein Bild über dem vertikalen Menü (rechts) anzeigen. Kein Hover, keine Verlinkung, es soll einfach nur da sein. Sorry, ich schaffe es nicht.
    Z. Zt. sieht das so aus:
    <script type="text/javascript">
    $(document).ready(function() {
    $('#imMnMn').append('<li><a href="http://www.sternenschaukel.de/Test"><img class="bild src="Test/Logo_Sabottka_V2_2_1web.jpg"/></a></li></ul>');
    });


    </script>
    <style type="text/css">
    .bild {
    margin-left: 15px;
    margin-top: 20px;
    }


    </style>


    Ich habe den Code umgeändert den Zwoemti mal für Bernie gemacht hat. Tuts aber nicht. Aber ich zu viel gelöscht oder stimmt der Pfad nicht.


    Kann mir das bitte jemand erklären.



    DANKE!!!!!!!!!!!!!!!

  • Schicke mir mal bitte diesen Code damit ich ihn mir anschauen kann. Da ich den Vollständigen nicht kenne kann ich Dir so schwer helfen. ;)

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

  • Hi LAbelle,


    ein Bild über das Menü bringen ist relativ einfach. Es zu positionieren ist schon schwieriger. Soll das Bild immer aufscheinen ?


    Einfach per CSS: unter 1 Allg.Einst. Erweitert


    CSS
    1. <style>
    2. #imMnMn {background-image: url('pfad/bild.png'); background-repeat:no-repeat; background-position: X,X,X,X px; z-index: 100;}
    3. </style>


    Den Pfad ausbessern und die Position eingeben. Allerdings musst du das Bild selbst auf deinen Server spielen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Also ganz komme ich da jetzt nicht mit wieso hat dann Labelle so einen langen Code? Gibt es da Info dazu? ?(

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

  • @Thabo: den Code von Zwoemti finde ich nicht wieder, muss noch mal suchen.
    nun habe ich es so probiert:
    <script>
    $(document).ready(function(){
    $('#imMnMn').append('<img src="http://www.sternenschaukel.lde/Test/Logo_Sabottka_V2_2_1web.jpg"/>');
    });
    </script>


    Ergebnis = nix


    @Andy: da passiert absolut nix! Beziehen sich die Positionen nur auf den Menübereich? In welcher Reihenfolge sind die Pos.?
    <style>
    #imMnMn {background-image: url('http://www.sternenschaukel.lde/Test/Logo_Sabottka_V2_2_1web.jpg'); background-repeat:no-repeat; background-position: 2,2,2,2 px; z-index: 100;}
    </style>

  • Habs wieder gefunden!


    HTML Quelltext


    <script type="text/javascript">
    $(document).ready(function() {
    $('#imMnMn').append('<ul><li><a href="http://unofficialwsx5.de/board42-website-x5-version-8/allgemeine-diskussionen/914-platz-unter-dem-vertikalen-men%C3%BC-nutzen/#post6463l"><img class="bild" src="files/test.jpg"/></a></li><li><a href="http://unofficialwsx5.de/board42-website-x5-version-8/allgemeine-diskussionen/914-platz-unter-dem-vertikalen-men%C3%BC-nutzen/#post6463l"><img class="bild2" src="files/test.jpg"/></a></li><li><a href="http://unofficialwsx5.de/board42-website-x5-version-8/allgemeine-diskussionen/914-platz-unter-dem-vertikalen-men%C3%BC-nutzen/#post6463l"><img class="bild3" src="files/test.jpg"/></a></li></ul>');
    });


    </script>
    <style type="text/css">
    .bild {
    margin-left: 15px;
    margin-top: 20px;
    }
    .bild2 {
    margin-left: -5px;
    margin-top: 20px;
    width: 190px;
    }
    .bild3 {
    margin-left: 40px;
    margin-top: 20px;
    width: 100px;
    }
    .bild:hover, .bild2:hover, .bild3:hover {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 2px solid #FFF93D;
    margin-top: 16px;
    }
    </style>



    das habe ich versucht auf nur ein Bild zu ändern und den hover rausgenommen. Eine Verlinkung brauche ich auch nciht! Das kann doch nicht so schwierig sein. Irgendwie hab ich da gerade eine Scheunentor vor dem Kopf.

  • Versuchs mal so..


    CSS
    1. <style>
    2. #imMnMn {background-image: url('Test/Logo_Sabottka_V2_2_1web.jpg'); background-repeat:no-repeat; background-position: 0,100,0,0 px; z-index: 100;}
    3. </style>


    Groß/Klein buchstaben beachten.



    NAchtrag: Das geht natürlich nur wenn du dein Projekt schon unter "test" raufgespielt hast. In der Vorschau gehts nicht. Da musst du dann Ordner Pfade angeben "C:/bilder/Logo_Sabottka_V2_2_1web.jpg"

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von andy67 ()

  • Hi Andy


    hier das Ergebnis: siehe Anhang


    dann hab ich es noch hiermit probiert:
    <script>
    $(document).ready(function(){
    $('#imMnMn').append('<img src="http://www.sternenschaukel.lde/Test/Logo_Sabottka_V2_2_1web.jpg">');
    });
    </script>


    Ergebnis siehe Anhang 2


    Das das Bild gefunden wird sieht man bei dem Versuch mit deinem Code, ich will aber, oder möchte gerne, das es auch über den Content hinaus ragt.


    Ich muss jetzt erst Pause machen und abschalten, morgen weiter. Euch einen lieben Dank und einen schönen Abend. Bis morgen :) :sleeping: :sleeping:


    Nachsatz: Ob drunter oder drüber ist mir zwischenzeitlich egal, Hauptsache das!

    Dateien

    • V1_Andy.jpg

      (17,2 kB, 11 Mal heruntergeladen, zuletzt: )
    • V2.jpg

      (8,71 kB, 15 Mal heruntergeladen, zuletzt: )

    LG
    Labelle

  • Wenn ich mich da nicht ganz täusche hast Du ein paar Zeichen zuviel darin, dadurch funktioniert es nicht. Muss das in Ruhe durchgehen. ?(


    Versuche mal dies so auf die Schnelle:


    <script type="text/javascript">
    $(document).ready(function() {
    $('#imMnMn').append('<li><a href="http://www.sternenschaukel.de/Test"><img class="bild src="Test/Logo_Sabottka_V2_2_1web.jpg"</li></a>
    }


    </script>
    <style type="text/css">
    .bild {
    margin-left: 15px;
    margin-top: 20px;
    }


    </style>

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

    Einmal editiert, zuletzt von Thabo-Umasai ()

  • Guten Morgen zusammen.


    Mit Andys letztem Vorschlag hab ich es irgendwie hinbekommen. Wobei Änderungen der Werte von BG-Postition oder Z-index überhaupt keine Auswirkungen haben. Das erklärt sich mir nicht.


    Lieben Dank euch beiden für eure schnelle Hilfe.