Menü

hume

Hallo, hab folgendes Problem möchte ein Menü erstellen wie auf dieser Seite
http://www.webmasterpro.de/coding/article…-erstellen.html (Grafik) hab die Grafik mal angehängt. Ich habe keinen Überblick mehr wie ich eigentlich vorgehen muss.

Hier mal der Code:

index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
          <title>BHKWPartner - das optimale BHKW von Ihrem Installateur!</title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>


          <div id="eins">  <b> BHKWPartner Das richtige Aggregat vom richtigen Installateuer! </b>  </div>


          <div id="zwei"></div>
          <div id="drei"> <a href="index.html">Startseite  </a>        </div>
          <div id="vier"> <a href="simulation.html">Simulationsanfrage </a> </div>
          <div id="fünf"> <a href="planung.html">BHKW-Planung </a> </div>
          <div id="sechs"> <a href="abrechnung.html">BHKW-Abrechnung </a> </div>
          <div id="sieben"> <a href="aktuelles.html">Aktuelles </a> </div>
          <div id="acht"> <a href="info.html">Info </a> </div>
          <div id="neun"> <a href="agb.html"> AGB </a> </div>
          <div id="zehn"> <a href="impressum"> Impressum </a> </div>


      </body>
  </html>

Alles anzeigen

CSS Datei:

Code

div#eins {
  background-color:orange;
  text-align:center;
  margin-top:3px;  
  font-size:14pt;
  border-style:double;
  line-height:3cm;
  color:white;
  font-family:Arial; 
  padding-top: 2%;
} 


div#zwei {
  background-color:#178ACC;
  border-style: none; 
  padding-top:12pt;


}


div#drei {


        text-align: left;
        background: url ("menü_1.2.gif")A:hover;

        }

div#vier {
        text-align:left;
        color:black;
        font-family: Arial;
        line-height: 20pt;
        }

div#fünf {


         text-align:left;
         color:black;
         font-family: Arial;
         line-height: 20pt;

}


div#sechs {


          text-align:left;
          color:black;
          font-family: Arial;
          line-height: 20pt;

          }

div#sieben {
           text-align:left;
           color:black;
           font-family: Arial;
           line-height: 20pt;
           }
div#acht {
         text-align:left;
         color:black;
         font-family: Arial;
         line-height: 20 pt;
}


div#neun {
         text-align:left;
         color:black;
         font-family:Arial;
         line-height: 20pt;

         }

div#zehn {
         text-align:left;
         color:black;
         font-family:Arial;
         line-height: 20pt;

Alles anzeigen

Dodo

Öhm hast du dir den Text dort schon mal durchgelesen?
Dort steht das doch eh schritt für schritt.

miki28

Wie Dodo schon gesagt hat würde ich mir an deiner Stelle das Tutorial auch nochmal von vorn ganz durchlesen. Wenn du darin schon irgendwelche Sachen nicht verstehst - versuch die zu verstehen und nicht einfach nur dass es funktioniert.
Ich habe nach der Anleitung auch schonmal was zusammen gestöpselt und es geht einwandfrei.

Gruß Miki
________
lederhose-dirndl-trachtenmode.de

hume

Kann da auch mit DIV gearbeitet werden??

Dodo

Stichwort Semantik!

Ein Menü ist eine Liste aus Links
Und keine Anhäufung aus Containern mit Links.

Da kannst du auch gleich eine Webseite mit einer Tabelle machen. HTML bietet so viele schöne Element. Verwende sie

hume

Hab es jetzt mal versucht, die Seite bleibt aber immer noch gleich, obwohl jetzt dass Menü angezeigt werden müsste.

Mein Code:

