Page 1 of 1

centreret menu med css

Posted: Tue Jun 03, 2008 11:11 am
by loke
Hej alle på dette storartede forum.
Jeg har rodet en del med en template fra snek.gr http://demo.snek.gr/index.php?jos_change_template=zeus men jeg har problemer med ar få den horisontale menu centreret, jeg skal kun bruge 3-4 sider på min side og det ser ikke ordentlig ud med så få valg i menu'en når de bliver vist helt ude fra venstre side af. På linket kan i se at snek.gr har 9 valg muligheder, så derfor fylder hans menu næsten hele menu linjen ud, så ser det jo godt nok ud.
Jeg ville gerne have at menuentil at ekspandere fra midten og lige meget ud til hver side ved nye tilføjelser?
Jeg er overbevist om at det er i css filen at det skal rettes, og har prøvet alt hvad jeg kender til css, men intet virker, er der en venlig sjæl her på forumet der kan give min en forklaring og gerne en rettelse til css'en som vil kunne få min menu til at fungere efter mine hensigter?

Jeg smider lige en del af css koden her, jeg er næsten 100% sikker på at det er her der skal rettes.
På forhånd tak for et godt forum.
Mvh. loke

Code: Select all

/*****HYBRID**********/
#horizmenu{
width:980px;
padding:0;
height:25px;
margin:0px auto  ;
}
#contentseparator {
width:980px;
height:24px;
margin:0px auto;
border-top:1px solid #555;
padding:0;

}
#nav {
position: relative;
top:0px;
height:25px;
width:980px;
margin:0;
padding:0;
}
#nav li ul {
margin: 0;
padding: 0;
}
#nav a {
display:block;
text-decoration: none;
}

#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding:0 5px;
}
#nav li ul {
display: none;
}

#nav li.off ul  { /*put the subnav below*/
position: absolute;
top: 15px;
padding-top:10px;
left: 0;
height:35px;
width:980px;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
}

#nav li a {
float:left;
height:25px;
line-height:25px;
font-weight:normal;
padding:0 10px 0 10px;
display:block;
color:#fff;
text-decoration:none;
}


#nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
color: #fff;
width: auto;
margin:0 5px;
}

#nav li.over ul li a { /*for ie - the specificity is necessary*/
}


#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}

#nav li.off a:hover{
color: #fff;
background:#156c94;
}

/********************/

Re: centreret menu med css

Posted: Tue Jun 03, 2008 7:04 pm
by Gadensgaard
Prøv at ændre #nav til følgende:
#nav {
position: relative;
top:0px;
height:25px;
margin: 0 auto;
padding:0;
}

(Jeg har fjernet width og tilføjet "auto" i margin)

Re: centreret menu med css

Posted: Wed Jun 04, 2008 3:46 pm
by loke
Hej

Og tak for indsatsen.

Jeg prøvede at sætte din css kode ind i stedet for som du foreslog, men lige lidt hjalp det, menuen bliver stadig vist i venstre side. Jeg kiggede lignende css filer igennem og fandt en løsning hvor jeg kan få menuen længere ud på menu linjen ved at indsætte
padding-left:350px;
i stedet for
padding:0;
menuen bliver stadig vist fra venstre mod højre på denne måde bare længere ude på menu linjen, og derfor er løsningen ikke optimal, jeg er nødsaget til at skulle rette "padding-left:350px;" i px. hver gang jeg skal indsætte en ny menu knap på siden, dette vil jeg selv kunne leve med, men da siden ikke er min egen, men en af mine venners vil hun nok ikke selv være i stand til at lave denne rettelse hver gang hun tilføjer en ny knap.

Ny rettelse! i css filen der bare skyder menuen længere ud på menu linjen.

#horizmenu{
width:980px;
padding-left:350px;
height:25px;
margin:0px auto ;

}

Re: centreret menu med css

Posted: Wed Jun 04, 2008 3:47 pm
by tresan
Har du et link til siden? Det gør det noget nemmere.

Re: centreret menu med css

Posted: Wed Jun 04, 2008 6:21 pm
by Gadensgaard
Prøv at fjerne bredden på #horizmenu også