Bild wird nicht erkannt

  • Brauche mal Eure Hilfe :)

    arbeite gerade ein Tutorialvideo durch und bekomme einfach nicht im subheader das Bild rein obwohl der Code und die Bildquelle stimmt.


    Suche schon seit Stunden und finde nicht den Fehler.


    Bitte um Hilfe.


    LG


  • Was ist Fiddel?


    Klar, hier der Code


    </>

    <!DOCTYPE html>

    <html lang="en" class="no-js">

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Fluidsounds</title>


    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="shortcut icon" href="/images/favicon.png">

    <link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon.png">

    <link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">

    <link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">


    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="custom.css">


    <script src="js/modernizr.js"></script>

    </head>

    <body>

    <header class="fs-header">

    <div class="container row">

    <div class="col col-5 fs-logo">

    </div>

    <div class="col col-7 fs-menu">

    <nav>

    <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">Artists</a></li>

    <li><a href="#">Shop</a></li>

    <li><a href="#">Contact</a></li>

    <li><a href="#">Login</a></li>

    </ul>


    </nav>

    </div>

    </div>

    </header>


    <section class="fs-subheader">

    <div class="behind">


    <div class="left">

    </div>

    <div class="right">

    </div>

    <div class="before">

    </div>

    </section>


    <section class="fs-content">

    <div class="container">

    <article>

    <h1>Überschrift 1</h1>

    <p>LoremLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

    no sea takimata sanctus est Lorem ipsum dolor sit amet.

    </P>

    <h2>Überschrift 2</h2>

    <p>LoremLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

    no sea takimata sanctus est Lorem ipsum dolor sit amet.

    </P>

    <h3>Überschrift 3</h3>

    <p>LoremLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

    no sea takimata sanctus est Lorem ipsum dolor sit amet.

    </P>

    <h4>Überschrift 4</h4>

    <p>LoremLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

    no sea takimata sanctus est Lorem ipsum dolor sit amet.

    </P>

    </article>

    </div>

    </section>

    <section class="fs-player">

    <div class="container row">

    <div class="col col-1">

    </div>

    <div class="col col-11">

    </div>

    </div>

    </section>


    <footer class="fs-footer">

    <div class="container row">

    <div class="col col-3 fs-footer-website">

    <h4>Website</h4>

    <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">Artists</a></li>

    <li><a href="#">Shop</a></li>

    <li><a href="#">Contact</a></li>

    <li><a href="#">Login</a></li>

    </ul>

    </div>

    <div class="col col-3 fs-footer-artists">

    <h4>Artists</h4>

    <ul>

    <li><a href="#">Musicman</a></li>

    <li><a href="#">Master of the Sound</a></li>

    <li><a href="#">Red Glasses</a></li>

    <li><a href="#">Holy Soul</a></li>

    <li><a href="#">Kevin Kilsby</a></li>

    </ul>

    </div>

    <div class="col col-3 fs-footer-new">

    <h4>New Releases</h4>

    <ul>

    <li><a href="#">In the World of Bass</a></li>

    <li><a href="#">Living Guitar</a></li>

    <li><a href="#">Juno & More</a></li>

    <li><a href="#">Superfly</a></li>

    </ul>

    </div>

    <div class="col col-3 fs-footer-info">

    <h4>Get Social!</h4>

    <ul class="fs-social">

    <li><a href="#"><img src="images/icon-skype.png"></a></li>

    <li><a href="#"><img src="images/icon-google-plus.png"></a></li>

    <li><a href="#"><img src="images/icon-twitter.png"></a></li>

    <li><a href="#"><img src="images/icon-facebook.png"></a></li>

    </ul>

    <h4>Pay with</h4>

    <ul class="fs-payment">

    <li><a href="#"><img src="images/icon-visa.png"></a></li>

    <li><a href="#"><img src="images/icon-paypal.png"></a></li>

    <li><a href="#"><img src="images/icon-mastercard.png"></a></li>

    </ul>

    </div>

    </div>

    </footer>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="js/default.js"></script>

    </body>

    </html>

    body {

    background-color: #1C5052;

    }


    a {

    text-decoration: none;

    }


    header {

    height: 111px;

    background: #262e30; /* Old browsers */

    background: -moz-linear-gradient(top, #262e30 0%, #0a0c0d 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262e30), color-stop(100%,#0a0c0d)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top, #262e30 0%,#0a0c0d 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top, #262e30 0%,#0a0c0d 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top, #262e30 0%,#0a0c0d 100%); /* IE10+ */

    background: linear-gradient(to bottom, #262e30 0%,#0a0c0d 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262e30', endColorstr='#0a0c0d',GradientType=0 ); /* IE6-9 */

    -webkit-box-shadow: 0px 5px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 0px 5px rgba(0, 0, 0, 0.3);

    box-shadow: 0px 5px rgba(0, 0, 0, 0.3);

    position: relative;

    z-index: 10;

    }


    header .fs-menu {}

    text-align: right;


    header .row {

    padding-top: 0px;

    }


    header .fs-logo {

    background: url("images/logo.png");

    width: 389px;

    height: 52px;

    margin-top: 10px;

    }


    header nav {

    height: 111px;

    overflow: hidden;

    }


    header nav ul {

    list-style-type: none;

    padding: 0px;

    margin: 0px;

    }


    header nav ul li {

    display: inline-block;

    padding: 0px 0 0 40px;

    }


    header nav ul li a {

    line-height: 111px;

    color: #dedede;

    font-size: 1.1em;

    }


    header nav ul li a:hover {

    color: f2f2f2;

    }



    .fs-subheader {

    overflow: hidden;

    height: 107px;

    background: #203B3B;

    }


    .fs-subheader .behind {

    position: absolute;

    width: 100%;

    height: 107px;

    }


    .fs-subheader .behind .left,

    .fs-subheader .behind .right {

    display: inline-block;

    height: 107px;

    width: 50%;

    }


    .fs-subheader .behind .right {

    background: #5B6E6E;

    }


    .fs-subheader .before {

    position: relative;

    z-index: 1;

    background: url("images/bg-subheader.png");

    height: 107px;

    width: 1280px;

    margin-left: auto;

    margin-right: auto;

    }


    .fs-content {

    background: #F2F2F2;

    min-height: 300px;

    padding: 2em;

    }


    .fs-player {

    background: url("images/bg-player.png");

    height: 81px;

    border-top: 1px solid #c7c7c7;

    -webkit-box-shadow: 0px 5px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 0px 5px rgba(0, 0, 0, 0.3);

    box-shadow: 0px 5px rgba(0, 0, 0, 0.3);



    }


    footer {

    padding-top: 1.25em;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    }


    footer h4 {

    color: #f2f2f2;

    }


    footer ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

    }


    footer ul li a {

    color: #dadede;

    }


    footer ul li a: hover {

    color: #f2f2f2;

    }


    footer .fs-footer-info ul li {

    display: inline-block;

    }



    footer .fs-footer-info img {

    width: 38px;

    height: 38px;

    -webkit-box-shadow: 0px 5px rgba(0, 0, 0, 0.8);

    -moz-box-shadow: 0px 5px rgba(0, 0, 0, 0.8);

    box-shadow: 0px 5px rgba(0, 0, 0, 0.8);

    }

    </>

  • das ist fiddel


    https://jsfiddle.net/basti1012/ot8rcyto/3/

    da kann man javascript codes testen( html,css auch),bearbeiten,speichern und anderen übergeben die können dann weiter dran arbeiten.

    in diesen fall habe ich dein code rein kopiert und 2 dinnge geändert( fehlenden</div>geschlossen </P> klein geschrieben und <style> ums css gepackt und andere fotos reingemacht weil ich die originalen ja nicht habe) .und wie du siehst es läuft.


    du kannst dir den code da 1 zu 1 rauskopieren und dann solte es auch laufen

  • Beachtest du eigentlich was wir dir für Tipps geben ?


    Stecke dein CSS in den Head Tag in <Style>



    Desweiteren ändere mal bei den Bildern von background zu background-image und füge da no-repeat hinzu.

  • Vielen Dank für die Hilfe aber verstehe das nicht so ganz wo ich den Style hinpacken soll an welcher Stelle?


    Sobald ich diesen in die index packe verschwindet ganz das Design


    Das CSS ist aus in einer anderen Datei und diese ist doch verlinkt oder etwa nicht?

  • Das CSS ist aus in einer anderen Datei und diese ist doch verlinkt oder etwa nicht?


    Nein. Schau dir doch mal genauer das dokument an, welches du hier gepostet hast. Du fügst nach dem </html> am Ende das CSS dazu. CSS-Befehle funktionieren jedoch nur im <style></style> oder in einer externen css datei welche du dann mit <link rel="stylesheet" href="css/index.css"> einbindest.


    So sieht es mit Benutzung des style-elements aus:

  • Mit der externen CSS-Datei so:


  • und nicht vergessen den </div> dazu noch reinzumachen sonst ist das bild an falscher stelle. und </p> klein schreiben sehe auch besser aus .


    du brauchst eigentlich jetzt nur das hier kopieren und einfügen dann läuft es eigentlich auch .

    da ist der div zu .

    wie stef sagte die css in <style></style>gepackt im head bereich.


    wenn du jetzt das kopierst und einfügst ist alles bestens..


    wenn du externe css hast löscht du den style bereich und schreibst den externen kram da rein.


    aber an besten versuchst du erstmal das erste und wenn das klappt das 2te,ist glaube ich einfacher so

Jetzt mitmachen!

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