Meny som er 100% uansett hvor mange knapper

[Garreth]

Jepp. Header bildet kommer, skjedde visst noe rart med serveren nå.

 

Ps. Den blå linjen i toppmenyen skal egentlig ikke være med, jeg bare la den på for å vise hvor langt jeg vil at toppmenyen skal strekke seg.

 

Eksempel

[Steinmann]

a er jo inline, må settes til block

[Garreth]

Setter jeg

#toppmeny li {
display: inline;
list-style-type: none;
}

til

#toppmeny li {
display: block;
list-style-type: none;
}

så kommer "boksene" under hverandre. Jeg trodde det var display: inline; som fikk menyen til å gå horisontalt

[Steinmann]

nope, det er float: left;

Men du kan sette a til block!

[Garreth]

Det fungerer nå, men bare hvis jeg har dem uten mellomrom. Tar jeg på margin eller border right så blir det forsjellig om jeg har 5 eller 6 knapper. Du har vel ikke et tips på hvordan jeg kan løse dette?

[Steinmann]

da må du gjøre det samme som med paddingen. Trekke det ifra før man deler

btw: padding regnestykket mitt er feil også, må vel ganges med 2

[Garreth]

Jeg sliter veldig med å få det til. Uansett hva jeg gjør så blir det feil.

 

$categoryList = newClass("Categorylist");
$categorytree = $categoryList->getSubCategoryList($db,$SITE->getSiteConfig('topmenuroot',$SITE->getActiveLanguage()));

$loopCount = count($categorytree);
$padding = 2;
$width = 760;
$margin = 3;
$ant = $loopCount;
$liwidth = ($width - ($padding * $ant)) / $ant;

 

CSS

#toppmeny li a{
display:block;
width:<?echo "$liwidth";?>px;
padding:6px <?echo "$padding";?>px;
margin:1px <?echo "$margin";?>px 3px 0px;
}

 

Har prøvd å putte $margin inn i $liwidth = ($width - ($padding * $ant)) / $ant; over alt men det stemmer ikke. Jeg vil altså at boksene skal ha en margin på 3px til høyre.

 

Edit: Hvis jeg har $width = 780; så blir det for mye ser det ut som (menyen kommer på to linjer da), jeg har derfor satt ned widthen til 760.

Endret 16. august 2005 av Garreth

[Steinmann]

$padding = 2;
$width = 760;
$margin = 3;
$ant = $loopCount;
$borderleft = 0;
$borderright = 0;

$extra = ($padding * 2) * $ant;
$extra += ($margin * 2) * $ant;
$extra += $borderleft * $ant;
$extra += $borderright * $ant; 

$liwidth = ($width - $extra) / $ant;
/*husker ikke om margin påvirker bredden på samme måte som padding, men det kan du jo teste. Blir de for små kan du stryke den linja med margin */

[Garreth]

Tusen takk, skal prøve det nå!

[Garreth]

Hmm. Nå får jeg ingen verdi fra $liwidth. prøver jeg å debuge får jeg [ BOOL ] [FALSE]

 

Edit: Ikke så rart siden jeg hadde glemt $loopCount = count($categorytree); Nå får jeg ihvertfall verdi der, jeg må bare justere verdiene før det stemmer helt.

 

Tusen takk for hjelpen!

Endret 16. august 2005 av Garreth

[Garreth]

Det ser fremdeles ut som det ikke stemmer heeeeeelt.

 

Hvis antall knapper er 6 så er dette oppsettet perfekt:

 

PHP

	$padding = 2;
$width = 801;
$margin = 3;
$ant = $loopCount;
$borderleft = 0;
$borderright = 1;

$extra = ($padding * 2) * $ant;
$extra += ($margin * 2) * $ant;
$extra += $borderleft * $ant;
$extra += $borderright * $ant; 

$liwidth = ($width - $extra) / $ant;

 

CSS

#toppmeny{
width:784px;
}

ul#toppmeny{
margin:5px 0px 10px 0px!important;
margin:5px 0px 2px 0px;
white-space: nowrap;
font-size:12px;
}

#toppmeny li {
display: inline;
float:left;
list-style-type: none;
text-align:center;
}

