Gå til innhold

Meny som er 100% uansett hvor mange knapper

Garreth

Av Garreth
i Programmering og webutvikling

Anbefalte innlegg

Garreth

Garreth

Skrevet
Skrevet (endret)

Jeg spurte om dette i webkafeen, men det var ingen som svarte.

 

Jeg holder på å lage en side som skal ha en horisontal meny som strekker seg over hele bredden av siden (780px) Denne menyen skal være mulig å forandre på (legge til knapper, forandre knappe tekst osv), derfor lurte jeg på om det er en måte å gjøre denne menyen 100% i bredden uansett om det er 2 eller 7 knapper. Jeg har prøvd med "width: 100%; " men jeg får den ikke "dynamisk" Den blir 100% men så fort jeg legger til en knapp så blir den ikke 100% lenger.

 

Noen som vet en metode for å fikse dette?

 

 

Edit: skrivefeil

Endret av Garreth
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
endrebjo

endrebjo

Skrevet
Skrevet (endret)

Noe sånt?

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Test</title>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="navigation">
<ul>
<li><a href="#">Knapp</a/></li>
<li><a href="#">Knapp 1</a></li>
<li><a href="#">Knapp 2</a></li>
</ul>	
</div>

<div id="content">
<p>Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.</p>

<p>Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.   Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.  Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff. Endre er tøff. Endre er tøff. Endre er tøff.Endre er tøff.Endre er tøff.Endre er tøff.</p>
</div>

</body>
</html>

 

body {
width: 100%;
border: solid 1px black;
margin: 0 auto;
font-size: 1em;
font-family: verdana;
color: #000;
}

div#navigation {
width: 100%;
border: solid 1px red;
background-color: #fcc;
padding: 10px;
}


div#content {
width: 60%;
margin: 10px auto;
padding: 10px;
}

div#navigation li {
width: 100px;
float: left;
}

Endret av endrebjorsvik89
Lenke til kommentar
Garreth

Garreth

Skrevet
  • Forfatter
Skrevet (endret)
Slik at alle knappene blir like brede, og allikevel fyller hele body?

Nei, body blir jo da hele browser vinduet, jeg vil ha dem til å fylle hele bredden av siden (som er inne i en wrap div som er 780px) Hvis jeg har 2 knapper: 780/2 = 390 i bredden pr knapp, eller 5 knapper: 780/5 = 156 i bredden pr knapp. Høyden vil jeg at skal være fast.

 

 

sett en viss width, og ta width/antall knapper, sett så resultatet som width på knappene.

 

bør gå rimelig greit med php, eller manuelt for den saks skyld.

 

Ja hvordan gjør man dette egentlig?

Endret av Garreth
Lenke til kommentar
endrebjo

endrebjo

Skrevet
Skrevet
Slik at alle knappene blir like brede, og allikevel fyller hele body?

Nei, body blir jo da hele browser vinduet, jeg vil ha dem til å fylle hele bredden av siden (som er inne i en wrap div som er 780px) Hvis jeg har 2 knapper: 780/2 = 390 i bredden pr knapp, eller 5 knapper: 780/5 = 156 i bredden pr knapp. Høyden vil jeg at skal være fast.

Hele browserviduet heter html, og siden din (som du har puttet i en wrap) heter body.

Lenke til kommentar
Garreth

Garreth

Skrevet
  • Forfatter
Skrevet

Hele browserviduet heter html, og siden din (som du har puttet i en wrap) heter body.

 

OK, my bad. Men når jeg setter bg color på body så fyller den hele browser vinduet mitt.

 

Har denne koden øverst i css dokumentet.

 

* {
margin: 0;
padding: 0;
}

body {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background: #fff;
voice-family: "\"}\""; voice-family:inherit;
}

body, html {
height: 100%;
}

div#wrap {
width: 780px !important;
width:	/**/ : 780px;
margin: 0 auto;
text-align: left;
font-family: 'Verdana', Trebuchet MS, Lucida Grande, Lucida, Geneva, Helvetica, Arial, sans-serif;
}

 

 

Kommer helt ann på hvordan man har gjort det da :)

 

Du må gennerere en css fil med php der du putter inn de riktige verdiene basert på bredden og hvor mange elementer :)

 

