---

Hej,

Jeg har altså igen fået problemer, så bliver nødt til at have
hjælp igen igen..

Min horisontale menu, ser okay ud i IE, men i FF er den mindre
hvorfor egentlig? Det er ikke noget der SKAL rettes, men hvad er
grunden egentlig?

Så skrives de to sidste links i menuen også på to linjer. Jeg vil
gerne have alle links på samme linje. Hvad skyldes det? Og
hvordan retter jeg det? Den gør det ikke i IE kun i FF.

Så vil jeg som det sidste gerne have menuen ind på midten af
siden, men hvordan gør jeg. Har prøvet en masse ting nu. Ved
text-align: center; går den ind på midten, men mister formen
(forkert størrelse, ingen border osv.) Jeg ved at text-align kun
bruges til tekst, men jeg har også prøvet med noget margin: auto
og lidt af hvert, men uden held. Hvordan skal det helt præcis
gøres?

På forhånd tak (igen)

Mvh. Stefan.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Ups - glemte link:

www.infoscape.dk/test/test2.html


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

"Stefan Køberl" <steffi100_2@hotmail.com> skrev i en meddelelse
news:44cd0ef8$0$15792$14726298@news.sunsite.dk...
> Hej,

hej

> Så skrives de to sidste links i menuen også på to linjer. Jeg vil
> gerne have alle links på samme linje. Hvad skyldes det? Og
> hvordan retter jeg det? Den gør det ikke i IE kun i FF.

Under ul.navbar li a har du defineret en bredde på 8%, derfor Slet
width: 8% og den fejl er væk.

> Så vil jeg som det sidste gerne have menuen ind på midten af
> siden, men hvordan gør jeg. Har prøvet en masse ting nu. Ved
> text-align: center; går den ind på midten, men mister formen
> (forkert størrelse, ingen border osv.) Jeg ved at text-align kun
> bruges til tekst, men jeg har også prøvet med noget margin: auto
> og lidt af hvert, men uden held. Hvordan skal det helt præcis
> gøres?

Nu kan jeg ikke helt gennemskue hvordan den skal se ud, men start med at
slette float:left: under ul.navbar li a, da menuen ikke både kan flyde til
venstre og være centreret. Og endelig skal du have ændret * html ul.navbar
li til ul.navbar li, så menupunkterne havner på samme linje

Kun testet i FF, men prøv at rette, og spørg igen, hvis du får flere
problemer


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk

---

CS wrote in dk.edb.internet.webdesign.html:
> "Stefan Køberl" <steffi100_2@hotmail.com> skrev i en meddelelse
> news:44cd0ef8$0$15792$14726298@news.sunsite.dk...
> > Hej,
>
> hej
>
> > Så skrives de to sidste links i menuen også på to linjer. Jeg vil
> > gerne have alle links på samme linje. Hvad skyldes det? Og
> > hvordan retter jeg det? Den gør det ikke i IE kun i FF.
>
> Under ul.navbar li a har du defineret en bredde på 8%, derfor Slet
> width: 8% og den fejl er væk.

Jep det virker, det eneste problem er, at selve hver enkelt *kasse* er blevet
mindre. Men skal det ikke bare rettes med noget margin/padding?

> > Så vil jeg som det sidste gerne have menuen ind på midten af
> > siden, men hvordan gør jeg. Har prøvet en masse ting nu. Ved
> > text-align: center; går den ind på midten, men mister formen
> > (forkert størrelse, ingen border osv.) Jeg ved at text-align kun
> > bruges til tekst, men jeg har også prøvet med noget margin: auto
> > og lidt af hvert, men uden held. Hvordan skal det helt præcis
> > gøres?
>
> Nu kan jeg ikke helt gennemskue hvordan den skal se ud, men start med at
> slette float:left: under ul.navbar li a, da menuen ikke både kan flyde til
> venstre og være centreret. Og endelig skal du have ændret * html ul.navbar
> li til ul.navbar li, så menupunkterne havner på samme linje >

Det virker i begge, men den gør som beskrevet. Den mister border og sådan
noget. Jeg har prøvet at lade det være, så du kan se det :D ??


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl skrev:

> Min horisontale menu, ser okay ud i IE, men i FF er

Jørgen kom i går med
http://webdesign101.dk/www/cssmenu/eksempel2.html

Hvad er der galt med den?

--
Allan Vebel
http://html-faq.dk

---

> Jørgen kom i går med
> http://webdesign101.dk/www/cssmenu/eksempel2.html
>
> Hvad er der galt med den?

Der er slet ikke noget galt med den, det er også den jeg har
brugt. Den mister bare værdierne/egenskaberne når jeg prøver at
centrerer den.

