Navigationsleiste - Abtrennung zw. Wörtern und Unterstreichen beim anklicken

[MDNoob]

Hey Leute!

Hab mal wieder ein kleines Problem bei der Optimierung meiner Seite (MD Fitness Solutions) , um genau zu sein sind es sogar zwei Probleme:

1. Bei dem Design meiner Seite war vorgesehen das zwischen den einzelnen menuepunkten ein kleiner weißer strich ist der die einzelnen Wörter voneinander trennt. Wie bekomm ich den da hin?

2.Außerdem sollten die Menuepunkte von einem einfachen grauen Balken unterstrichen werden wenn man sie anklickt... werden sie aber (noch) nicht wie man sieht.

Für möglichst einfache Lösungsvorschläge wäre ich euch dankbar, mein Name ist leider Programm :?

 

[koslowski]

Hi,

Für Linkunterstreichungen wenn sie angeklickt werden(a:active) gibt es die Möglichkeit:

a:active  {
   border-bottom:1px solid grey;
   }

Die Alternative zu text-decoration:underline; wo die Linie ja in der Farbe des Links ist. So kannst du beliebige Farben für die Linie nehmen.

Mit dem kleinen weißen Strich kann ich dir leider nicht helfen, im Tabellenlayout kenn ich mich nicht aus.
Hätte nur eine Lösung für <div>-Layout anzubieten.

 

[MDNoob]

wenn ich das somache wird aber wahrscheinlich das wort selbst in den der Navi direkt unterstrichen. Ich möchte aber das der Balken in dem weißen Bereich unter der Navi ist. Mein Programmierer (der mich leider verlassen hat :-( ) meinte man könnte das mit einer tabelle machen?! oder indem man den balken einfach als bild einfügt aber da weis ich nicht wie ich es hinbekomm das er dann genau unter dem wort ist...

 

[MDNoob]

Hi,

Für Linkunterstreichungen wenn sie angeklickt werden(a:active) gibt es die Möglichkeit:

a:active  {
   border-bottom:1px solid grey;
   }

Die Alternative zu text-decoration:underline; wo die Linie ja in der Farbe des Links ist. So kannst du beliebige Farben für die Linie nehmen.

Mit dem kleinen weißen Strich kann ich dir leider nicht helfen, im Tabellenlayout kenn ich mich nicht aus.
Hätte nur eine Lösung für <div>-Layout anzubieten.

Wo muss ich den code denn einfügen? direkt vor dem link, vor der tabelle? ich möchte das ja nur für mein navigationsmenue haben und nicht für alle links... hab bei selfHTML nur was gefunden bei dem man es oben in den head eingeben muss las pseudoklasse?!

 

[koslowski]

Hi,

sorry bei Tabellenlayouts kenne ich mich wie schon gesagt nicht so gut aus.
Da möchte ich auch nix falsches sagen.

Ich bin aber sicher das es hier im Forum eine ganze Reihe Leute gibt die das Problem bewältigen könnten.;)

Gruß
koslowski

 

[HTMLehrling]

schreib

<style type="text/css">
a.navi {
	text-decoration:none;
	color:#FFFFFF;
	font-weight:bolder;
}
a.navi:hover {
	text-decoration:underline;
}
</style>

in den header, lösch die styleangabe deiner a tags und schreib stattdessen

<a href="Vorteile.html" class="navi">VORTEILE</a>

oder wenn du eine andere farbe willst musst du koslowskis idee bei ...:hover... einbauen

 

[HTMLehrling]

die linien könntest du auch mit css lösen. EDIT: (also die zwischenstriche)

SELFHTML: Stylesheets / CSS-Eigenschaften / Rahmen

könnte dich dabei unterstützen

 

[Körnerbrötchen]

@HTMLehrling: Bitte "ändern"-Button nutzen.

So nebenbei weils mir gerade aufgefallen ist. Das Impressum der Seite ist so nicht vollständig. Hier fehlen div Dinge. Bitte entsprechend ändern!

 