Index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
          <title>BHKWPartner - das optimale BHKW von Ihrem Installateur!</title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>


          <div id="eins">  <b> BHKWPartner Das richtige Aggregat vom richtigen Installateuer! </b>  </div>


           <ul id="navigation">
          <div id="zwei"></div>
          <div id="drei"> <li> <a href="index.html">Startseite  </a> </li>       </div>
          <div id="vier"> <li> <a href="simulation.html">Simulationsanfrage </li> </a> </div>
          <div id="fünf"> <li> <a href="planung.html">BHKW-Planung </a> </li> </div>
          <div id="sechs"> <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li> </div>
          <div id="sieben"> <li> <a href="aktuelles.html">Aktuelles </a> </li> </div>
          <div id="acht"> <li> <a href="info.html">Info </a> </li> </div>
          <div id="neun"> <li> <a href="agb.html"> AGB </a> </li> </div>
          <div id="zehn"> <li> <a href="impressum"> Impressum </a> </li> </div>
          </ul>


      </body>
  </html>

Alles anzeigen

CSS Datei

Code

div#eins {
  background-color:orange;
  text-align:center;
  margin-top:3px;  
  font-size:14pt;
  border-style:double;
  line-height:3cm;
  color:white;
  font-family:Arial; 
  padding-top: 2%;
} 


div#zwei {
  background-color:#178ACC;
  border-style: none; 
  padding-top:12pt;


}


div#drei {


        text-align: left;
        background: url ("./images/menü_1.2.gif")A:hover;

        }

div#vier {
        text-align:left;
        color:black;
        font-family: Arial;
        line-height: 20pt;
        }

div#fünf {


         text-align:left;
         color:black;
         font-family: Arial;
         line-height: 20pt;

}


div#sechs {


          text-align:left;
          color:black;
          font-family: Arial;
          line-height: 20pt;

          }

div#sieben {
           text-align:left;
           color:black;
           font-family: Arial;
           line-height: 20pt;
           }
div#acht {
         text-align:left;
         color:black;
         font-family: Arial;
         line-height: 20 pt;
}


div#neun {
         text-align:left;
         color:black;
         font-family:Arial;
         line-height: 20pt;

         }

div#zehn {
         text-align:left;
         color:black;
         font-family:Arial;
         line-height: 20pt;

         }

ul#navigation li {
    width: 250px;
    height: 20px;
}


ul#navigation li a:link {
    background: url("menü_1.2.gif") no-repeat top;
}


ul#navigation li a:hover {
    background: url("menü_1.2.gif") no-repeat bottom;
}

Alles anzeigen

Oder bin ich falsch vorgegangen?

Dodo

Autsch...
Lass deine Seite mal validieren

hume

Zitat

Autsch...
Lass deine Seite mal validieren

Ok, hab ich gemacht dass Menü wird angezeigt, es werden zwar alle Elemente angezeigt, aber sobald man darauf klickt werden es wieder normale Links? Screenshot ist dabei. Habe einen grafischen Hintergrund gemacht, aber dass funktioniert auch nicht, hab den Code sogar überprüft, keinen Fehler.
Hier mal zur Testurl: http://www.bhkwpartner.de/test/index.html

index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
          <title>BHKWPartner - das optimale BHKW von Ihrem Installateur!</title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>


          
          <div id="eins">  <b> BHKWPartner Das richtige Aggregat vom richtigen Installateuer! </b>  </div>
          <ul id="navigation">
          <li> <a href="index.html">Startseite</a> </li>       
          <li> <a href="simulation.html">Simulationsanfrage </a> </li>
          <li> <a href="planung.html">BHKW-Planung </a> </li> 
          <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
          <li> <a href="aktuelles.html">Aktuelles </a> </li> 
          <li> <a href="info.html">Info </a> </li> 
          <li> <a href="agb.html"> AGB </a> </li> 
          <li> <a href="impressum"> Impressum </a> </li> 
          </ul>
      </body>


  </html>

Alles anzeigen

CSS Datei

Code

