Link-Formate in Navigationsleiste

Lesezeichen \| Suche \| Benutzerliste \| FAQ \| Mitgliedschaft \| Registrieren \| Einloggen
Gast

Forum: HTML und CSS / Stylesheets

Forenindex » Web allgemein » HTML und CSS / Stylesheets » Link-Formate in Navigationsleiste

« « 1 2 » »

ganesh M
Beiträge: 1914

17. Sep 2006, 10:37

Beitrag #16 von 19
Beitrag ID: #251262

Bewertung:

(6795 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

Hier noch ein kleines Demo

als Antwort auf: [#251261]

Sero
Beiträge: 143

22. Sep 2006, 20:05

Beitrag #17 von 19
Beitrag ID: #252708

Bewertung:

(6773 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

Link-Formate in Navigationsleiste

Hallo Ganesh,

vielen Dank für deinen Tip. Funktioniert echt super und ist eine ganz einfache und super lösung.
Hier mein ein auszug von meinem skript: ...ich hoffe es findet nachahmer ;-)

Html

Code

... 
<body id="projects"> 
... 
<!--#include virtual="subnav_projects_general.html"-->  
.... 
</body>

externe Navigation

Code

<div id="bl_nav1"> 
<a id="nav_main1" class="nav_main" href="http://www.hirsts.co.uk" target="_top">home</a> 
<a id="nav_main4" class="nav_main" href="html/general_projects.shtml" target="_top">projects</a></div>

CSS

Code

a.nav_main { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
color:#FFFFFF; 
font-weight:bold; 
text-decoration:none; 
} 
 
a.nav_main:hover { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
color:#CC0000; 
font-weight:bold; 
text-decoration:none; 
} 
#home #bl_nav1 #nav_main1 {color:#CC0000;} 
#home #bl_nav1 #nav_main1:hover {color:#FFFFFF;} 
 
#projects #bl_nav1 #nav_main4 {color:#CC0000;} 
#projects #bl_nav1 #nav_main4:hover {color:#FFFFFF;}

Gruß Sero

als Antwort auf: [#251261]

Klaus aus MG

Beiträge: 121

2. Jan 2007, 20:03

Beitrag #18 von 19
Beitrag ID: #268856

Bewertung:

(6721 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

Link-Formate in Navigationsleiste

Hi ganesh,
erstmal ein frohes neues Jahr !
Ich habe mir deine CSS-only Lösung angeschaut weis aber leider nicht wie ich sie für meine Navigation umsetzen kann.
Ich frage mich, wie komme ich an die Nr. des Navigationsitems ?
Ich habe meine CSS-Navigation über ul und li realisert:

Code

#RMenue   { visibility: visible; position: absolute; top: 0; left: 76px; width: 400px; height: 50px } 
#RMenue a { display: block; float: left; height: 24px; margin-right: 20px; padding-left: 10px; padding-right: 10px; padding-top: 6px; 
			text-decoration: none; color: white;	} 
#RMenue ul { font-size: 0.9em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; list-style: none; margin: 0; padding: 0; height: 30px } 
#RMenue ul li { display: inline;} 
#RMenue ul li a { display: block; float: left; height: 24px; margin-right: 20px; padding-left: 10px; padding-right: 10px; padding-top: 6px; 
				  text-decoration: none; color: white;	} 
#RMenue ul li a:hover { color: black; background-color: #CCCCCC; border-top: 2px solid black; height: 22px; padding-top: 4px;} 
#RMenue ul li a:hover, 
#RMenue ul li a.menue_aktiv { } 
#RMenueRe  { visibility: visible; position: absolute; top: 0; left: 550px; width: 350px; height: 50px }

Zu besichtigen ist die Umsetzung unter:
http://www.singlemaltseite.de/impressum_fl.php

Kannst Du mir da vielleicht weiterhelfen - ich dachte an einen Tip den auch ich, als Newby, verstehe ?

Gruß
Klaus
http://www.whiskytown.eu
http://www.klausiki.de
http://www.bmw-stammtisch-mg.de

als Antwort auf: [#251261]

Sero
Beiträge: 143

17. Jan 2007, 23:05

Beitrag #19 von 19
Beitrag ID: #271218

Bewertung:

(6675 mal gelesen)
URL zum Beitrag

Beitrag als Lesezeichen

Link-Formate in Navigationsleiste

Hallo Klaus,

ein nachträglich frohes Jahr auch an dich...habe erst jetzt deine Anfrage gelesen und ich will versuchen dir zu helfen.
Deine Seite war mir ja gleich sympatisch...naja da gehts um schottischen Whisky und ich wohne zufälligerweise in Glasgow.
Zum Thema:
Dies ist ein Beispiel für eine horizontale Listennavigation (html)

Code

<div id="bl_main_nav"> 
<ul> 
<li><a id="main_nav1" href="home" target="_top">home</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav2" href="general_person.shtml" target="_top">person</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav3" href="general_skills.shtml" target="_top">skills</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav4" href="general_projects.shtml" target="_top">projects</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav5" href="general_contact.shtml" target="_top">contact</a></li> 
</ul> 
</div>

hier ist die dazugehörige CSS

Code

#bl_main_nav ul { 
width:600px; 
line-height:20px; 
margin:0px; 
padding:0px; 
list-style-type:none; 
letter-spacing:1px; 
} 
 
#bl_main_nav li { 
margin:0px; 
padding:0px; 
text-align:center; 
float:left; 
border:0px solid #000000; 
} 
 
li.spacer { 
margin:0px; 
padding:0px; 
width:2px; 
float:left; 
border:0px solid #000000; 
} 
 
#bl_main_nav a { 
color:#FFFFFF; 
font-weight:bold; 
display:block; 
height:18px; 
width:100px; 
padding-top:0px; 
background:#BAB590; 
text-decoration:none; 
border:1px solid #BAB590; 
} 
#bl_main_nav a:hover { 
color:#990000; 
background:#FFFFFF; 
border:1px solid #990000; 
} 
 
#home #bl_main_nav #main_nav1 {color:#990000;background:#BAB590;border: 1px solid #BAB590;} 
#home #bl_main_nav #main_nav1:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;} 
 
#person #bl_main_nav #main_nav2 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;} 
#person #bl_main_nav #main_nav2:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;} 
 
#skills #bl_main_nav #main_nav3 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;} 
#skills #bl_main_nav #main_nav3:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;} 
 
#projects #bl_main_nav #main_nav4 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;} 
#projects #bl_main_nav #main_nav4:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;} 
 
#contact #bl_main_nav #main_nav5 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;} 
#contact #bl_main_nav #main_nav5:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}

die unteren Zeilen der CSS definieren den jeweiligen aktiven link.
die struktur ergibt sich folgendermaßen:
#home ...Body ID
#bl_main_nav ...Div Körper ID
#main_nav1 ...Link ID

Die ID deines Bodys muss dabei variieren, damit der aktive Linkzustand auf der jeweiligen Seite angezeigt wird.

Ich hoffe mein Beispiel hilft dir weiter.
Gruß aus dem veregneten Galsgow
Sebastian

als Antwort auf: [#268856]

« « 1 2 » »

Forenindex » Web allgemein » HTML und CSS / Stylesheets » Link-Formate in Navigationsleiste


Foren \| Tutorials \| Jobs \| Online-Videos \| HDS-Service \| Richtlinien \| Impressum