christian3224: css-menü in verlinkter bilderreihe einfügen

SELF-Forum

css-menü in verlinkter bilderreihe einfügen

christian3224
– Informationen zu den Bewertungsregeln

hi,
ich hab mir ein kleines horizontales menü zusammengestellt und möchte es in eine verlinkte bilderreihe einfügen,
aber immer wenn ich das horizontale css-menü einfüge und dann die bilder verlinke, passiert folgendes:

  • das design steht ein wenig "am kopf" wegen dem doctype! (nicht so schlimm)
  • das css- menü legt sich sofort auf die anderen bilder darüber und befindet sich dann nicht mehr ca. in der mitte sondern ganz links!
    noch ne frage:
  • was bedeutet "em" ich glaube abstand, aber wieviele pixel wären dann 1 em?

wie kann ich das verhindern? bzw was hab ich mit meinem code flsch gemacht?

hier mal der code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
 function hoverIE() {
   var LI = document.getElementById("Navigation").firstChild;
   do {
     if (sucheUL(LI.firstChild)) {
       LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
     }
     LI = LI.nextSibling;
   }
   while(LI);
 }

function sucheUL(UL) {
   do {
     if(UL) UL = UL.nextSibling;
     if(UL && UL.nodeName == "UL") return UL;
   }
   while(UL);
   return false;
 }

function einblenden() {
   var UL = sucheUL(this.firstChild);
   UL.style.display = "block"; UL.style.backgroundColor = "silver";
 }
 function ausblenden() {
   sucheUL(this.firstChild).style.display = "none";
 }

window.onload=hoverIE;
}
</script>

<style type="text/css">
 body {

}
 * html div#Rahmen {  /* Korrektur fuer IE 5.x */
   width: 48.7em;
   w\idth: 47.1em;
 }
 div#Rahmen div {
    clear: left;
 }
 ul#Navigation {
   margin: 0; padding: 0;
   text-align: center;
 }

ul#Navigation li {
   list-style: none;
   float: left;  /* ohne width - nach CSS 2.1 erlaubt */
   position: relative;
   margin: 0.4em; padding: 0;
 }
 * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
   margin-bottom: -0.4em;
 }
 *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
   margin-bottom: -0.1em;
 }

ul#Navigation li ul {
   margin: 0; padding: 0;
   position: absolute;
   top: 1.6em; left: -0.4em;
   display: none;  /* Unternavigation ausblenden */
 }
 * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
   left: -1.5em;
   lef\t: -0.4em;
 }
 *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
   background-color:silver; padding-bottom:0.4em;
 }
 ul#Navigation li:hover ul {
   display: block;  /* Unternavigation in modernen Browsern einblenden */
 }
 ul#Navigation li ul li {
   float: none;
   display: block;
   margin-bottom: 0.2em;
 }

ul#Navigation a, ul#Navigation span {
   display: block;
   width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
   padding: 0.2em 1em;
   text-decoration: none; font-weight: bold;

}
 * html ul#Navigation a, * html ul#Navigation span {
   width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
   w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
 }
 ul#Navigation a:hover, ul#Navigation span, li a#aktuell {

}
 li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
 }
 ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */

</style>
</head>
<body>

<div id="Rahmen" style="width: 112px; height: 25px"><ul id="Navigation">

<li><img border="0" src="ausklappbalken00_10.gif" width="112" height="25">
     <ul style="position: absolute; left: -5px; top: 22px">
       <li>
 <img border="0" src="ausklappbalken01_17.gif" width="112" height="27"></li>
       <li>
 <img border="0" src="ausklappbalken02_19.gif" width="112" height="27"></li>
       <li>
 <img border="0" src="ausklappbalken03_20.gif" width="112" height="27"></li>
     <li><img border="0" src="ausklappbalken04_21.gif" width="112" height="27"></li>
     </ul>

</li>

</ul><div></div></div>

</body>
</html>

