Avatar billede tirra Nybegynder
16. oktober 2003 - 19:09 Der 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:


/*** Stylesheet navigationsbjælke med faneblade. ***/
#banner {
  background-color: #369;
  color: #ffffff;
}

#banner h1 {
font-size:1.3em;
  font-family: verdana, arial,sans-serif;
  padding-left: 5px;
  padding-bottom:1em;
  padding-top:.5em;
}
div#navpanel {
width:100%;
position:absolute;
left:0px;
top:0;
height:40px;

}
#nav ul {
  display: block;
  list-style: none outside;
  padding: 0 0 0 10px;
  margin: 0 0 0 10px;
  font-family: Verdana, sans-serif;
  font-size: 80%; 
  border-left:1px solid black;
}

#nav li {
  padding: 0;
  margin: 0 4px 0 0;
  border-top: 1px solid #efefef;
  border-right: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  background-color: #369;
  color: #ffffff;
  font-weight: bold;
  /* the next 4 lines are magic */
  display: block;
  float: left;
  position: relative;
  top: -1.3em;
}

#nav a:link,
#nav a:visited {
  background-color: #369;
  color: #ffffff;
  text-decoration: none;
  padding-left: .5em;
  padding-right: .5em;
}
/**** Fremhævning af accesskey bogstav ***/
#nav a:link em,
#nav a:visited em {
color: aqua;
text-decoration:underline;
font-style:normal;
}
#nav a:hover {
  background-color: #efefef;
  color: #000066;
}
/**** Fremhævning af accesskey bogstav ***/
#nav a:hover em {
  background-color: #efefef;
  color: #0000ff;
}
#navclear {
  display: none;
}
html>body #navclear {
  display: block;
  clear: both;
}
 
/* ----- 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;
}
Avatar billede skovenborg Nybegynder
16. oktober 2003 - 22:08 #1
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???
Avatar billede tirra Nybegynder
17. oktober 2003 - 20:33 #2
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;
}
Avatar billede tirra Nybegynder
17. oktober 2003 - 20:34 #3
Jeg gir gerne nogen flere poeng
Avatar billede skovenborg Nybegynder
17. oktober 2003 - 21:07 #4
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".

Eksempel:
<body class="homeindex">
<div id="nav"><li id="home_index"><a href="#">LINK</a></div>
</body>

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.
Avatar billede tirra Nybegynder
17. oktober 2003 - 23:50 #5
skovenborg > takker

Jeg har hidtil ikke brugt tegnet # i mine CSS, og ved i grunden ikke hvordan man i koden refererer til dem, - er det med DIV ?

<div "banner"> eller noget i den retning

Tænker eks. på dem her:
#banner {
  background-color: #369;
  color: #ffffff;
}

#banner h1 {
font-size:1.3em;
  font-family: verdana, arial,sans-serif;
  padding-left: 5px;
  padding-bottom:1em;
  padding-top:.5em;
}
div#navpanel {
width:100%;
position:absolute;
left:0px;
top:0;
height:40px;

}
#nav ul {
  display: block;
  list-style: none outside;
  padding: 0 0 0 10px;
  margin: 0 0 0 10px;
  font-family: Verdana, sans-serif;
  font-size: 80%; 
  border-left:1px solid black;
}
Avatar billede skovenborg Nybegynder
18. oktober 2003 - 00:01 #6
# 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.
Avatar billede tirra Nybegynder
18. oktober 2003 - 01:32 #7
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/
Avatar billede tirra Nybegynder
18. oktober 2003 - 01:52 #8
Kan tilføje, at man med højreklik på menuen under: Egenskaber under type står:
PhotoParade Album

?:)
Avatar billede skovenborg Nybegynder
18. oktober 2003 - 12:55 #9
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&oslash;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>

  </ul>
Avatar billede skovenborg Nybegynder
18. oktober 2003 - 13:02 #10
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.
Avatar billede skovenborg Nybegynder
18. oktober 2003 - 13:10 #11
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 :-)
Avatar billede tirra Nybegynder
18. oktober 2003 - 14:55 #12
Jeg må indrømme, at det her blev mere end forventet, vender tilbage :)
Avatar billede tirra Nybegynder
08. november 2003 - 20:31 #13
Ved ikke rigtig - jeg har i grunden ikke fået nogen svar, så .. poeng ???
Avatar billede tirra Nybegynder
18. november 2003 - 02:55 #14
fik desværre ikke noget svar
Avatar billede skovenborg Nybegynder
18. november 2003 - 16:14 #15
nå, der var jeg for langsom ;-) Det må du undskylde...
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester