Gå til innhold

CSS meny som viser "her er du" og editable regions

JoMs

Av JoMs
i Programmering og webutvikling

Anbefalte innlegg

JoMs

JoMs

Skrevet
Skrevet

Hei!

 

Jeg jobber på en nettside, og for å gjøre dette mye kjappere har jeg laget et HTML-template som alle sidene på nettsiden baserer seg på. Et HTML-template inneholder da som kjent editable regions, noe som kan være et rot å administrere.

 

Problemet nå er at jeg vil at menyen jeg bruker skal vise "her er du". Dvs, om du går på "FAQ" f.eks skal FAQ-knappen på menyen ha en viss farge. Som da indikerer at du er på FAQ-siden.

 

Men for å få gjort dette må jeg legge inn en "id" i hver body-tag. Siden jeg ikke har funnet en lur måte å få dette til å gå automatisk tenkte jeg det da kunne være lurt å legge en editable region rundt body-taggen. Noe det over hodet ikke var. Det som da skjer er da at ingenting vises på siden.

 

Noen som har en idè om hvordan jeg kan endre body-taggen og fremdeles beholde templatet?

 

-JoMs

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
JoMs

JoMs

Skrevet
  • Forfatter
Skrevet

Leste en liten tutorial på det, og der skulle body-taggen være f.eks <body id="home">

 

Det går for så vidt ann, men da blir menyen en editable region, og jeg kan da ikke legge til nye knapper i menyen med HTML-templaten.

 

-JoMs

Lenke til kommentar
FuLu

FuLu

Skrevet
Skrevet

Er det i utgangspunktet statiske sider du skal legge ut men hvor du bruker templates lokalt i en editor?

 

Eneste tips jeg har er (hvis du på en eller annen måte klarer å endre body):

 

...
<body class="faq">
...
<ul id="meny">
<li class="hjem"><a href="url">Hjem</a></li>
<li class="faq"><a href="url">FAQ</a></li>
</ul>

 

CSS:

body.faq #meny li.faq { background: #f00; }

 

Hvis du bruker templates for å generere en statisk side, så kunne du laget en header-faq.html hvor du har samme <html> <meta> <body> data øverst i fila lik den generelle header.html, men hvor du endrer body class="faq" f.eks. Så, når noen klikker på faq i menyen, så vil den statiske siden (ut fra hvordan templates ble satt sammen) kunne ha forskjellige body classes. Men det vil kreve at du må kopiere og lime inn samme endringene fra header.html inn i alle header-<subpage>.html filene og endre body class i alle subpage filene.

 

Håper jeg ikke tok feil nå :D

Lenke til kommentar
JoMs

JoMs

Skrevet
  • Forfatter
Skrevet (endret)

Var noe av det der jeg prøvde å unngå ved å brukte template ;) Når jeg f.eks finner ut at jeg må ha en kontakt-side så må jeg da legge til kontakt-siden i menyen på alle undersidene. Men for å få en highlight av "aktiv side" må hver body-tag inneholde en unik class/id.

 

Kjører alt i editor, men de kommer ut som statiske sider ja.

Er nesten samme som du viser med menykoden din. Bare at jeg bruker

<td width="163"><div id="list-menu"><ul>
<li><a href="lan">Forsiden</a></li>
<li><a href="creative.html">Info om kreative compoer</a></li>
<li><a href="location.html">Når og hvor?</a></li>
</ul>

(ikke helt sånn, men var for å ikke legge ut hele URL'en enda).

 

Jeg prøvde å legge en div-tag rundt med id i stede for å legge det i body-taggen. Men kan ikke påstå at det fungerte som det skulle. Grunnen til dette kan være at jeg rett og slett brukte feil CSS-kode.

 

Da brukte jeg 

<div id="faq">
<td width="163"><div id="list-menu"><ul>
<li><a href="http://skriveleif.com/lan">Forsiden</a></li>
<li><a href="http://skriveleif.com/lan/creative.html">Info om kreative compoer</a></li>
<li><a href="http://skriveleif.com/lan/location.html">Når og hvor?</a></li>
<li><a href="http://skriveleif.com/lan/kontakt.html">Kontakt</a></li>
<li><a href="http://skriveleif.com/lan/faq.html">F.A.Q</a></li>
</ul>
</div>
</td>
</div>

 

Hvordan skal da CSS-en se ut tro?

Endret av JoMs
Lenke til kommentar
FuLu

FuLu

Skrevet
Skrevet (endret)

Selv om du pakker inn menyen inni en DIV med id=faq, så må du fortsatt vite hvem av de LI elementene under som skal være "aktiv". Derfor kan det være lurt å gi alle LI'ene et klassenavn. At du flyttet id/class valget fra BODY til en DIV, forflyttet bare problemet :D

 

Et alternativ for deg, om serveren har støtte for det: Server Side Include

 

Da kunne du laget en meny for hver side hvor du endrer f.eks LI'en til FAQ til å ha class="aktiv". Men da må du ha en menyfil for hver side.

Endret av FuLu
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...