mfg
christian3224

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. css-menü in verlinkter bilderreihe einfügen

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    aber immer wenn ich das horizontale css-menü einfüge und dann die bilder verlinke, passiert folgendes:

    verwende bitte links und gebe diesen hintergrundbilder

    • das design steht ein wenig "am kopf" wegen dem doctype! (nicht so schlimm)

    nein, wegen dem invaliden code

    • das css- menü legt sich sofort auf die anderen bilder darüber und befindet sich dann nicht mehr ca. in der mitte sondern ganz links!

    korrigiere erst deinen code, dann ist produktives fehlersuchen möglich

    noch ne frage:

    • was bedeutet "em" ich glaube abstand, aber wieviele pixel wären dann 1 em?

    ein em entspricht der schriftgröße des aktuellen elements - 1 em = schriftgröße in pixel - je nach browsereinstellung KANN ein em abweichend sein (sofern du selbst nirgends die schriftgröße in einer anderen einheit angibts)

    wie kann ich das verhindern? bzw was hab ich mit meinem code flsch gemacht?

    mr. validator sagt, dein code ist invalide

    noch ein tipp: schreib klassen und ids in css und html klein, damit sparst du dir eine menge arbeit - css ist in diesen belangen case-sensitive (aber nicht alle browser) somit könnte das zu fehlern führen, die du so schnell nicht finden wirst

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. css-menü in verlinkter bilderreihe einfügen

      christian3224
      – Informationen zu den Bewertungsregeln

      verwende bitte links und gebe diesen hintergrundbilder

      Wie mach ich die zu hintergrundbildern?, ichba die bilder immer mit <a href="..."><a> oder so ca. verlinkt.

      • das design steht ein wenig "am kopf" wegen dem doctype! (nicht so schlimm)
        nein, wegen dem invaliden code

      Wie bekomme ich es wieder valide?

      • das css- menü legt sich sofort auf die anderen bilder darüber und befindet sich dann nicht mehr ca. in der mitte sondern ganz links!
        korrigiere erst deinen code, dann ist produktives fehlersuchen möglich

      ein em entspricht der schriftgröße des aktuellen elements - 1 em = schriftgröße in pixel - je nach browsereinstellung KANN ein em abweichend sein (sofern du selbst nirgends die schriftgröße in einer anderen einheit angibts)

      Ich geb die Schriftgröße in px immer an! is das ziehmlich schlimm?

      noch ein tipp: schreib klassen und ids in css und html klein, damit sparst du dir eine menge arbeit - css ist in diesen belangen case-sensitive (aber nicht alle browser) somit könnte das zu fehlern führen, die du so schnell nicht finden wirst

      Wie meinst das mit "Klassen"?

      Könntest du dir bitte mal ein wenig meinen Code anschauen den ich gepostet hab!?

      Danke
      Mfg
      chrstian3224

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. css-menü in verlinkter bilderreihe einfügen

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        verwende bitte links und gebe diesen hintergrundbilder
        Wie mach ich die zu hintergrundbildern?, ichba die bilder immer mit <a href="..."><a> oder so ca. verlinkt.

        anstatt <a href="#"><img src="foo.jpg" alt="Startseite" /></a> schreibtst du folgendes
        <a id="startseite" href="#">Startseite</a>

          
