bild wird nicht angezeigt

  • Hallo liebe Community,


    mir wird das bild mit der Klasse logo nicht angezeigt, woran liegt das ? kann mir bitte jemand helfen:(


    ich arbeite mit codeanywhere..


    das hier ist der code:


    <!DOCTYPE html>

    <!-- *********************

    * Diese Datei gehört zum imuk3-webeng-Musterprojekt *

    * Copyright (c) by Juliana Popp *

    * Licensed under GPL3, see http://www.gnu.org/licenses/gpl.html *

    ************************ -->

    <html>

    <head>

    <title>Homepage</title>

    <meta charset="UTF-8" />

    <link rel="stylesheet" href="./stylesheets/stylesheet.css" type="text/css"/>


    <!-- Eingefügt -->

    <script src="client-js/jquery-3.1.1.min.js" type="text/javascript"></script>

    <!-- bis hier -->


    </head>


    <body>

    <!-- Navigationsleiste eingefügt -->





    <a href="index.html"> <img src="pics/artificial-intelligence-3382507_1920.jpg" alt="Logo" class="logo" ></a>


    <div class = "header">

    <nav>

    <ul>

    <li><a class="navigation" href="/baustelle.html">Aktuelles</a>

    &nbsp;&nbsp;&nbsp; </li>


    <li><a class="navigation" href="/baustelle.html">Projektergebnisse</a>

    &nbsp;&nbsp;&nbsp;</li>


    <li><a class="navigation" href="/baustelle.html">Termine</a>

    &nbsp;&nbsp;&nbsp;</li>


    <li><a class="navigation" href="/baustelle.html">Anmeldungen</a>

    &nbsp;&nbsp;&nbsp;</li>


    <li><a class="navigation" href="/baustelle.html">Kontakte</a></li>


    </ul>

    </nav>

    </div>


    </div>


    <!-- bis hier -->


    <!--

    <h1>Homepage mit meinen wichtigen Links:</h1>

    <h1><a style="color:white" href="enterprise-webapp.html">Hier geht es weiter zur "enterprise-webapp.html"-Datei!</a></h1>

    <h2><a style="color:white" href="rolle_beispiele.html">Hier geht es weiter zur "rolle_beispiele"-Datei!</a></h2>

    <h2><a style="color:white" href="muster-ToggleJeNachRolle.html">Hier geht es weiter zur "muster-ToggleJeNachRolle"-Datei!</a></h2>

    <h2><a style="color:white" href="fancybox.html">Hier geht es weiter zur "fancybox"-Datei!</a></h2>

    -->


    <!-- muster toggle Eingefügt -->


    <a id='button' class="sichtbar" href="muster-ToggleJeNachRolle.html"><button>Immer sichtbar</button></a>

    <a id='buttonAdmin' class="sichtbarAdmin" href="muster-ToggleJeNachRolle.html"><button>Nur sichtbar, wenn als admin eingeloggt</button></a>

    <a id='buttonMitarbeiter' class="sichtbarMitarbeiter" href="muster-ToggleJeNachRolle.html"><button>Nur sichtbar, wenn als mitarbeiter eingeloggt</button></a>

    <a id='buttonMitglied' class="sichtbarMitglied" href="muster-ToggleJeNachRolle.html"><button>Nur sichtbar, wenn als mitglied eingeloggt</button></a> <br>



    <div id="login">

    <!--<h2>Direkter Login-Button</h2>

    Achtung, jetzt wird bei erfolgreichem Login die 'rolle_beispiele.html' geladen

    <br/> Mit dem Browser-Back-Button kommen Sie auf diese Seite

    und können sie dort mit dem aktuellen Login-Status neu laden-->

    <div>

    <a href="/login"><button style="background-color:blue">Login</button></a>

    </div>

    </div>

    <div id='logout'>


    <div>

    <input type="button" style="background-color:yellow" onclick="doLogout();" value="Logout"/>

    </div>



    <!-- bis hier -->







    <p>Momentaner Login-Status:<br/>

    <input type="radio" id="loginStatus_an" name="loginStatus" disabled="true"/>

    <label for="loginStatus_an"> eingelogged</label>

    <input type="radio" id="loginStatus_aus" name="loginStatus" disabled="true"/>

    <label for="loginStatus_aus"> nicht eingelogged</label><br>

    <div id="roles">eingelogged als:</div>

    </p><br/>



    <h2>The Industry 4.0 Supply Chain Hackathon</h2>


    <h5>The Industry 4.0 Supply Chain Hackathon is a response to the increasing demand of IoT (Internet-of-Things) and Industry 4.0 (i4) applications and business models in various industries.


    Applications either aim to increase transparency, increase value, or to develop new services and solutions. Hence, the business side is driving the application development that is based on technology.


    Examples are light barriers, RFID-technology, cameras, or temperature sensors. Light barriers, i.e. control the amount of products that pass a certain area. RFID technology, i.e., allows firms to manage access rights to buildings. Cameras can be used to monitor quality of produced goods, while temperature sensors can analyze and send warning messages in case the temperature exceed a certain level.

    All use cases have in common that data is collected, stored, analyzed, and decisions are prepared or taken with a better understanding of the situation.


    However, many firms lack the capabilities to either develop the business case, or to setup and implement the needed IT-infrastructure, or miss an understanding of good data analytic processes.

    Therefore, we decided to train our students in that area. Besides that, not only students are invited, also firms can participate in our reception and have a look at the demonstrators.


    The i4sc-hackathon.net aims to develop real-world demonstrators that are part of the “Industry 4.0” / “Internet-of-Things”. The demonstrators are small use cases that can be – later on – combined towards a scenario.


    Students can participate by sending a short application to tob </h5>





    </body>






    <!-- togglen -->


    <script type="text/javascript">

    /* global $ */

    var success = function(){

    // Die angegebene Route wird angefordert und angezeigt:

    window.location.href = "/";

    };

    function doLogout() {

    //wird mit der Callback-Funktion "success" aufgerufen.

    //Wenn also die Funktion erfolgreich durchläuft, dann wird die success-Funktion aufgerufen.

    $.get('/logout', success);

    }


    $.get("/service_istEingelogged", function(data) {

    if (data.toString() == 'true') {

    $('#loginStatus_an').prop('checked', true);

    rollenAbfrage();

    }

    else {

    $('#loginStatus_aus').prop('checked', true);

    }

    });


    function rollenAbfrage(){

    var whatToDo=function(data){

    //Übernehme die gesendeten Rollen in das UI

    $("#roles").innerHTML="eingelogged als: " + data.toString();

    };

    $.get("/service_rollenAbfrage", whatToDo);

    }




    var success = function() {

    // Die angegebene Route wird angefordert und angezeigt:

    window.location.href = "/index.html";

    };


    function doLogout() {

    //wird mit der Callback-Funktion "success" aufgerufen.

    //Wenn also die Funktion erfolgreich durchläuft, dann wird die success-Funktion aufgerufen.

    $.get('/logout', success);

    }


    /* global $*/


    function toggeln() {

    $.get("/service_istEingelogged", function(data) {

    console.log("User einloggen wird getestet; Status ist " + data.toString());

    $('#login, #logout').css('visibility', 'hidden');

    //Initialisierung der Sichtbarkeit des Admin- und Mitarbeiter-Buttons und Mitglied-Buttons

    $('.sichtbarAdmin, .sichtbarMitarbeiter, .sichtbarMitglied').css('visibility', 'hidden');


    //Falls User eingeloggt ist, dann wird nach den Rollen gefragt

    if (data.toString() == "true") {

    console.log("User ist eingeloggt");

    //User ist eingeloggt, also sollte er jetzt den Logout-Knopf sehen

    $('#logout').css('visibility', 'visible');


    //Aber als was, d.h. in welcher Rolle ist er/sie eingeloggt?

    var whatToDo = function(data) {

    console.log("Rollen: " + data.toString());

    //Übernehme die gesendeten Rollen in das UI

    var rolesArray = data.toString().split(',');

    for (var i = 0; i < rolesArray.length; i++) {

    if (rolesArray[i] == 'admin') {

    console.log("admin-Button wird gezeigt");

    $('.sichtbarAdmin').css('visibility', 'visible');

    }

    if (rolesArray[i] == 'mitarbeiter') {

    console.log('mitarbeiter-Button wird gezeigt');

    $('.sichtbarMitarbeiter').css('visibility', 'visible');

    }

    if (rolesArray[i] == 'mitglied') {

    console.log('mitglied-Button wird gezeigt');

    $('.sichtbarMitglied').css('visibility', 'visible');


    }

    }

    };

    $.get("/service_rollenAbfrage", whatToDo);

    }

    else {

    //User ist nicht eingeloggt, also sollte er jetzt den Login-Knopf sehen

    console.log("User ist nicht eingeloggt");

    $('#login').css('visibility', 'visible');

    }

    });

    }


    //Aufruf der toggeln-Funktion, damit sie immer direkt beim

    // Aufruf dieser Seite auch ausgeführt wird;

    // Bei Benutzung von AngularJS muss sie nach der Übergabe der

    // gelesenen Daten (also in der Callback-Funktion des Lese-GET-Requests am Ende)

    // ausgeführt werden, denn zu dem Zeitpunkt sind die Daten erst im DOM aufgebaut.

    $(document).ready(function(){toggeln()});

    </script>

    </html>

  • Aus dem, was du hier eingefügt hast, ist nicht erkennbar, wo das Problem liegt - bitte gib uns einen Link zu der Seite.

    Wie sieht die CSS Formatierung für die Klasse 'logo' aus?

    Ist die Link-Adresse zu der Bilddatei richtig? ... auch auf Groß- Kleinschreibung achten.

  • Du hast nach </nav> ein schliesendes </div> zu viel.


    Denke aber nicht das es einfluß auf dein Logo hat, aber könnte auf der anderen Css stören. ( Muß aber nicht ).


    Trotzdem muß das div da weg ,das hat da nix zu suchen.



    EDIT:

    Habe noch mehr gefunden.

    du hast weiter unten noch ein </p> zu viel , dann benutzt du <br> und <br/> ,da weiß ich das der erste richtig ist aber beim 2 ten ??


    An besten testest du deinen Code erstmal nach Fehlern und wenn die alle weg sind könnte das mit den Bild vieleicht auch schon klappen,.

    Falls nicht mußt du ubns mal Link oder deinen Ganzen Code geben ,damit man da mal genauer kucken kann.

  • Hey estellasantoro!


    Ich würde deinen Code erstmal durch einen Validator hauen (z.B. https://validator.w3.org/nu/#textarea)

    Und zweitens ist wie Sailor schon gesagt hat für uns auch der CSS code sehr wichtig :)


    Edit: Ich habe eben den Code durch den Validator laufen lassen und bei mir im Localhost deine Seite angeguckt! Ich habe das Bild mit einem anderen ersetzt und es ging perfekt, also wie gesagt vielleicht liegt es am Bild selber oder am CSS Code (Den Validator nicht vergessen ;) )


    MfG Riku

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!