[HTMLehrling]

@körnchenbrot: was erwartest du genau von mir?

 

[MDNoob]

schreib

<style type="text/css">
a.navi {
	text-decoration:none;
	color:#FFFFFF;
	font-weight:bolder;
}
a.navi:hover {
	text-decoration:underline;
}
</style>

in den header, lösch die styleangabe deiner a tags und schreib stattdessen

<a href="Vorteile.html" class="navi">VORTEILE</a>

oder wenn du eine andere farbe willst musst du koslowskis idee bei ...:hover... einbauen

Hey,

hab das mit den Strichen mal auf test.mdtraining.at ausprobiert, sieht besser aus wie vorher aber ist leider nicht was ich gemeint hab.
Ich möchte, dass unter dem Navi (also nicht in dem orangenen Bereich) ein dicker grauer balken unter dem wort erscheint das man anklickt. Hast du dazu vielleicht ne Idee?

Hab die selfHTML seite angeschaut, hab aber leider nichts gefunden wie ich die striche machen kann?! Für weitere Vorschläge bin ich wie immer dankbar...

 

[HTMLehrling]

ok
dann würde ich deine tabelle um eine zeile erweitern und per javascript den zellenhintergrund der darunterliegenden zelle einfärben

 

[MDNoob]

Ich hab schon von HTML kaum eine Ahnung und du meinst ich bekomm das mit Java hin? ich hab leider noch nie was mit java gemacht :-(

Kannst du mir vielleicht noch einen Tip geben wie ich das mit den Strichen hinbekomme? Hab auf der selfHTML Seite leider nichts dazu gefunden

 

[HTMLehrling]

erweitere deine tab höhe und definier das "randverhalten"

<table style=" height:40px; border-collapse:collapse;">

gib in der ersten tabzeile der ersten zelle eine fixe höhe

<td style="border-right:thin; height:25px;">

schreib das onmouseover und onmouseout ins a tag, wobei der teil in der klammer der id der darunterliegenden zelle entspricht

<a href="personal_training.html" onmouseover="grauerBalken('td1')" onmouseout="weisserBalken('td1')" class="navi">

mach eine zwischenzeile mit tr und x mal td, wobei x für die zellenanzahl der ersten zeile gilt

<td style="background-color:#FFFFFF; height:5px;"></td>

oder eine zelle die sich über die gesamte tabelle streckt

<td colspan="X" style="background-color:#FFFFFF; height:5px;">

und jetzt noch eine 3te zeile einfügen wie die 2te einfach eine id angeben, das js darauf zugreifen kann (für jede zelle ein individuelles td1, td2...)

<td id="td1" style="height:10px; background-color:#FFFFFF;"></td>

und schreib

<script type="text/javascript">
function grauerBalken(wo){
document.getElementById(wo).style.backgroundColor='#777777';
}
function weisserBalken(wo){
document.getElementById(wo).style.backgroundColor='#ffffff';
}

</script>

in den header

Ich hab schon von HTML kaum eine Ahnung und du meinst ich bekomm das mit Java hin? ich hab leider noch nie was mit java gemacht :sad:

das ist nicht java sondern javascript und ich denke, wo ein wille ist ein weg! das forum soll ja dem angehenden profi die möglichkeit geben, sein wissen mit dessen anderer auszutauschen respektiv zu erweitern.

Hab auf der selfHTML Seite leider nichts dazu gefunden

wenn ich "html" google(deutsch) bekomm ich über 15mio bei "javascript" über eine halbe mio einträge.;)

ps: ich denke es könnte so klappen, ist sicher nicht das nonplusultra aber es funzt. vielleicht die ganze stylegeschichte in den header schreiben oderin ein css file auslagern. macht dir das leben einfacher!!

 

[MDNoob]

Vielen Dank erstmal für deine Mühe! Ich werds gleich mal ausprobieren!