Jeg har brugt Jørgens eksempel - det går bare galt når jeg prøver
at centrerer menuen.

Jeg synes ikke umiddelbart, at jeg har rettet noget forkert sted
i koden, og at *fejlen* skyldes dette?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl wrote:

> Jeg har brugt Jørgens eksempel - det går bare galt når jeg prøver
> at centrerer menuen.

Ikke fordi jeg kan se noget, der ser helt
forkert ud, men...

Stryg text-align:center fra body-markøren
/eller/
sæt text-align:left på dit #page-element.

Ang. ul.navbar;

ul er et blok-element, der bliver
så bredt som det overordnede element
tillader. Det er i dette tilfælde
#page-elementet.

li'erne er inline-elementer, fordi du har
givet dem denne egenskab. Det betyder,
at text-align center på ul-elementet centrerer
ul-elementets indhold af inline elementer,
in casu et antal li'er.

Hvis menu'en ikke er præcist midtstillet er
det nok fordi du har overset en margin-left på 20px.
Og så vidt jeg lige kan se også en border-left
på ul.navbar elementet.

Du kan slette
* html ul.navbar {width:100%;margin-left:10px;}
da ul-elemente ikke float'es
Du bør erstatte
* html ul.navbar li { display:inline; }

med følgende nye element i head-delen af din side:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
ul.navbar li { display:inline; }
</style>
<![endif]-->

Stjerne-hacket virker ikke i IE7, der
efter forlydender frigives i sidste kvartal
i år.

--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Stefan Køberl wrote:
>
> > Jeg har brugt Jørgens eksempel - det går bare galt når jeg prøver
> > at centrerer menuen.
>
> Ikke fordi jeg kan se noget, der ser helt
> forkert ud, men...

Det kan godt være jeg ikke har forklaret ordentligt. ( Ellers er det
fordi jeg ikke høre ordentligt efter ;) )

Hvis du ser menuen i FF her: www.infoscape.dk/test/test2.html så er
den ikke lige som da jeg startede ( www.infoscape.dk/test/menu.html )

Hvad er helt præcis grunden til, at menuen den mister alle regler man
har givet den. Fx er der ikke nogen border, og padding osv. er
forkert. Hvad er problemet?

>
> Stryg text-align:center fra body-markøren
> /eller/
> sæt text-align:left på dit #page-element.

Jamen så ryger logoet jo over i venstre side - er det meningen?


> Du kan slette
> * html ul.navbar {width:100%;margin-left:10px;}
> da ul-elemente ikke float'es
> Du bør erstatte
> * html ul.navbar li { display:inline; }
>
> med følgende nye element i head-delen af din side:
>
> <!--[if lt IE 7]>
&gt; <style type="text/css" media="screen">
&gt; ul.navbar li { display:inline; }
&gt; </style>
&gt; <![endif]-->
>
> Stjerne-hacket virker ikke i IE7, der
> efter forlydender frigives i sidste kvartal
> i år.

Det er gjort.



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl wrote:

> Det kan godt være jeg ikke har forklaret ordentligt. ( Ellers er det
> fordi jeg ikke høre ordentligt efter ;) )
>
> Hvis du ser menuen i FF her: www.infoscape.dk/test/test2.html så er
> den ikke lige som da jeg startede ( www.infoscape.dk/test/menu.html )
>
> Hvad er helt præcis grunden til, at menuen den mister alle regler man
> har givet den. Fx er der ikke nogen border, og padding osv. er
> forkert. Hvad er problemet?

At du bruger forskellige formdeklarationer på de to sider.

ul.navbar li a

skal float'es left.

Det kan være en fordel af øge specificiten af formreglerne,
så de ikke "smitter af på hinanden", for eksempel
div#menubar ul.navbar ....
der har større vægt end
ul.navbar


>>Stryg text-align:center fra body-markøren
>>/eller/
>>sæt text-align:left på dit #page-element.
>
>
> Jamen så ryger logoet jo over i venstre side - er det meningen?
>

Nu ved jeg ikke hvad du mener med logo'et, men
det korte af det lange er, at du kan justere dette som
du har lyst til, uafhængigt af justeringen af
det overordnede element.

Der er stadigvæk flere layout-elementer på din side end
du har brug for.

Start fra oven af med <p><a id="top"></a></p>, der
indsætter en tom linie. Det skal være skal
være <div><a id="top"></a></div>,
der ikke fylder noget.

Har du virkelig brug for to udgaver af
ul.cssmenu. Prøv at sammenligne de to
og spørgs dig selv, hvori forskellene
ligger, hvsi der overhovedet er nogen.

Når du bruger klassenavne kkan du godt lave
to eller flere ens menuer med et og samme stylesheet.

