16. oktober 2003 - 19:09Der er
14 kommentarer og 1 løsning
Ext. CCS til navigation
Er det muligt at få vejledning til at forstå hvordan man bruger ext. CSS nedenfor. Det skulle kunne bruges til et menusystem, problemet ligger måske i den sidste del, som jeg egnetlig ikke rigtig forstår:
du laver et eksternt stylesheet med <link rel="stylesheet" href="filnavn.css" type="text/css"> og så gemmer alt ovenstående css i en fil som hedder filnavn.css
Eller er spørgsmålet hvad det nederste gør eller hvad???
skovenborg > jeg har styr på det med link, eks. <link rel="stylesheet" href="filnavn.css" type="text/css"> Det er de mere avanserede CSS, som jeg ikke helst kan gennemskue. Det sidste i eksemplet: }
/* ----- now highlight active tab based on body @class attribute ----- */
body.homeindex #nav li#home_index a, body.genindex #nav li#gen_index a, body.cssindex #nav li#css_index a, body.designindex #nav li#design_index a, body.jsindex #nav li#js_index a, body.navindex #nav li#nav_index a, body.dhtmlindex #nav li#dhtml_index a { background-color: #efefef; color: #1a0099; } /**** Fremhævning af accesskey bogstav ***/ body.homeindex #nav li#home_index a em, body.genindex #nav li#gen_index a em, body.cssindex #nav li#css_index a em, body.designindex #nav li#design_index a em, body.jsindex #nav li#js_index a em, body.navindex #nav li#nav_index a em, body.dhtmlindex #nav li#dhtml_index a em { background-color: #efefef; color: #00f; }
Nå okay. Hvis vi tager et eksempel med: body.homeindex #nav li#home_index a betyder det at den henviser til links i et body-tag med en class som hedder "homeindex", der indeholder et element med id'en "nav", som igen har et <li>-element med id'en "home_index".
Hver af disse "sætninger" er adskilt af kommaer, som så henviser til det samme stylesheet (den med background-color og color). Det vil sige at stylesheet'et også gælder for body.genindex #nav li#gen_index a osv.
Den næste er sådan set det samme, med det gælder bare for alle <em>-tags.
# bruges i sammenhæng med id-attributten, som kan bruges til så godt som alle html-tags. Typisk bruger man den på <div>-elementer, men du kan også bruge den på fx en liste eller andre tags.
For at bruge id'er skal du skrive: <div id="banner">
--herefter kan du referere til den i dit stylesheet, som du før skriver: #banner { background-color: #369; color: #ffffff; }
Hvis du derimod skriver div#navpanel virker den kun ved de div'er som har id'en navpanel.
Husk dog lige at id'er bør være unikke for alle elementer, dvs. du skal ikke have to <div>-tags med en id som hedder "banner". Her bør du bruge en class - det virker fuldstændig på samme måde.
takker > skovenborg Jeg forsøger at få styr på en menu, som på: http://www.webdesign101.dk/ Har købt en bog som refererer til webstedet I menu'en er eks. Home Generelt Design
I body-tagget er der kun <body class="homeindex"> Jeg kan ikke se hvad det refererer til - har du en forklaring :) Og i koden kan jeg ikke se noget med: Home Generelt Design
Det hele virker måske omfattende, men det som jeg er mest interiseret i er at få en menu med faneblade at virke, noget i stil med den på: http://www.webdesign101.dk/
I koden laver de menuen længere nede, men man kan bare ikke søge efter fx "Home" da de har splittet forbogstavet og resten op i to: <ul> <li id="home_index"><a title="Retur til forsiden" accesskey="h" href="/index.php"><em>H</em>ome</a></li> <li id="gen_index"><a title="Generelle artikler og noter, kursusweb, personlige" accesskey="g" href="/gen/index.php"><em>G</em>enerelt</a></li> <li id="design_index"><a title="Artikler om websidedesign" accesskey="e" href="/design/index.php">D<em>e</em>sign</a></li> <li id="css_index"><a title="Artikler om stylesheets (CSS)" accesskey="c" href="/xhtml/css/index.php"><em>C</em>SS</a></li>
<li id="js_index"><a title="JavaScript artikler" accesskey="j" href="/javascript/index.php"><em>J</em>avaScript</a></li> <li id="nav_index"><a title="Navigations- og menusystemer" accesskey="n" href="/navigation/index.php"><em>N</em>avigation</a></li> <li id="dhtml_index"><a title="Artikler om dynamisk HTML" accesskey="d" href="/xhtml/dhtml/index.php"><em>D</em>HTML</a></li> <li id="lilleskrift"><a title="Vis med en mindre skrift" accesskey="l" href="java script:chooseStyle(1)"><em>L</em></a></li> <li id="mediumskrift"><a title="Vis med en medium skrift" accesskey="m" href="java script:chooseStyle(0)"><em>M</em></a></li>
<li id="storskrift"><a title="Vis med en større skrift" accesskey="s" href="java script:chooseStyle(2)"><em>S</em></a></li> <li id="textonly"><a title="Vis kun tekst" accesskey="t" href="java script:chooseStyle(3)"><em>T</em>ekst</a></li>
som du kan se har alle listerne en id som hedder fx "home_index" og det passer med body.homeindex #nav li#home_index a da listerne er inde i et div-element: <div id="nav"> Men hvorfor de gør det med body-elementet ved jeg ikke, og i grunden behøver du det ikke. Du kan sagtens skrive: #nav li#home_index a og det vil gøre det samme.
neej, vent nu har jeg forstået det. Det stylesheet du har fat i der er det som gør at den side du er inde på får en grå baggrundsfarve (altså oppe i menuen).
Hvis du fx går ind på css-siden, så ser du at der i koden står: <body class="cssindex">
Så det pågældende css er udelukkende vise hvad for en side du er inde på i menuen :-)
nå, der var jeg for langsom ;-) Det må du undskylde...
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.