Problem med navigasjonsmeny i CSS

[Gammon]

Jeg har brukt Ove Klykkens guide for å lage CSS-navigering på en nettside (se: http://www.domedia.org/oveklykken/css-buttons.php#), men har et problem med å få startsiden til å vises som "active/focused". Når jeg åpner startsiden skal jo den allerede være markert som "active".

 

Hva er det jeg overser her?

 

PS: ja - jeg er nybegynner innenfor dette

 

 

---

Gammon

[Nitrius]

Jeg er nybegynner selv, så skjønner ikke helt hva du prøver å si, men vil bare si takk for linken, det var akkurat det der jeg trengte for å få lagd et navigasjon system på siden min =)

Endret 10. juni 2005 av ToxicMan

[Gammon]

Jeg er nybegynner selv, så skjønner ikke helt hva du prøver å si, men vil bare si takk for linken, det var akkurat det der jeg trengte for å få lagd et navigasjon system på siden min =)

Hehe, ja - selve løsningen er elegant. Kanskje jeg forklarer problemet litt dårlig. Hvis du ser på Oves eksempel så ser du at ingen av valgene er markert som at du er på denne siden; du må trykke på valget før den skifter. Dette er forsåvidt greit, men i praksis, på min side, så skal jo en link allerede være markert, fordi du allerede er inne på "startsiden".

 

Huff, vanskelig å forklare. Tror det er noe amatør jeg overser her. Må prøve å forske litt på hvorfor det er slik.

 

---

Gammon

[Gammon]

Har kommet litt lengere. Det viser seg at hvis man bruker eksemplet til Ove, men setter inn virkelige linker i <a href="#" i stedet for #, så funker det ikke. Ihverfall ikke hos meg.

 

Men hvorfor funker det ikke...? Ingen som har noen forslag?

 

---

Gammon

Endret 10. juni 2005 av Gammon

[Jesper Karsrud]

:active funker ikke uten videre på de sidene du er inne på. Tror nok du må til med et serverside-script for å få dette til å fungere.

[Gammon]

:active funker ikke uten videre på de sidene du er inne på. Tror nok du må til med et serverside-script for å få dette til å fungere.

Akkurat, har du et forslag til hvordan man kan gjøre det?

 

---

Gammon

[Jesper Karsrud]

Kom på en ting.. Du kan jo igrunn lage en klasse da, som er lik :active-staten din, som du så setter på tilsvarende link på de forskjellige sidene.

 

Eksempel:

#menu a:active {
background: #efefef;
color: #ff9900;
text-decoration: none;
}

#menu .active {
background: #efefef;
color: #ff9900;
text-decoration: none;
}

<div id="menu">
<ul>
<li class="active"><a href="index.php">Hjem</a></li> <!-- siden man er inne på -->
<li><a href="#">side 2</a></li>
</ul>
</div>

 

Sånn tenker jeg du kan gjøre det.. Har ikke testet det selv, men det skulle ikke forundre meg om det fungerer sånn det skal

[Gammon]

Kom på en ting.. Du kan jo igrunn lage en klasse da, som er lik :active-staten din, som du så setter på tilsvarende link på de forskjellige sidene.

 

Eksempel:

#menu a:active {
background: #efefef;
color: #ff9900;
text-decoration: none;
}

#menu .active {
background: #efefef;
color: #ff9900;
text-decoration: none;
}

<div id="menu">
<ul>
<li class="active"><a href="index.php">Hjem</a></li> <!-- siden man er inne på -->
<li><a href="#">side 2</a></li>
</ul>
</div>

 

Sånn tenker jeg du kan gjøre det.. Har ikke testet det selv, men det skulle ikke forundre meg om det fungerer sånn det skal

Ja, dette ble litt avansert. Klarte ikke å få det til å fungere. Men har for liten kompetanse på css

 

---

Gammon

[Nitrius]

Noen som kan forklare meg hvordan jeg får til litt mellomrom mellom disse "knappen"?

Har prøvd, men til ingen nytte...

 

 

Edit: Fikk det til ved å putte <p></p> mellom

<p><a href="#" class="button">Hovedside</a></p>

<p></p>

<p><a href="#" class="button">Test 1</a></p>

<p></p>

<p><a href="#" class="button">ABC 2</a></p>

<p></p>

<p><a href="#" class="button">12345 3</a></p>

<p></p>

<p><a href="#" class="button">ooooo 4</a></p>

Er det en annen måte? som jeg også kansje kan bestemme hvor mye mellomrom jeg vil ha?

 

Edit2: Eller skal kansje ikke bruk denne tråden til å gjøre det, da faller jo spørsmålet til Gammon bort, var ikke sånn ment...

 

Men en ting til også... er det mulig å få "knappene" til å holde samma størrelse, altså at alle er like lange selv om det er mindre bokstaver i den ene "knappen"?

Endret 10. juni 2005 av ToxicMan

[Jesper Karsrud]

ÆÆÆÆÆÆÆÆ!!!!!!!! For et syn!?!?! Det der var bare butt-ugly kode. Sorry for at jegf sier det, men det er sannheten.

 

For det første: en meny _skal_ settes opp i liste.

 

Når det er ute av verden, så kan du lage en klasse på knappene med padding.

.meny {
padding: 5px;
}

 

<ul>
<li class="meny"><a href="#">link1</a></li>
<li class="meny"><a href="#">link2</a></li>
</ul>

 

Edit: Ellers anbefaler jeg dere begge å ta en tur til www.htmldog.com, der er det veldig mye nyttig å lære for folk som ikke kan så mye

