[GastForen Web allgemein HTML und CSS / Stylesheets Link-Formate in Navigationsleiste

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Link-Formate in Navigationsleiste

ganesh
Beiträge gesamt: 1981

17. Sep 2006, 08:37
Beitrag # 16 von 19
Beitrag ID: #251262
Bewertung:
(22355 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, 18:05
Beitrag # 17 von 19
Beitrag ID: #252708
Bewertung:
(22333 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, 19:03
Beitrag # 18 von 19
Beitrag ID: #268856
Bewertung:
(22281 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
http://www.whiskytown.eu
http://www.klausiki.de
http://www.bmw-stammtisch-mg.de


als Antwort auf: [#251261]

Link-Formate in Navigationsleiste

Sero
Beiträge gesamt: 143

17. Jan 2007, 22:05
Beitrag # 19 von 19
Beitrag ID: #271218
Bewertung:
(22235 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

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
05.11.2021 - 10.12.2021

Digicomp Academy AG, Zürich
Freitag, 05. Nov. 2021, 13.00 Uhr - Freitag, 10. Dez. 2021, 19.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: 3'250.– zzgl. 7.7% MWST
Dauer: 8.5 Tage (ca. 56 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB

Veranstaltungen
14.02.2022

Zürich, Online
Montag, 14. Feb. 2022, 07.30 - 18.00 Uhr

Word Press / Digitalisierung / Selbständigkeit

Digitalisierung und KMU's in der Schweiz Leistungsfähig im Zeitalter der Digitalisierung Machine Learning Künstliche Intelligenz CRM Change Management Kommunikation im Betrieb Kommunikation digitale Medien Digitale Vertriebsmodelle

Ja

Organisator: B. Isik

Kontaktinformation: B. Isik / Daniela Lovric, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/website-mit-wix-erstellen/