|
| css - centrere en menu Fra : SpookiePower |
Dato : 30-11-07 20:25 |
|
Jeg har fundet denne menu som jeg vil benytte på min side -
http://tutorials.alsacreations.com/deroulant/
Jeg har dog problemer med at få menu til at være
centreret på midten af skærmen.
Starten af den medfølgende CSS ser således ud -
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
z-index:100;
width: 100%; /* precision for Opera */
}
....
....
....
Jeg går ud fra det er #menu som placere menuen.
Jeg har ændret på den på følgende måde -
#menu {
position: absolute; /* Menu position that can be changed at will */
margin:50px auto 0;
z-index:100;
width: 100%; /* precision for Opera */
Det får menuen 50px ned, men ikke ud på midten.
Hvad er galt ?
| |
Philip Nunnegaard (30-11-2007)
| Kommentar Fra : Philip Nunnegaard |
Dato : 30-11-07 21:47 |
|
> #menu {
> position: absolute; /* Menu position that can be changed at will */
> margin:50px auto 0;
> z-index:100;
> width: 100%; /* precision for Opera */
>
> Det får menuen 50px ned, men ikke ud på midten.
> Hvad er galt ?
Til body tilføjer du:
text-align: center;
Det burde centrere menuen.
Problemet er så selvfølgelig, at al anden tekst på siden pludselig også
centreres, så det skal du ændre på ved de enkelte felter.
Evt. kan det klares ved at lave en div omkring alle andre elementer på siden
med text-align: left, men nu ved jeg jo ikke, hvordan din side er sat op.
| |
Birger (01-12-2007)
| Kommentar Fra : Birger |
Dato : 01-12-07 00:14 |
|
"Philip Nunnegaard" <philip@fjerndettehitsurf.dk> skrev i en meddelelse
news:475076da$0$15901$edfadb0f@dtext01.news.tele.dk...
>> #menu {
>> position: absolute; /* Menu position that can be changed at will */
>> margin:50px auto 0;
>> z-index:100;
>> width: 100%; /* precision for Opera */
>>
>> Det får menuen 50px ned, men ikke ud på midten.
>> Hvad er galt ?
>
> Til body tilføjer du:
> text-align: center;
>
> Det burde centrere menuen.
> Problemet er så selvfølgelig, at al anden tekst på siden pludselig også
> centreres, så det skal du ændre på ved de enkelte felter.
> Evt. kan det klares ved at lave en div omkring alle andre elementer på
> siden med text-align: left, men nu ved jeg jo ikke, hvordan din side er
> sat op.
Nej, der bruges absolut positionering, så text-align i body, skulle helst
ikke flytte med menuen - men som rigtigt påpeges - med alt andet (der heller
ikke er absolut positioneret)...
Pointen med absolut positionering, er netop at elementerne tages ud af det
normale flow.
Så det du skal centrere er indholdet i din #menu, f.eks.
#menu {
top : 50px;
left : 0px;
width : 100%;
text-align : center;
}
Birger
| |
Philip Nunnegaard (01-12-2007)
| Kommentar Fra : Philip Nunnegaard |
Dato : 01-12-07 00:25 |
|
> Nej, der bruges absolut positionering, så text-align i body, skulle helst
> ikke flytte med menuen - men som rigtigt påpeges - med alt andet (der
> heller ikke er absolut positioneret)...
Jeg glemte lige, at han havde positioneret menuen absolut, og det skal
selvfølgelig væk.
> Så det du skal centrere er indholdet i din #menu, f.eks.
Det centrerer ikke selve menuen, men kun indholdet i den.
Derfor vil jeg fastholde, at det er forælder-elementet (f.eks. body), der
skal have en "text-align: center;".
| |
|
|