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

Videoannonse

Videoannonse
Annonse
Wattengård

Wattengård

Skrevet
Skrevet

Hvorfor skal du endre body-taggen?

 

Lag deg en klasse som heter "aktiv" eller noe slikt som stiler menyvalget slik du ønsker.

På de forskjellige sidene setter du bare deretter klassen til "aktiv" på det aktive menypunktet.

 

-C-

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

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

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
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
JoMs

JoMs

Skrevet
  • Forfatter
Skrevet

Skjønner, så det skal egentlig fungere med å bruke div i stede for body? Brukte egentlig id-er i a href-taggen. Men for å få siden opp igjen og funksjonell måtte jeg endre tilbake kjappt. ;)

JoMs

JoMs

Skrevet
  • Forfatter
Skrevet

Det strider mot alt som heter orden osv. Men var for å sette opp en nettside i all hast, og da med bare basic kunnskaper blir det veldig fort utenfor de normale normer.

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...