Link-Formate in Navigationsleiste

[Gast] Foren Web allgemein HTML und CSS / Stylesheets Link-Formate in Navigationsleiste

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

1 2

ganesh

Beiträge gesamt: 1981

17. Sep 2006, 10:37
Beitrag # 16 von 19
Beitrag ID: #251262
Bewertung:
(24504 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hier noch ein kleines Demo

als Antwort auf: [#251261]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

22. Sep 2006, 20:05
Beitrag # 17 von 19
Beitrag ID: #252708
Bewertung:
(24482 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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]

Link-Formate in Navigationsleiste

Klaus aus MG

Beiträge gesamt: 121

2. Jan 2007, 20:03
Beitrag # 18 von 19
Beitrag ID: #268856
Bewertung:
(24430 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#251261]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

17. Jan 2007, 23:05
Beitrag # 19 von 19
Beitrag ID: #271218
Bewertung:
(24384 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

Aktuell

PDF / Print

MadeToTag mit neuer Vorgaben-Funktion und umfangreichen Verbesserungen

| 04.04.2024

Weitere Events

Neuste Foreneinträge

Mein Tagesausflug ins Land CorelDraw

App Store: zu viele Sprachen werden aufgelistet

Eizo Monitorkalibrierung auf Windows

Fußnoten zu Endnoten konvertieren

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

Platzierte Vektorgrafiken skalieren

SMS ab Server senden? Wie geht das?

WebShare Verzeichnisse im SharePoint erstellen

Buchsrabensteuerung

Klickbare Links zu Seiten in einem Buch aus extern erzeugtem Index erstellen

Weitere Stellenangebote