#startseite {  
   background: red url(foo.jpg);  
   display: block;  
   width: 100px;  
   height: 100px;  
   overflow: hidden;  
   text-indent: -999999em;  
}

        das ganze ähnelt vom prinzip der phark-methode (suchmaschine hilft - ggf auch der begriff "image replacement")

        nein, wegen dem invaliden code
        Wie bekomme ich es wieder valide?

        in dem du die fehler beseitigst, die der validator bemängelt - und den code in eine form bringst, die dem gegebenen doctype entspricht oder einen doctype wählst der exakt zum code passt

        wenn du mit der interpreation der fehlermeldungen schwierigkeiten hast, einfach bescheid geben

        Ich geb die Schriftgröße in px immer an! is das ziehmlich schlimm?

        jein - den meisten modernen browsern ist das mittlerweile egal und die schriftgröße ist dennoch frei skalierbar (der ie6 kann das leider nicht) - aber es nimmt dem besucher dennoch die möglichkeit, die seite mit SEINER voreingestellten schriftgröße zu betrachten

        Wie meinst das mit "Klassen"?

        klassen

        dh alles was in den attributen class="" und id="" steht, solltest du klein schreiben

        in der css datei musst du dann nicht nachdenken ob dus klein oder gross geschrieben hast und schreibst es auch einfach klein - damit spart man sich wie gesagt flüchtigkeitsfehler

        Könntest du dir bitte mal ein wenig meinen Code anschauen den ich gepostet hab!?

        hab ich schon - viel wars ja nicht - am besten du fängst neu an - viel hast du ja noch nicht (bis auf dein css) und überträgst bestehenden code in ein neues dokument

        fang am besten mit dem grundgerüst an und ignoriere vorerst dein javascript

        das stylesheet lagerst du am besten in eine eigene datei aus und bindest es mittels link-element im seitenkopf (head) ein

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. css-menü in verlinkter bilderreihe einfügen

          christian3224
          – Informationen zu den Bewertungsregeln

          verwende bitte links und gebe diesen hintergrundbilder
          Wie mach ich die zu hintergrundbildern?, ichba die bilder immer mit <a href="..."><a> oder so ca. verlinkt.

          anstatt <a href="#"><img src="foo.jpg" alt="Startseite" /></a> schreibtst du folgendes
          <a id="startseite" href="#">Startseite</a>

          hab ich schon - viel wars ja nicht - am besten du fängst neu an - viel hast du ja noch nicht (bis auf dein css) und überträgst bestehenden code in ein neues dokument

          fang am besten mit dem grundgerüst an und ignoriere vorerst dein javascript

          xD, ich hab schon das 3.te mal neu angefangen, als vorlage hab ich immer <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=diese Erläutrerung> verwendet. aber alles daraus hab ich nicht verstanden!

          das stylesheet lagerst du am besten in eine eigene datei aus und bindest es mittels link-element im seitenkopf (head) ein

          wie mach ich das genau, bevor ich noch ein paar fehler mache?!

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. css-menü in verlinkter bilderreihe einfügen

            christian3224
            – Informationen zu den Bewertungsregeln

            sry, das hab ich vorher nicht hingeschrieben, ähmm...
            was bedeutet das "alt" was du vorher angegeben ahst, ist das mit einer id zu vergleihen oder was?

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. css-menü in verlinkter bilderreihe einfügen

              suit Homepage des Autors
              – Informationen zu den Bewertungsregeln

              sry, das hab ich vorher nicht hingeschrieben, ähmm...
              was bedeutet das "alt" was du vorher angegeben ahst, ist das mit einer id zu vergleihen oder was?

              alt ist der alternativtext für ein bild, wenn es nicht angezeigt werden kann - es ist gem. html 4.01 oder xhtml 1.0 in allen doctypes pflicht

              wenn du aber hintergrundbilder verwendest (wie im zweiten beispiel) benötigst du das attribut nicht

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. css-menü in verlinkter bilderreihe einfügen

                christia3224
                – Informationen zu den Bewertungsregeln

                also,
                ich hab das
                #bildereihe {
                   background: red url(who-we-are-blau_09.gif);
                   display: block;
                   width: 133px;
                   height: 25px;
                   overflow: hidden;
                   text-indent: -999999em;
                }

                ins css style hineingegeben und das

                <li><a id="bilderreihe" href="Who we are.htm"></a></li>

                ins head an der stelle wo vorher das bild war, aber jetzt seh ichs nicht mehr!  jetztist es so als wär es nie da gewesen!

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. css-menü in verlinkter bilderreihe einfügen

                  christian3224
                  – Informationen zu den Bewertungsregeln

                  also,
                  ich hab das
                  #bildereihe {
                     background: red url(who-we-are-blau_09.gif);
                     display: block;
                     width: 133px;
                     height: 25px;
                     overflow: hidden;
                     text-indent: -999999em;
                  }

                  ins css style hineingegeben und das

                  <li><a id="bilderreihe" href="Who we are.htm"></a></li>

                  ins head an der stelle wo vorher das bild war, aber jetzt seh ichs nicht mehr!  jetztist es so als wär es nie da gewesen!

                  ich hab meinen ehler entdect! xD und zwar ich war so blöd und ha den falschen doctype angegebe, jetzt geht es bi af dass das das s übereinandegeordnet ist, ich hätte es jdoch gerne nebeneinander,
                  kannst du das bitte ein wenig zusammenscheibn, das es so passt,
                  1. bild width: 133px 2.bild-width: 112px 3-7.bild-width 111px high:25px

                  und ich brauch nur bei dem zweiten bild das sich was ausfährt!

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

          2. css-menü in verlinkter bilderreihe einfügen

            suit Homepage des Autors
            – Informationen zu den Bewertungsregeln

            xD, ich hab schon das 3.te mal neu angefangen, als vorlage hab ich immer <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=diese Erläutrerung> verwendet. aber alles daraus hab ich nicht verstanden!

            das ganze sind eben nur beispiele und da selfhtml historisch gewachsen ist, sind diese nicht immer so optimal wie sie heutzutage sein sollten ;)

            diese navigationsgeschichte verlangt ein bisschen grundwissen über css  ;) das solltest du dir vorher aneignen - also schön langsam, das wird schon

            nimm das grundgerüst und packe dort deine navigationsliste rein - sagen wir 3 menupunkte mit jeweils 2 oder 3 untermenupunkten (je nachdem wie du das willst)

            wie mach ich das genau, bevor ich noch ein paar fehler mache?!

            so: http://de.selfhtml.org/css/formate/einbinden.htm#separat

            das eingebundene css-file - zb so eingebeunden
            <link rel="stylesheet" type="text/css" href="screen.css" media="screen">

            lässt du vorerst leer - dann stellst du deine seite zum testen online auf einem webserver und jagst das ganze durch dein validator - wenn dein code gültig ist, kannst du mit dem css-teil weiter machen (vorher hats äusserst wenig sinn)

            also zusammenfassung:

            • html dokument erstellen mit so wenig code wie möglich
            • css datei einbinden und diese vorerst leer lassen
            • hochladen auf einen webserver zum testen
            • validator über html-seite drüberjagen
            • ggf fehler im code beseitigen
            • erst jetzt mit dem css für die liste beginnen
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

    2. css-menü in verlinkter bilderreihe einfügen

      Gernot Back
      – Informationen zu den Bewertungsregeln

      Hallo suit,

      verwende bitte links und gebe diesen hintergrundbilder

      Davon ist mit Rücksicht auf den IE6 und die Versionen darunter eher abzuraten, wenn man nicht will, dass die Hintergrundbilder je nach Cache-Einstellung im Browser flackern!

      http://forum.de.selfhtml.org/archiv/2005/9/t114566/#m730707

      Da würde ich eher in Kauf nehmen, dass der Hover-Effekt bei Nicht-Links nur mit Javascript-Unterstützung (behavior, HTC-Datei) läuft.

      Gruß Gernot

      --
      super me
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. css-menü in verlinkter bilderreihe einfügen

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Davon ist mit Rücksicht auf den IE6 und die Versionen darunter eher abzuraten, wenn man nicht will, dass die Hintergrundbilder je nach Cache-Einstellung im Browser flackern!

        mit dieser technik flackern die bilder nicht:
        http://www.wellstyled.com/css-nopreload-rollovers.html

        wenn man hingegen die bilder gegen völlig andere bilder tauscht und nicht mit dem verschiebe-trick arbeitet, flackern sie - das stimmt

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln