Tutorial HTML, CSS u. PHP - Forum

[Peter1978]

folgend eine function welche die "a" tags des dokumentes nach einer zeichenkette im attribut class durchsucht um nur diesem element ein anderes voran zustellen

Code: Alles auswählen

   
function menu()
{
  var linksArray = document.getElementsByTagName('a');
 
  for(var i=0; i<linksArray.length; i++)
  {
    var link = linksArray[i];
   
    var className = link.className;
   
    if(className.indexOf("current") != -1)
      {
        var parent = link.parentNode;
       
       
        var divElement = document.createElement("p");
        divElement.setAttribute("class", "littleLinkBox");
        parent.insertBefore(divElement, link);
       
      }
  }
}

einem link soll ein farbiger balken vorangestellt werden
arbeite mit dem cms "jimdo" welches dem aktiven link ein "current" in das attribut class einfügt
mit dem balken zeige ich dem user wo er ist

Bild 1.png (9.2 KiB) 215-mal betrachtet

ff und ie8 zeigen es so wie in meinem kopf gedacht^^
ie7 leider nicht

zu umständlich?
holzweg?
oder einfach ie^^

bin für alles offen

gruß

[lauras]

Wie wäre es mit einem einfachen Hintergrundbild? Das kann man ja ein Stück rausschieben, sodass es passt

[Peter1978]

meinst du im erstellten tag oder im "a" tag?

[Sören]

im "a"-Tag.
Dann brauchst du das JavaScript gar nicht mehr, weil du dann alles über CSS regeln kannst.

[Peter1978]

jup genau ^^

ist schon viel besser


CSS:

Code: Alles auswählen

a:hover {
    background: url(pic.gif) no-repeat left;
    padding-left: 30px;
}

a.current {
    background: url(pic.gif) no-repeat left;
    padding-left: 30px;
}



ist ja genau das was ich dachte ^.^

vielen dank das ihr mich auf den boden der tatsachen zurückgeholt habt *gg*

nun ist das ja das dann nat. auch um 30px eingerückt

wenn ich das mit

Code: Alles auswählen

margin-left: -30px;

ausgleichen will nimmt das der ff, der ie7 streikt wieder

habt ihr dazu vll eine idee

gruß

[Sarkkan]

Versuch mal overflow: visible; und verschiebe lieber den Hintergrund (background-position).
Ansonsten rücke die Listenpunkte / Texte ein^^

[Peter1978]

Code: Alles auswählen

a {
    margin-left: -10px;
    padding-left: 30px;
}

.current,
a:hover {
    background: url(pic.gif) 0px 50% no-repeat; 
}


overflow: visible interessiert den ie7 hier nicht - wird abgeschnitten sobald ausserhalb body ):
aus diesem grund:

Code: Alles auswählen

div.umNavHerum {
    padding: 0 10px;
}

was ich noch nicht verstehe:
auf jeder seite steht was von negativen werten bei 'background-position' - ich verstehe das so:

Code: Alles auswählen

background: url(pic.gif) -10px 50% no-repeat;


oder so

Code: Alles auswählen

background-image: url(pic.gif);
background-position: -10px 50%;
background-repeat: no-repeat;


(sollte ja auch das selbe sein ODER ^^)

klingt schön funktioniert leider weder im ie noch ff


sonst funktioniert es sehr gut
schlank und rank ^^
danckschön für die stuppser (:

gruß

[Sarkkan]

Also ich habe auch schon gefühlte 200.000.000 mal negative Positionierung von Hintergrundbildern angewandt..^^
Ich weiß nur nicht, ob das mit deinem 50% geht Versuch es mal mit center

[Peter1978]

sory mann da musste ich einfach lachen
aber nicht wie man vll denkt über dich, sondern des absurden wegen

negativ muss ich falsch geschrieben haben ^^
und 50% geht super


gruß