#toppmeny li a{
display:block;
width:<?echo "$liwidth";?>px;
padding:6px 2px;
margin:1px 3px 3px 0px;
border-right:1px solid #fff;
}

 

toppmeny li a{ blir skrevet ut slik:

#toppmeny li a{
display:block;
width:122.5px;
padding:6px 2px;
margin:1px 3px 3px 0px;
border-right:1px solid #fff;
}

 

Legger jeg til en ekstra knapp slik at antallet er 7 mangler det plustselig ca 3 px på høyre siden av den siste knappen.

 

CSSen blir da:

#toppmeny li a{
display:block;
width:103.42857142857px;
padding:6px 2px;
margin:1px 3px 3px 0px;
border-right:1px solid #fff;
}

 

Da må jeg forandre verdien på $width = for at det skal stemme. Er det noen som ser noen feil med oppsettet mitt?

Endret 16. august 2005 av Garreth

[Steinmann]

Eksempel?

[Garreth]

2 sec så skal jeg legge opp

 

Edit:

 

6 knapper

 

7 knapper

 

Nå har jeg ikke forandret $width, den står på 795 nå

($width = 795;)

 

Edit 2:

 

Har også laget en egen verdi til IE.

 

$widthIE = 798;

$liwidthIE = ($widthIE - $extra) / $ant;

Endret 16. august 2005 av Garreth

[Steinmann]

Hmm, tror det har med margin greiene.

Koke sammen en kode:

 

/*$padding = 2; du trenger vel egentlig ikke padding*/
$width = 760;
$margin = 5;
$ant = $loopCount;
$borderleft = 0;
$borderright = 0;

/*$extra = ($padding * 2) * $ant;*/
$extra += ($margin) * $ant; /*mulig du må ha ($ant - 1)*/
/*$extra += $borderleft * $ant; Ser ikke hva du trenger border for heller
$extra += $borderright * $ant; */

$liwidth = ($width - $extra) / $ant;

#toppmeny li a{
display:block;
width:<?=$liwidth ?>px;
margin-top:1px;
margin-left: <?=$margin ?>px;
}

#toppmeny li:first-child a {
margin-left: 0;
}

 

Om margin får problemet med overlapping margins kan du bruke border istedenfor

 

 

Funker nok ikke helt i IE da

[Jakob K]

Både padding og margin legger seg utenpå bredden av elementet, men borderen kommer inmimellom dem, angående boksmodellen.

 

Prøv dette:

$pagewidth = 795;
$button-count = 6; /* Legg inn funksjon for opptelling av knappene */
$button-padding = 2; /* Padding for høyre og venstre side */
$button-margin = 3; /* Margin for høyre og venstre side */
$button-border = 1; /* Bordertykkelse for høyre og venstre side */
$button-width = ($pagewidth / $button-count) - (2 * ($button-padding + $button-margin + $button-border));

#toppmeny li a{
 display: block;
 width: <? echo "$button-width"; ?>px;
 padding: 6px <? ehco "$button-padding"; ?>px;
 margin:  1px <? ehco "$button-margin"; ?>px 0 <? ehco "$button-margin"; ?>px;
 border: 0 <? ehco "$button-margin"; ?>px solid #fff;
}

Hvis du ikke vil ha like verdier på begge sidene må du gjøre regnestykket mer avansert først.

[Garreth]

@orsus: Ah!!! Takk * ant; Det fungerte perfekt nå!

 

@AfroDude: takk for du gadd å sette deg inn i dette, men orsus sitt fungerte bra nå. Jeg kommer kanskje til å trenge ditt script når menyen blir enda mer avansert.

Endret 16. august 2005 av Garreth

[Garreth]

Er det en eller annen måte å få (dritt) IE til å skjønne li:first-child a ? Kanskje noe javascript greier?

 

Edit: Etter å ha revet håret mitt en hel dag for å få fikset dette i IE fant jeg ut at

 

margin-left: <?=$margin ?>px; ble mye bedre om jeg tok margin-right: <?=$margin ?>px; Så nå fungerer det i FF og IE. Woho

Endret 17. august 2005 av Garreth