--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Stefan Køberl wrote:
>
> > Det kan godt være jeg ikke har forklaret ordentligt. ( Ellers er det
> > fordi jeg ikke høre ordentligt efter ;) )
> >
> > Hvis du ser menuen i FF her: www.infoscape.dk/test/test2.html så er
> > den ikke lige som da jeg startede ( www.infoscape.dk/test/menu.html )
> >
> > Hvad er helt præcis grunden til, at menuen den mister alle regler man
> > har givet den. Fx er der ikke nogen border, og padding osv. er
> > forkert. Hvad er problemet?
>
> At du bruger forskellige formdeklarationer på de to sider.
>
> ul.navbar li a
>
> skal float'es left.

Nu kan jeg se hvad der er galt. Det er mig der ikke har forklaret
ordentligt. Jeg har sagt at menuen skal centreres, og jeg tror, i har
forstået det som indholdet af menuen, som ikke er midtstillet. Hvis jeg
som ovennævnt floater den left, så ryger *hele* menuen jo over i venstre
side, og det er ikke meningen. Det er ikke menuens indhold jeg har
problemer med, det er selve omridset af menuen, som skal centreres. Endnu
engang undskyld - håber i kan hjælpe ;)


> Der er stadigvæk flere layout-elementer på din side end
> du har brug for.
>
> Start fra oven af med <p><a id="top"></a></p>, der
> indsætter en tom linie. Det skal være skal
> være <div><a id="top"></a></div>,
> der ikke fylder noget.

Okay, jeg vil prøve. Men hvor kan man se hvilke elementer som fylder
noget og hvilke der ikke gør? Er der ikke en liste hvor de er angivet?


> Har du virkelig brug for to udgaver af
> ul.cssmenu. Prøv at sammenligne de to
> og spørgs dig selv, hvori forskellene
> ligger, hvsi der overhovedet er nogen.

Næ, du har nok ret. Jeg skal gøre et forsøg, på at rette det.

> Når du bruger klassenavne kkan du godt lave
> to eller flere ens menuer med et og samme stylesheet.

ok.



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl wrote:

>>At du bruger forskellige formdeklarationer på de to sider.
>>
>>ul.navbar li a
>>
>>skal float'es left.
>
>
> Nu kan jeg se hvad der er galt. Det er mig der ikke har forklaret
> ordentligt. Jeg har sagt at menuen skal centreres, og jeg tror, i har
> forstået det som indholdet af menuen, som ikke er midtstillet. Hvis jeg
> som ovennævnt floater den left, så ryger *hele* menuen jo over i venstre
> side, og det er ikke meningen. Det er ikke menuens indhold jeg har
> problemer med, det er selve omridset af menuen, som skal centreres. Endnu
> engang undskyld - håber i kan hjælpe ;)

Det er vist mig, der ikke har forklaret mig ordentligt...

Tænk på følgende:

Når du laver en uordnet liste som en menu er
der 4 forskellige HTML-elementer med hver
deres egenskaber, der er i spil.

1. Det element, der indeholder ul'en,
typisk et div-element, der netop benyttes til
positionering. Jeg foretrækker for eksempel at
have i navbar i bunden af kildekoden, og positionerer
den derfor absolut.

2. Selve ul'en, der er et blok-element. Det vil
i praksis sige at ul'en bliver så bred som bredden af
det overordnede element, og altså /ikke/ summen af
bredderne af listens li-elementer.

Det betyder at du kan give din ul en eksplicit bredde
svarende til summen af de eksplicitte bredder, du
giver li-elementerne og/eller li-elementerne sindhold af
a-elementer.

Og først når du har en eksplicit bredde på ul'en kan du
centrere den vandret. Se pkt 4.

3. ul'ens indhold af li-elementer. Ud fra devisen om at
det altid er bedst at formatere et element ved hjælp
af elementets indhold behøver vi ikke at formatere
dette element.

Og så alligevel. IE fortolker li-elementets display-egenskab
på en anden måde end andre browsere, så derfor er vi
nødt til eksplicit at give dette element display-egenskaben
inline.

4. Modsætningvis skal vi give a-elementet display-egenskaben
block, af forskellige grunde som jeg omhyggeligt prøver at
forklare i artiklen
http://www.webdesign101.dk/www/cssmenu/ og eksemplerne
til denne artikel.

Og til sidst: Din menu er bedre egnet til at operere
med en eksplicit brede på menupunkterne, så giv dine
a-markører en bredde.

> Okay, jeg vil prøve. Men hvor kan man se hvilke elementer som fylder
> noget og hvilke der ikke gør? Er der ikke en liste hvor de er angivet?

Brug Chris Pedericks Firefox extension:

http://chrispederick.com/work/webdeveloper/


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

