Wordpress: Dynamiske knapper (<li>)

[AnaXyd]

Heisann!

 

Har akkurat beveget meg inn på Wordpress theme delen, og driver og designer mitt eget theme nå.

 

Har satt meg inn i det grunnleggende, og veit rent basic hva jeg driver med.

 

 

Så har jeg kommet over en template jeg syntes hadde et passende oppsett, og jeg driver og redesigner denne nå. Men når det gjelder denne, trenger jeg å lage noen menyknapper som er dynamiske (uavhengig av skriftlengde). Jeg har designet de, og trenger bare og få det ut riktig i kode.

 

Vil gjerne få det til noe lignende som han her har fått det til med menyknappene: N.Design Studio

 

 

Illustrasjon av mine designede knapper:

 

Har drivi og rotet litt med CSS, men får det ikke til.

 

Her er hva jeg har komme ut med hittil:

 

Klikk for å se/fjerne innholdet nedenfor

#nav {
list-style: none;
margin: 0px;
position: absolute;
right: 10px;
bottom: 0px;
}
#nav li {
float: left;
margin-left: 5px;
}
#nav .current_page_item a, #nav .current_page_item a:visited{
color: #000000;
text-decoration: none;
}
/*#nav .page_item a{ /*originalen*/
color: #ffffff;
text-decoration: none;
background: #5c8d0c url(images/nav-button-bg.gif) repeat-x;
padding: 5px 15px;
font: bold 14px/100% Arial, Helvetica, sans-serif;
border-top: 1px solid #E6EED0;
border-left: 1px solid #AFCD69;
border-right: 1px solid #AFCD69;
display: block;
}*//*originalen*/
#nav .page_item a:hover {
color: #000000;
}*/

/* ==Modified dynamic hover== */
#nav .page_item a {	display: block;	float: left;	height: 28px; color: #ffffff; text-decoration: none; padding: 5px 15px; font: bold 14px/100% Arial, Helvetica, sans-serif; border-top: 1px solid #E6EED0;	border-left: 1px solid #AFCD69;	border-right: 1px solid #AFCD69; }
#nav .page_item a span { padding: 12px 16px 0 0;	float: left;	height: 28px;	cursor: pointer; }
#nav .page_item a:hover { color: #2a3298;	background: #e9e9e9 url(images/bg.submeny.li.left.gif) 0 100% no-repeat; }
#nav .page_item a:hover span { background: url(images/bg.submeny.li.right.gif) 100% 100% no-repeat; }

 

 

Hadde satt skikkelig stor pris på om noen hadde hjulpet meg med dette, da jeg er helt blank. Jeg driver selvsagt og prøver for harde livet, men er ikke akkurat noen stor fremgang..

 

Så jeg setter stor pris på svar!

[Bolson]

Kikk litt i css koden på følgende side www.askjellrud.no. Kanskje den kan hjelpe. her er det både rounded corners og dynamisk bredde.

 

CMS-et er jo et annet (flere divisjoner over), men CSS bør være relativt likt uansett.

 

På www.hi.no er tabbene høyrestilt.

 

Metoden du må bruke kalles "Sliding Doors".

 

Sida du linker til har ikke dynamisk bredde på tabbene, der er bredden satt for hver enkelt tab, se css for a-taggene i menyen.

 

Du kan også kikke hos Stu Nicholls. Han har mye menufancy.

Endret 20. desember 2007 av Bolson

[Equerm]

Sjekk ut denne her du

http://www.webcredible.co.uk/user-friendly...r-buttons.shtml

[AnaXyd]

Okay, skal se litt på de linkene dere gav meg. Men det blir sikkert en del enklere å gjøre knappene slik som han med Ndesign. Hvordan skal jeg få wordpress til å gjøre dette da? (Prøver såklart selv samtidig)

[Bolson]

Nå kan jeg ikke Wordpress, men menyen er egentlig laget ved hjelp av "unordned list". Det er vel også standard i Wordpress.

 

Det som er litt spesielt her er at hvert menyvalg er gitt egen id for å kunne bruke forskjellige bakgrunnbilder. Id-ene et satt på li-taggen. Teksten er egentlig plassert lang utafor visning, dvs 900em til venstre (-900em). Så dersom du skal bare ha tekst i tabbene trenger du bare at Wordpress skriver ut menyen som følger:

 

<ul id="nav">
  <li class="act"><a href="#">Første valg</a></li>
  <li><a href="#">Andre valg</a></li>
  <li><a href="#">Tredje valg</a></li>
  <li><a href="#">Fjerde valg</a></li>
</ul>

 

Da kan du bruke CSS som på www.hi.no.

 

Vi du ha bilder i tabbene, må du sette opp menyen til å ha class eller id på hvert menyvalg. Her kan du bruke id, i og med at hvert valg skal ha en spesifikk verdi, og den vil ikke gjentas.

 

Bruk Firebug i Fx til å se på kodene og hvilken CSS som er satt på de ulike elementene.

 

Prøv alltid å lage koden så enkel som mulig i forhold til å oppnå det nødvendige.

Endret 22. desember 2007 av Bolson

[AnaXyd]

Takk skal du ha for godt svar.

 

Det blir vanskelig for meg å definere noe på de andre "pages" som kommer opp. Slik ser det ut i HTML:

 

<ul id="nav">
  <li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home"><span>Blogg</span></a></li>
  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>

 

Den første er jo grei, men det andre der med php kode?

 

 

En ting til, hvordan skal jeg også få en active state på knappene?

Endret 22. desember 2007 av AnaXyd

[Bolson]

Ville mest sagt, bytt CMS! Er glad jeg ikke trenger å se php når jeg lager sidemalene (selv om jeg også bruker PHP-basert CMS). Holder å bruke PHP til å programmere moduler.

 

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?> er vel koden som genererer menyen utenom "hjem". Sjekk hva denne genererer som sideinnhold, da skulle du finne aktuell kode som trengs for CSS

 

Hvordan man setter active state aner jeg ikke, i og med at jeg bruker noe helt annet.

 

Dette bør også være dokumentert i WordPress manualer.

 

Ellers er det jo flere i "Webkafeen" som håndterer WordPress, og bør kunne svare.

[AnaXyd]

Jeg gjorde hele menyen statisk jeg. Gadd ikke å finne frem til den automatiske genereringen av innhold i denne omgang, da det tar for lang tid å finne ut.

 

Nå fungerer det også.. Trenger bare å finne en mulighet for å sette på active state på menyen.

 

 

Hvilket CMS ville du ha anbefalt istedet?

[Bolson]

Hvilket CMS ville du ha anbefalt istedet?

 

Avhenger av hva slags nettsted man skal lage.

 

Wordpress er glimrende til blog/enkle nettsteder. Men du oppdaget selv at det krever litt når man skal lage egne design.

Drupal og e107 er bra for litt mer komplekse sider. Begge er relativt greie å sette opp.

Joomla, som mange liker, har jeg ikke sansen for i det hele.

TYPO3 er det mest avanserte i gruppen, og det som jeg bruker (og kan ikke tenke meg noe annet lengre). Men det er også det som på en måte tar lengst tid å lære. Men det har også en av de beste måten å knytte opp design på. Lag en rent HTML-mal og tilordne denne.

 

Du finner en "kort innføringsmanual" på typo3.no