Ja, det hørtes jo enkelt ut :dontgetit:

Lenke til kommentar
Jakob K

Jakob K

Skrevet
Skrevet

Jeg har lurt på det samme før, fant ikke ut av noen dynamisk CSS-kode. Putt inn litt PHP i HTML-filen som teller antallet LI og deler det på sidebredden. Så printer den den kalkulerte bredden (altså bredden hver knapp skal ha) enten i en style="width: Xpx;" i hver av LI-elementene eller i STYLE i HEAD. Eventuelt kan du gjøre noe av det samme med JavaScript, men vil anbefale PHP til slikt.

Lenke til kommentar
Steinmann

Steinmann

Skrevet
Skrevet 

<?
$padding = 2;
$width = 780;
$ant = <må hentes ifra et sted>
$liwidth = ($width - ($padding * $ant)) \ $ant;
echo "#meny li {
 width: $liwidth px;
 padding: $padding px;
}";
?>

 

burde funke det.

Bare å legge dette i en php fil, og inkludere den som et vanlig stilark.

Mulig du må tilpasse litt, men du skjønner hva jeg mener

Lenke til kommentar
Garreth

Garreth

Skrevet
  • Forfatter
Skrevet (endret) 
<?
$padding = 2;
$width = 780;
$ant = <må hentes ifra et sted>
$liwidth = ($width - ($padding * $ant)) \ $ant;
echo "#meny li {
 width: $liwidth px;
 padding: $padding px;
}";
?>

 

burde funke det.

Bare å legge dette i en php fil, og inkludere den som et vanlig stilark.

Mulig du må tilpasse litt, men du skjønner hva jeg mener

Jøss, takk. Nå er bare å finne ant. PHP systemet jeg bruker er egentlig utviklet av noen andre, eneste jeg klarer er å forandre hvilke html tagger som blir skrevet ut. Det ble brukt tabeller til layout i dette systemet før :w00t: . Men php biten er jeg ikke så stødig i ennå.

 

Edit:

 

 

Jeg bruker nå

 

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

$loopCount = count($categorytree);

 

bruker jeg 

debug ($loopCount);

får jeg [ NUMERIC ] [6] Og det stemmer med antall menyknapper jeg har. Men jeg får ikke din kode til å fungere.

 

Jeg bruker da

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

$loopCount = count($categorytree);
$padding = 2;
$width = 780;
$ant = $loopCount;
$liwidth = ($width - ($padding * $ant)) \ $ant;
echo "#meny li {
width: $liwidth px;
padding: $padding px;
}";

 

Har jeg gjort noe feil?

 

Edit 2:

 

Tar jeg vekk \$ant så skriver den ihvertfall ut noe

da blir det

 

#meny li { width: 768 px; padding: 2 px; }

noe som ikke er helt riktig etter min hoderegning.

Endret av Garreth
Lenke til kommentar
Garreth

Garreth

Skrevet
  • Forfatter
Skrevet

Hmm, Tror det må være noe galt med det regnestykket eller noe. Knappene fyller ihvertfall ikke ut hele 780px.

 

PHP

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

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

 

CSS

<style>
#toppmeny{
width:780px;
}
ul#toppmeny{
margin:5px 0px 10px 0px;
white-space: nowrap;
font-size:11px;
padding-top:4px!important;
padding-top:0px;
}

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

#toppmeny a{
width:<?echo "$liwidth";?>px;
padding:6px <?echo "$padding";?>px;
}


#toppmeny a:link, #toppmeny a:visited{
color: #fff;
background-color: #BBBDBF;
text-decoration: none;
width:100% auto;
}

#toppmeny a:hover{
color: #fff;
background-color: #FCB815;
text-decoration: none;
}

#toppmeny #current a{
color: #fff;
background-color: #FCB815;
text-decoration: none;
}

</style>

 

#toppmeny a{
width:<?echo "$liwidth";?>px;
padding:6px <?echo "$padding";?>px;
}

blir skrevet ut som

#toppmeny a{
width:124px;
padding:6px 2px;
}

 

Er det kanskje en bedre måte å skrive CSSen på, slik at det passer med orsus sin php kode?

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