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

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Web allgemein
Themen
Beiträge
Moderatoren
Letzter Beitrag
HTML und CSS / Stylesheets
1193
6413
FSt
19. Dez 2022, 21:28
Vitus
 

Link-Formate in Navigationsleiste

ganesh
Beiträge gesamt: 1981
17. Sep 2006, 10:37
Beitrag # 16 von 19
Beitrag ID: #251262
Bewertung:
(24503 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hier noch ein kleines Demo

als Antwort auf: [#251261]
X

Link-Formate in Navigationsleiste

Sero
Beiträge gesamt: 143
22. Sep 2006, 20:05
Beitrag # 17 von 19
Beitrag ID: #252708
Bewertung:
(24481 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:
(24429 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:
(24383 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]
X

Aktuell

Diverses
axaio veröffentlicht neue MadeToTag-Version 2.9.126

| 12.09.2023

300x300_05_2023

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
17.04.2024
Und es geht doch: Automatisierung im Großformatdruck!

Online
Mittwoch, 17. Apr. 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Ja

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!
Weitere Events

Neuste Foreneinträge


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

Gleiche Ebene mit untersch. Fonts in Text + autom. IHVZ: Probleme mit Kursivierung

Javascript zur Kursivierung von Klammern mit Variabler
medienjobs
Weitere Stellenangebote