> 1. Det element, der indeholder ul'en,
> typisk et div-element, der netop benyttes til
> positionering. Jeg foretrækker for eksempel at
> have i navbar i bunden af kildekoden, og positionerer
> den derfor absolut.

Nu har jeg centreret den fint i *alle* browsere, skal jeg stadig sætte
position: absolute på navbar?

> Og til sidst: Din menu er bedre egnet til at operere
> med en eksplicit brede på menupunkterne, så giv dine
> a-markører en bredde.

Ok, det havde jeg også før. Men gør man det, vil FF jo indsætte en linje mere
inde i menuen, og så er det ikke særlig kønt mere. Nu har jeg centreret
"menuen" ens i alle browsere, det eneste der mangler nu, er at bredden i hver
a skal være større. Gør man det med width så laver den jo om på menuen i FF.
Du kan se den nye side her: www.infoscape.dk/test/1.html

Hvis der er andet knap så godt ved menuen må du godt fortælle mig det nu, så
jeg kan rette det med det samme ;)

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl wrote:
>>1. Det element, der indeholder ul'en,
>>typisk et div-element, der netop benyttes til
>>positionering. Jeg foretrækker for eksempel at
>>have i navbar i bunden af kildekoden, og positionerer
>>den derfor absolut.
>
>
> Nu har jeg centreret den fint i *alle* browsere, skal jeg stadig sætte
> position: absolute på navbar?

Nej, menuen er ikke centreret i dit eksempel.
Du har sat en position left:268px på ul.navbar.
Du mangler forsat ul.navbar li {display:inline;}

Ang. position:

Din menu skal være inde i et #banner-element,
hvor der i forvejen er et billede. Billedet vil
skubbe rundt med menuen, derfor er du nødt til
at positionere denne absolut i forhold til
#banner-elementet. For at det kan lade sig gøre,
skal banner-elementet have en position:relative.

Et absolut positioneret element centreres i forhold
til det overordnede element med følgende stylesheet
formregler:

#element {
width:[width];
position:absolute;
left:50%;
margin-leftwidth/2];}

jf. min artikel

http://www.webdesign101.dk/csslayout/autocentrering.php

>
>>Og til sidst: Din menu er bedre egnet til at operere
>>med en eksplicit brede på menupunkterne, så giv dine
>>a-markører en bredde.
>
>
> Ok, det havde jeg også før. Men gør man det, vil FF jo indsætte en linje mere
> inde i menuen, og så er det ikke særlig kønt mere. Nu har jeg centreret
> "menuen" ens i alle browsere, det eneste der mangler nu, er at bredden i hver
> a skal være større. Gør man det med width så laver den jo om på menuen i FF.
> Du kan se den nye side her: www.infoscape.dk/test/1.html


> Hvis der er andet knap så godt ved menuen må du godt fortælle mig det nu, så
> jeg kan rette det med det samme ;)
>


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

"Stefan Køberl" <steffi100_2@hotmail.com> skrev i en meddelelse
news:44cf35d9$0$15788$14726298@news.sunsite.dk...
>> 1. Det element, der indeholder ul'en,
>> typisk et div-element, der netop benyttes til
>> positionering. Jeg foretrækker for eksempel at
>> have i navbar i bunden af kildekoden, og positionerer
>> den derfor absolut.
>
> Nu har jeg centreret den fint i *alle* browsere, skal jeg stadig sætte
> position: absolute på navbar?

Du har ikke centreret den, men placeret den 258 pxiels fra venstre kanten.
Så det afhænger af hvilken browserstørrelse der ser siden.

Skal den centreres på den måde skal den placeres 50% fra venstrekanten, og
have en negativ venstre margin på halvdelen af menuens bredde. Og det kræver
du kender menuens præcise bredde, men synes det bliver noget rod at begrænse
knappernes bredde i en horinsontal menu. Det bedste du kan gøre er efter min
mening blot at placere den 200 pixels fra venstrekanten, så den står lige
over indhoidet. Eller alternativt finde en anden måde at arrangere
menupunkterne på end med float: left;

--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk

>> Og til sidst: Din menu er bedre egnet til at operere
>> med en eksplicit brede på menupunkterne, så giv dine
>> a-markører en bredde.
>
> Ok, det havde jeg også før. Men gør man det, vil FF jo indsætte en linje
> mere
> inde i menuen, og så er det ikke særlig kønt mere. Nu har jeg centreret
> "menuen" ens i alle browsere, det eneste der mangler nu, er at bredden i
> hver
> a skal være større. Gør man det med width så laver den jo om på menuen i
> FF.
> Du kan se den nye side her: www.infoscape.dk/test/1.html

Undlad at give a-markøren en bredde. Lad hellere link teksterne bestemme
bredden.