Anzeige

CSS - Kein Hintergrund mehr

CSS - Kein Hintergrund mehr | PSD-Tutorials.de

Erstellt von AukeArts, 27.01.2011.

  1. AukeArts

    AukeArts Guest

    CSS - Kein Hintergrund mehr
    Guten Abend zusammen,
    ich habe ein kleines Problem, was wie ich schätze wohl eine Anfängerfrage ist :D

    Also.
    Ich möchte für meinen Vater eine reine HTML Seite machen und zu diesem Zwecke habe ich ein Horizontales DropDown Menü gemacht.
    Soweit klappt alles wunderbar, jedoch passt das mit dem Hintergrund nicht.

    In der CSS Datei habe ich zuvor angegeben, dass der Hintergrund eine Grafik (1x30px /.gif) anzeigen soll. Das klappte auch soweit, jedoch war das ein absoluter Pfad. Danach wollte ich ihn zu einem Relativen Pfad machen und einfach nur Templeta/Navigation/navigation_verlauf_hover.gif eingegeben.

    Das klappt allerdings nicht mehr. Bei anderen Stellen funktioniert diese Pfad jedoch. Warum ? Was habe ich flasch gemacht ?

    Und noch eine kleine andere Frage.
    Am unteren Rand der Seite wollte ich einen spacer machen, der immer genau so lang ist wie der Monitor an sich.
    Dazu habe ich width auf auto gestellt und eine Hintergrundfarbe zum testen dazu gegeben. In Dreamweaver klappt alles und ich kann auch die Farbe sehen, allerdings nicht im Browser.

    HTML CODE

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <title>Herzlich Willkommen</title>
    5. <link href="CSS/dropDown.css" rel="stylesheet" type="text/css" />
    6. <style type="text/css">
    7. <!--
    8. .header {
    9.    margin-left:auto;
    10.    margin-right:auto;
    11.    width:900px;
    12.    height:75px;
    13. }
    14. .menu {
    15.    margin-left:auto;
    16.    margin-right:auto;
    17.    width:900px;
    18.    height:30px;
    19. }
    20. .background {
    21.    background-color: #FFFAE8;
    22. }
    23.  
    24. .main {
    25.    margin-left:auto;
    26.    margin-right:auto;
    27.    width:898px;
    28.    height: 900px;
    29.    background-color:#FFF;
    30.    border: 1px solid #999;
    31.    box-shadow: 10px 10px;
    32.    box-shadow: 10px 10px 5px #888;
    33.    box-shadow: inset 2px 2px 2px 2px black;
    34.    box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;
    35. }
    36.    
    37. .spacer {
    38.    height: 30px;
    39.    width: auto;
    40.    background-image: url(Template/Navigation/navigation_verlauf_hover.gif);
    41. }
    42.  
    43.  
    44. -->
    45. </head>
    46.  
    47. <body class="background">
    48. <div class="header">Raum für den Inhalt von  class "header"</div>
    49. <div class="menu">
    50. <div id"wrapper">
    51. <div id="navMenu">
    52.  
    53. <ul>
    54. <li><a href="#">Herzlich Willkommen</a>
    55. <ul></ul> <!-- end inner UL -->
    56.  
    57. </li> <!-- end main IL -->
    58. </ul> <!-- end main UL -->
    59.  
    60. <ul>
    61. <li><a href="#">Praxis</a>
    62. <ul>
    63.  
    64. <li><a href="#">Team</a></li>
    65. <li><a href="#">Räumlichkeiten</a></li>
    66.  
    67. </ul> <!-- end inner UL -->
    68.  
    69. </li> <!-- end main IL -->
    70. </ul> <!-- end main UL -->
    71.  
    72. <ul>
    73. <li><a href="#">Therapie</a>
    74. <ul>
    75.  
    76. <li><a href="#">Therapie1</a></li>
    77. <li><a href="#">Therapie2</a></li>
    78. <li><a href="#">Therapie3</a></li>
    79. <li><a href="#">Therapie4</a></li>
    80.  
    81. </ul> <!-- end inner UL -->
    82.  
    83. </li> <!-- end main IL -->
    84. </ul> <!-- end main UL -->
    85.  
    86. <ul>
    87. <li><a href="#">Anfahrt</a>
    88. <ul></ul> <!-- end inner UL -->
    89.  
    90. </li> <!-- end main IL -->
    91. </ul> <!-- end main UL -->
    92.  
    93. <ul>
    94. <li><a href="#">Kontakt</a>
    95. <ul>
    96.  
    97. <li><a href="#">Impressum</a></li>
    98.  
    99. </ul> <!-- end inner UL -->
    100.  
    101. </li> <!-- end main IL -->
    102. </ul> <!-- end main UL -->
    103.  
    104. <br class="clearFloat" />
    105.  
    106. </div> <!--end navMenu -->
    107. </div> <!-- end wrapper -->
    108. </div>
    109. <div class="main">Raum für den Inhalt von  class "main"</div>
    110. <div class="spacer">Warum ist hier keine Farbe bzw. ein Hintergrundbild obwohl ich es in Dreamweaver sehe ?</div>
    111. </body>
    112. </html>
    113.  
    CSS CODE

    HTML:
    1. @charset "utf-8";
    2.  
    3.  
    4. #navMenu {
    5.     margin: 0;
    6.     padding: 0;
    7. }
    8.  
    9. #navMenu ul {
    10.     margin:0;
    11.     padding: 0;
    12.     line-height:30px;
    13. }
    14.  
    15. #navMenu li {
    16.     margin:0;
    17.     padding:0;
    18.     list-style:none;
    19.     float:left;
    20.     position: relative;
    21.     background-image: url(Template/Navigation/navigation_verlauf_hover.gif;
    22. }
    23.  
    24. #navMenu ul li a {
    25.     text-align:center;
    26.     font-family:Arial, Helvetica, sans-serif;
    27.     text-decoration:none;
    28.     height:30px;
    29.     width:178px;
    30.     display:block;
    31.     color:#333;
    32.     border:1px solid #999;
    33. }
    34.  
    35. #navMenu ul ul {
    36.     position:absolute;
    37.     visibility:hidden;
    38.     top:32px;
    39.     display:inline;
    40. }
    41.  
    42. #navMenu ul li:hover ul {
    43.     visibility:visible;    
    44. }
    45.  
    46. /*****************************************************************************/
    47.  
    48. #navMenu li:hover {
    49.     background-image:#;
    50. }
    51.  
    52. #navMenu ul li:hover ul li a:hover{
    53.    
    54. }
    55.  
    56. .clearFloat {
    57.     clear:both;
    58.     margin:0px;
    59.     padding:0px;
    60. }
    61.  
    62.  
    Webseite: http://aukearts.bplaced.net/

    Mit freundlichen Grüßen,
    AukeArts
     
    Zuletzt von einem Moderator bearbeitet: 27.01.2011
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS - Kein Hintergrund mehr
    AW: CSS - Kein Hintergrund mehr

    1. Verlass dich nicht auf das, was du im DW siehst!
    2. Deine css liegt im Unterordner CSS, es sollte dir zu denken geben, wenn du aus der css den gleichen Pfad aufrufst wie aus der HTML-Datei, die ja einen Ordner drüber liegt.
     
    #2      
  3. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    CSS - Kein Hintergrund mehr
    AW: CSS - Kein Hintergrund mehr

    schreibfehler zusätzlich zum Pfad

    background-image: url(Template/Navigation/navigation_verlauf_hover.gif;


    da fehlt ) vor ;
     
    #3      
  4. AukeArts

    AukeArts Guest

    CSS - Kein Hintergrund mehr
    AW: CSS - Kein Hintergrund mehr

    Danke schonmal.

    @cebito
    zu 1. was denkst du wie ich darauf gekommen bin, dass da was fehlt ? :D
    zu 2. ich verstehe nicht ganz was du meinst. Könntest du das mir etwas näher erklären ? Dafür wäre ich dir wirklich sehr dankbar.

    @ Herr_D
    Auch an dich ein Danke. Hatte ich doch glatt übersehen, jedoch hat es nicht mein Problem gelöst :(
     
    #4      
  5. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    CSS - Kein Hintergrund mehr
    AW: CSS - Kein Hintergrund mehr

    Sofern der Ordner "Template" im selben Verzeichnis wie die HTML liegt, musst du aus der css den Pfad so referenzieren:
    Code (Text):
    1.     background-image: url([SIZE=4][B][COLOR=Red]../[/COLOR][/B][/SIZE]Template/Navigation/navigation_verlauf_hover.gif);
    2.  
    Damit gehst du erst ins höhergelegene Verzeichnis und wechselst dann nach "Template". So wie du oben referenzierst sucht er den Ordner "Template" im Ordner "CSS", da wird er ihn wohl nicht finden, deshalb gibts auch kein Hintergrundbild.
     
    #5      
  6. AukeArts

    AukeArts Guest

    CSS - Kein Hintergrund mehr
    AW: CSS - Kein Hintergrund mehr

    Wer hätte es gedacht, es funktioniert :D
    Vielen Dank Cebito.

    Im nachhinein ist es auch vollkommen logisch ^_^

    Mit freundlichen Grüßen,
    AukeArts
     
    #6      
x
×
×