div#eins {
  background-color:orange;
  text-align:center;
  margin-top:3px;  
  font-size:14pt;
  border-style:double;
  line-height:3cm;
  color:white;
  font-family:Arial; 
  padding-top: 2%;
} 


ul#navigation {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }


    ul#navigation li {
        padding: 0px;
        margin: 5px;
        width: 20%;
    }


    ul#navigation li a:link {
        display: block;
        border: 1px solid #000;
        background:url ("/menu.png") no-repeat top;
        padding: 10px;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-weight: bold;
    }


    ul#navigation li a:hover {
        display: block;
        border: 1px solid #54993f;
        background: url ("/menu.png")no-repeat bottom;
        color: #fff;
    }

Alles anzeigen

Macrosdesign

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
          <title>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>


          <div id="header">
              <h1>
                BHKWPartner Das richtige Aggregat vom richtigen Installateuer!
              </h1>
         </div>
          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>
      </body>


  </html>

Alles anzeigen

Code

* { 
  margin:0;
  padding:0;
  border:0;
  list-style:none;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}


div#header {
  background-color:orange;
  text-align:center;
  margin-top:3px;  
  border-style:double;
  line-height:3cm;
  padding-top: 2%;
} 
    div#header h1 {
       font-size:14pt;
       color:#fff;
    }


    ul#navigation li {
        margin: 5px;
        width: 20%;
    }


    ul#navigation li a {
        display: block;
        border: 1px solid #000;
        background:url ("images/menu.png") no-repeat top;
        padding: 10px;
        color: #000;
        font-weight: bold;
    }


    ul#navigation li a:hover {
        display: block;
        border: 1px solid #54993f;
        background: url ("images/menu.png")no-repeat bottom;
        color: #fff;
    }

Alles anzeigen

.:.:.:.

hume

Zitat

...

Und was soll dass bitte bedeuten?

Macrosdesign

Ich wusste nicht was ich dazu schreiben sollte

Hast du irgendwelche Fragen zu dem Quellcode ?

hume

Zitat

Ich wusste nicht was ich dazu schreiben sollte

Aso

Zitat

Hast du irgendwelche Fragen zu dem Quellcode ?

Ja, warum dass ganze nicht funktioniert, obwohl dass http://validator.w3.org/ sagt dass alles okay ist.

Macrosdesign

Was funktioniert an meinem Quellcode denn nicht ?

hume

Zitat

Was funktioniert an meinem Quellcode denn nicht ?

Sorry, Verwechslung hätte gemeint dass wäre der gleiche Code.
Was war den der Fehler den ich gemacht habe?

Dodo

Ja...
Ganz einfach:

Du verweist im CSS auf das Bild:
http://www.bhkwpartner.de/test/menu.png
Das gibts nicht

hume

Normal ist es auch so möglich zu Verweisen oder?? rot gekennzeichnet.

Code

* { 
  margin:0;
  padding:0;
  border:0;
  list-style:none;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}


div#header {
  background-color:orange;
  text-align:center;
  margin-top:3px;  
  border-style:double;
  line-height:3cm;
  padding-top: 2%;


} 
    div#header h1 {
       font-size:14pt;
       color:#fff;

    }


    ul#navigation li {
        margin: 5px;
        width: 20%;
    }


    ul#navigation li a {
        display: block;
        border: 1px solid #000;
        [COLOR='Red']background:url ("menu.png") no-repeat top;[/COLOR]
        padding: 10px;
        color: #000;
        font-weight: bold;
    }


    ul#navigation li a:hover {
        display: block;
        border: 1px solid #54993f;
       [COLOR='Red'] background: url ("menu.png")no-repeat bottom;[/COLOR]
        color: #fff;
    }

Alles anzeigen

Funktioniert aber nicht, obwohl dass die Datei und die Grafik richtig liegt. Wird Weiß angezeigt und dann wenn dass Menü berührt wird, kann man es nicht mehr lesen. Url: http://www.bhkwpartner.de/test

Tags