Endret 10. juni 2005 av Jibril2k

[Gammon]

ToxicMan: Bare bruk tråden min så mye du vil, hehe. Godt å se at noen er på samme stadium som meg med CSS

 

Strever videre med mitt problem, jeg. Har enda ikke fått dette til å funke; men lærer mye underveis

 

---

Gammon

Endret 10. juni 2005 av Gammon

[Nitrius]

Hmmm, vet ikke om det der var til meg eller ikke, men regner med det(Jibril2k)

Skjønner ikke hva du mener med ugly kode? det der var bare et utsnitt av koden som jeg hadde puttet inn i html filen min får at knappene skulle dukke opp, og akkurat da fant jeg bare en måte å lage mellomrom det var med <p></p>

Men sjekke igjennom .css fila mi og tulla litt mer da kommer jeg faktisk over at padding sto der så jeg ordna litt på verdiene der og vips det ble akkurat som jeg ville ha det =)

Så det er ordnet opp.

 

 

Men en ting til også... er det mulig å få "knappene" til å holde samma størrelse, altså at alle er like lange selv om det er mindre bokstaver i den ene "knappen"?

 

Så det eneste spørsmålet fra meg som gjennstår nå er det jeg nettopp quotet.

 

 

Edit2: Hadde bare webhotellet mitt vært ordnet så kunne jeg lagt det ut å vist det, regner med at(håper)webhotellet og domenet mitt blir ordna i løpet av dagen.

 

Edit3: og Gammon ikke sant dette er faktisk ganke gøy, kan mye mye mer om html og css nå enn hva jeg kunne for 2 dager siden da jeg nettopp begynte å lese igjennom guidene fra htmldog.com

Endret 10. juni 2005 av ToxicMan

[Jesper Karsrud]

Det jeg mente med ugly kode, var at du hadde brukt paragrafer til å sette opp en meny, noe som ikke er semantisk riktig i det hele tatt Var bare det jeg mente

[Nitrius]

Det jeg mente med ugly kode, var at du hadde brukt paragrafer til å sette opp en meny, noe som ikke er semantisk riktig i det hele tatt Var bare det jeg mente

heheh skjønte det var noe sånt, men uansett har brukt .css til å satt opp navigasjon, som du ser i første post her, så har jeg brukt den koden der du får de knappene osv... også har jeg tilpasset den etter mitt behov var bare at jeg ikke fikk til å ha mellomrom mellom knappene helt til jeg fant "padding" i .css koden.

 

 

Men er forsatt på jakt etter hvordan jeg kan få "knappene" til hå holde lik størrelse selv om noen av "knappene" har fler bokstaver/tall enn andre.

[Arve Systad]

:active-staten bestem korleis eit element ser ut når det er aktivt (vanlegvis når du held museknappen inne over det), ikkje når sida til ein link er "aktiv"

[Nitrius]

<ul>
<li><a href="#" class="button">button1</a></li>
<li><a href="#" class="button">button2</a></li>
<li><a href="#" class="button">button3</a></li>
<li><a href="#" class="button">button4</a></li>
<li><a href="#" class="button">button5</a></li>
<li><a href="#" class="button">button6</a></li>
</ul>

 

Kan noen fortelle meg hva jeg må gjøre får å få litt puste rom mellom knappene mine? vis jeg ikke bruker <p></p> kodene så sitter knappene mine altid helt inntil hverandre noe som jeg selv syns ikke blir noe pent, har prøvd å gjøre det samme som jeg gjorde når jeg brukt <p></p> men uansett hva jeg nå gjør ned <li></li> så går det ikke, jeg har også veldig gjerne lyst til å få fjerne prikken som kommer av <li></li> som står bak knappene mine.

Noen tips?

[N*]

Kan noen fortelle meg hva jeg må gjøre får å få litt puste rom mellom knappene mine? vis jeg ikke bruker <p></p> kodene så sitter knappene mine altid helt inntil hverandre noe som jeg selv syns ikke blir noe pent, har prøvd å gjøre det samme som jeg gjorde når jeg brukt <p></p> men uansett hva jeg nå gjør ned <li></li> så går det ikke, jeg har også veldig gjerne lyst til å få fjerne prikken som kommer av <li></li> som står bak knappene mine.

Noen tips?

du kan bruke margin eller pading i css til å lage mellomrom.

li {
padding:5px 0;
}

det vil gjøre så alle <li> får 5pikslers mellomrom over og under og 0pikslers mellomrom på høyre og venstresiden.

 

list-style:none; fjerner prikkene.

[Nitrius]

Takker så mye virka som en drøm ^^

 

En liten ting til, legger merke til at "knappene" mine nå ikke er helt på midten av ruta mi, den er liksom litt for mye mot høyre, noe den ikke var når jeg brukte <p></p> noen aning om hva det er? og hva jeg kan gjøre?

 

 

Edit: la inn et bilde, se på "knappene" så ser du at de ikke er helt sentrert...

 

Edit2: nei dæven, ved å fjerne <ul></ul> så ble det normalt

Endret 10. juni 2005 av ToxicMan

[N*]

list-style:none outside; hjelper kansjke?

[Nitrius]

Fikk det til, var bare å fjerne <ul></ul>

 

Men har et spørsmål til(se bilde)vis dere ser helt nederst på siste knapp, hva må jeg skrive inn får at det skal bli større mellomrom mellom den knappen og nederst av av det "hvite" eller hva jeg skal si, skjønner noen hva jeg mener?

 

Edit: ops glemte bilde.

Endret 10. juni 2005 av ToxicMan