Wenn ein Noob beim CSS Tut versagt :/

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Wenn ein Noob beim CSS Tut versagt :/

      Hey ich bin dabei eine Homepage mit PS4 und CSS zu erstellen ...

      ich mache alles nach diesem TUT

      [YOUTUBE]http://www.youtube.com/watch?v=HnUVBzeoNSU&NR=1[/YOUTUBE]
      (Direktlink YouTube- TuTorial: Eine eigene, gute Homepage [8] - Photoshop, CSS - Slices, Mouseover)
      Doch ab ca. 4 minuten macht der den bildcode weg und ersetzt ihn durch nen css bildcode ... und dann kommt mein Problem :

      wenn ich alles nach seinem tut mache und anstatt den bild code

      PHP-Quellcode

      1. <a id="2"></a>
      eingebe ist das bild weg :/

      LG

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • HTML :

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <title>Unbenannt-2</title>
      4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      5. </head>
      6. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><link rel="stylesheet" href="css/mo.css" type="text/css">
      7. <!-- Save for Web Slices (Unbenannt-2.png) -->
      8. <table id="Tabelle_01" width="500" height="900" border="0" cellpadding="0" cellspacing="0">
      9. <tr>
      10. <td colspan="5">
      11. <a id="2"></a></td>
      12. </tr>
      13. <tr>
      14. <td rowspan="2">
      15. <img src="Bilder/Unbenannt-2_02.png" width="367" height="822" alt=""></td>
      16. <td>
      17. <img src="Bilder/Unbenannt-2_03.png" width="46" height="48" alt=""></td>
      18. <td rowspan="2">
      19. <img src="Bilder/Unbenannt-2_04.png" width="19" height="822" alt=""></td>
      20. <td>
      21. <img src="Bilder/Unbenannt-2_05.png" width="37" height="48" alt=""></td>
      22. <td rowspan="2">
      23. <img src="Bilder/Unbenannt-2_06.png" width="31" height="822" alt=""></td>
      24. </tr>
      25. <tr>
      26. <td>
      27. <img src="Bilder/Unbenannt-2_07.png" width="46" height="774" alt=""></td>
      28. <td>
      29. <img src="Bilder/Unbenannt-2_08.png" width="37" height="774" alt=""></td>
      30. </tr>
      31. </table>
      32. <!-- End Save for Web Slices -->
      33. </body>
      34. </html>
      Alles anzeigen


      CSS:

      Quellcode

      1. #2 {
      2. display: block;
      3. background-image: url(../Bilder/Unbenannt-2_01.png);
      4. width: 500px;
      5. height: 78px;
      6. }

    • Special;116472 schrieb:

      HTML :

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <title>Unbenannt-2</title>
      4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      5. </head>
      6. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><link rel="stylesheet" href="css/mo.css" type="text/css">
      7. <!-- Save for Web Slices (Unbenannt-2.png) -->
      8. <table id="Tabelle_01" width="500" height="900" border="0" cellpadding="0" cellspacing="0">
      9. <tr>
      10. <td colspan="5">
      11. <a id="2"></a></td>
      12. </tr>
      13. <tr>
      14. <td rowspan="2">
      15. <img src="Bilder/Unbenannt-2_02.png" width="367" height="822" alt=""></td>
      16. <td>
      17. <img src="Bilder/Unbenannt-2_03.png" width="46" height="48" alt=""></td>
      18. <td rowspan="2">
      19. <img src="Bilder/Unbenannt-2_04.png" width="19" height="822" alt=""></td>
      20. <td>
      21. <img src="Bilder/Unbenannt-2_05.png" width="37" height="48" alt=""></td>
      22. <td rowspan="2">
      23. <img src="Bilder/Unbenannt-2_06.png" width="31" height="822" alt=""></td>
      24. </tr>
      25. <tr>
      26. <td>
      27. <img src="Bilder/Unbenannt-2_07.png" width="46" height="774" alt=""></td>
      28. <td>
      29. <img src="Bilder/Unbenannt-2_08.png" width="37" height="774" alt=""></td>
      30. </tr>
      31. </table>
      32. <!-- End Save for Web Slices -->
      33. </body>
      34. </html>
      Alles anzeigen


      CSS:

      Quellcode

      1. #2 [COLOR="Red"]a[/COLOR] {
      2. display: block;
      3. background-image: url(../Bilder/Unbenannt-2_01.png);
      4. width: 500px;
      5. height: 78px;
      6. }

      Versuchs mal so ...

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="3"]Ich würde einfach mal sagen, du aknnst nem Link kein hintergrundbild zuweisen, da der Link eig nurn kleiner Text is.
      Folge: das Bild ist ebenfalls klein oder es kommt schrecklicher und der Text is riesig und das Bild auch.

      Korrigiert mich, sollte ich falsch liegen, ich bin mir grad nich sicher und so.

      Und wie gesagt, such dir lieber ein gutes tut statt Youtube^^[/SIZE][/COLOR][/FONT]

    • background-image: url(../Bilder/Unbenannt-2_01.png);

      background:url(../Bilder/Unbenannt-2_01.png);

      Sieh außerdem zu dass das bild im richtigen Verzeichnis liegt. Wenn du für die css nen eigenen ordner hast a`la /css und das Verzeichnis Bilder, darunter liegt, dann is die Anwendung richtig. Wenn aber das Verzeichnis Bilder im selben Verzeichnis wie die CSS Datei liegt kannste das "../" weglassen.

      Falls das außerdem nich funzt ersetz mal <a id="2"></a> durch <div id="2"></div> und gib ne Rückmeldung.

      ~Lunatic

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="3"]hmm könnte sein.
      Nimm doch sowieso eher . für den class selektor, so hälste dir zB bei Links das ganze frei, falls du mal nen Anker machen willst (über das # in der URL-Leiste^^)
      Und dann gib dem ganzen am besten nen Namen ala Container und so, so sollte es besser klappen^^[/SIZE][/COLOR][/FONT]

    • Lunatic schrieb:


      background-image: url(../Bilder/Unbenannt-2_01.png);

      background:url(../Bilder/Unbenannt-2_01.png);


      Das bewirkt beides das gleiche du kacknub :>

      Wobei bei beiden die Hochkommas fehlen. Ob das aber notwendig
      ist weiß ich jetzt nicht.

      Ich würde einfach mal sagen, du aknnst nem Link kein hintergrundbild zuweisen, da der Link eig nurn kleiner Text is.
      Folge: das Bild ist ebenfalls klein oder es kommt schrecklicher und der Text is riesig und das Bild auch.


      Man kann Links ein Hintergrundbild oder einer Hintergrundfarbe zuweisen.
      Dieses ist dan allerdings nur so groß wie der Text in der Höhe oder Breite.
      Das liegt daran das Elemente wie span, oder ein Link einen display inline
      Attribut haben. Weißt man einem Div display:inline zu passiert das gleiche.
      Das ganze kann man aber umgehen in dem man entweder einen float oder
      eine absolute Position verwendet. Obs in dem Fall die Lösung ist weiß ich
      nicht. Hab ehrlich gesagt weder Bock das Video, noch den Code anzugucken.


      Und achja, eine ID oder eine Class in einer CSS Datei darf Zahlen, Buchstaben
      und einen Unterstrich beinhalten. Von daher liegt es daran nicht.
      Falls du Firefox verwendest schalte einfach mal die Fehlerkonsole ein, da
      findest du auch was wenn du Fehler im CSS gemacht hast.

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="3"]Das mit dem Bild sagte ich ja, dass das Bild dann viel zu klein ist, bedingt durch die größe des elements, dem es zugewiesen wurde.

      Bei Background: url() und so, darf das hochkomma fehlen, gibt keinen fehler.

      Ansonsten, es gibt nen CSS-Validator.
      Jag deinen Code da mal durch, dann findeste die Fehler und sonstige Warnungen[/SIZE][/COLOR][/FONT]