CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

ej147 Nybegynder

30. august 2014 - 21:04 Der er 22 kommentarer og
1 løsning

Menubjælke i midten

Kan en af jer monstro fortælle mig, hvordan jeg får denne menubjælke til at stå i midten af siden hele tiden?

Denne menubjælke i html:
<div id="navi">
<ul>
<li><a href="index.html">Forside</a></li>
<li><a href="forlag.html">Forlag</a></li>
<li><a href="slaegt.html">Slægtsforskning</a></li>
<li><a href="copyright.html">Copyright</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>

Og her er koden i css:
#navi { background-color:#333333; clear:both; }
#navi ul { width:100%; float:left; margin:0px; background-color:#333333; border-bottom:3px #cccccc solid; }
#navi ul li { display:inline; }
#navi ul li a { float:left; padding:10px 25px; }

#navi a:link { color:#ffffff; }
#navi a:visited { color:#ffffff; }
#navi a:active { color:#ffffff; }
#navi a:hover { color:#ffffff; background-color:#770000; }
#navi a:focus { color:#ffffff; }

Håber en af jer kan fortælle mig, hvad der er galt her.

Synes godt om

keysersoze Guru

30. august 2014 - 21:56 #1

#navi { background-color:#333333; clear:both; margin: auto; }

Synes godt om

ej147 Nybegynder

30. august 2014 - 22:02 #2

Nej, desværre - virker ikke.
Menubjælken rykker sig ikke ud af stedet.

Synes godt om

keysersoze Guru

30. august 2014 - 22:40 #3

giv et link - der kan være utallige årsager til det.

Synes godt om

keysersoze Guru

30. august 2014 - 22:44 #4

ja, ok - din div skal selvfølgelig have en bredde hvis mit forslag skal virke.

Synes godt om

ej147 Nybegynder

30. august 2014 - 22:46 #5

Hvad mener du?

Synes godt om

ej147 Nybegynder

30. august 2014 - 22:49 #6

Hvis jeg sætter den div til 100% rykker selve menupunkterne sig ikke.
Sætter jeg derimod bredde til 900px rykker bjælken sig godt nok ind på midten.

Synes godt om

NielsErikP Mester

31. august 2014 - 01:38 #7

Hej...

Prøv at smide en "container" omkring din menu og flyt lidt på koden:

#container {width: 100%; height: 40px; background: red;}
#navi {background-color:#333333; clear:both; width: 50%; margin: auto;}
#navi ul { float:left; margin:0px; background-color:#333333; border-bottom:3px #cccccc solid; }
#navi ul li { display:inline; }
#navi ul li a { float:left; padding:10px 25px; }

#navi a:link { color:#ffffff; }
#navi a:visited { color:#ffffff; }
#navi a:active { color:#ffffff; }
#navi a:hover { color:#ffffff; background-color:#770000; }
#navi a:focus { color:#ffffff; }

<div id="container">
<div id="navi">
<ul>
<li><a href="index.html">Forside</a></li>
<li><a href="forlag.html">Forlag</a></li>
<li><a href="slaegt.html">Slægtsforskning</a></li>
<li><a href="copyright.html">Copyright</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>

Håber du kan bruge det.

Synes godt om

ej147 Nybegynder

31. august 2014 - 02:06 #8

NielsErikP:
Om jeg kan brug det?
Det er absolut perfekt - tusind tak for hjælpen.
Smid venligst et svar.

Synes godt om

keysersoze Guru

31. august 2014 - 09:16 #9

containeren gør vel ingenting andet end at fylde rent markup-mæssigt - ellers er det det samme som allerede foreslået medmindre der skal være en 100% bredde baggrundsfarve eller lignende.

Synes godt om

NielsErikP Mester

31. august 2014 - 10:00 #10

Hej..

keysersoze: Du sagde ganske rigtigt margin: auto, men margin : auto skal jo have noget at centrerer i forhold til... og da spørger ikke havde anden kode her end det viste.. lagde jeg en container på, hvilken #nav kunne centreres i forhold... satte så baggrunds farven rød på... så spørger kunne se, hvad jeg gjorde.

Du har ganske ret... Ikke for at stjæle point fra dig... vi deler bare.

Synes godt om

NielsErikP Mester

31. august 2014 - 10:02 #11

Hej...

ej147: Super.. Men som keysersoze nævner, hvis du har noget i forvejen der kan erstatte den container.. Så bruger du selvfølgelig bare det. Var for at give dig en ide om, hvorfor du ikke kunne centrerer den menu.

Og dette er mit svar.

Synes godt om

ej147 Nybegynder

31. august 2014 - 10:13 #12

Jeg har intet i forvejen, der kan erstatte den container og siden det virker perfekt, beholder jeg den :-)
Tak for begge jeres svar.
Jeg tænker, at siden keysersoze har en "halv milliard point" vil jeg tillade mig at give de 30 til NielsErikP - håber ikke det giver problemer.

Synes godt om

keysersoze Guru

31. august 2014 - 10:44 #13

margin auto virker fint i forhold til body og da det er et obligatorisk element vil der altid være noget at forholde sig til.

Synes godt om

ej147 Nybegynder

31. august 2014 - 10:54 #14

keysersoze:
Lad mig sige det, som det er, jeg er absolut amatør ud i faget programmering. Jeg har dog en hjemmeside zerious.dk - lavet med en anelse hjælp her fra siden - men da der er fejl i den, har jeg besluttet at starte forfra for at lære programmering til bunds.
Nok om det, men derfor følgende:
Jeg testede dit første forslag, men fik det ikke til at virke, så jeg er lidt usikker på hvordan du mener, det skal kunne virke.
Kan du evt. skrive hele koden på det du forslår, så jeg kan se hvad du mener?

Synes godt om

keysersoze Guru

31. august 2014 - 11:14 #15

Hvis du har fået det til at virke er det hovedsagen.

I #6 skrev du, at hvis du satte bredden til 900px så virkede det - men nu siger du at det ikke virker? Om 900px eller 50% som NielsErikP foreslår er den rigtige bredde skal jeg så ikke kunne sige.

Synes godt om

ej147 Nybegynder

31. august 2014 - 11:21 #16

jeg sidder lige og tester begge jeres forslag og kan se at hvis jeg ikke har en container, så virker det ikke. Menubjælken rykker sig ikke ud af stedet.
Menubjælken skulle jo gerne stå midt på siden uanset hvilken størrelse skærm den bliver vist på.

Synes godt om

ej147 Nybegynder

31. august 2014 - 11:25 #17

Men jeg undrer mig da over, at "margin: auto;" ikke får den bjælke til at rykke sig overhovedet, det ville jo være den nemmeste løsning.

Synes godt om

keysersoze Guru

31. august 2014 - 11:39 #18

En div er et block-element og er altså 100% bred - dermed er der ikke "plads" til noget margin og derfor skal bredden sættes.

I #6 skrev du "Sætter jeg derimod bredde til 900px rykker bjælken sig godt nok ind på midten." Hvad betyder det hvis det ikke virker nu?

Det er næsten umuligt at gætte sig til noget ud fra brudstykker af kode - så har du noget der ikke virker efter hensigten så prøv at giv et link til en demo-side hvor vi kan se problemet.

Synes godt om

NielsErikP Mester

31. august 2014 - 11:47 #19

Hej...

Super du fik det til at virke.

Tak for pont.

Synes godt om

ej147 Nybegynder

31. august 2014 - 11:54 #20

keysersoze:
Jeg har desværre ikke noget link, jeg kan henvise til, men her er hele koden:

<body>

<div id="wrapper">

<div id="top">
<div id="logo">
<img src="foto.JPG" height="75" width="64" />
</div>

<div id="tekst">
<p>Forlaget Zerious</p>
<p>Altid under udvikling</p>
<p>Kontakt gerne forlaget på 20 33 17 47</p>
</div>
</div>

<div id="navi">
<ul>
<li><a href="index.html">Forside</a></li>
<li><a href="forlag.html">Forlag</a></li>
<li><a href="slaegt.html">Slægtsforskning</a></li>
<li><a href="copyright.html">Copyright</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>

<div id="banner">
<img src="dyrehaven.JPG" height="380" width="500" />
</div>

<div id="footer">
<p>© Copyright 2014 Forlaget Zerious ved Erik Jensen</p>
</div>

</div>

</body>

Og css:
#wrapper { width:100%; margin:0px auto; background-color:#ffffff; }

#top { background-color:#999999; width:100%; padding:20px 0; overflow:hidden; }

#logo { margin:0 0 0 194px; float:left; }

#tekst { float:right; margin:0 200px 0 0; }
#tekst p { color:#ffffff; font-size:12px; margin:4px 10px 4px 0px; }

#navi { background-color:#333333; clear:both; }
#navi ul { width:100%; float:left; margin:0px; background-color:#333333; border-bottom:3px #cccccc solid; }
#navi ul li { display:inline; }
#navi ul li a { float:left; padding:10px 25px; }

#navi a:link { color:#ffffff; }
#navi a:visited { color:#ffffff; }
#navi a:active { color:#ffffff; }
#navi a:hover { color:#ffffff; background-color:#770000; }
#navi a:focus { color:#ffffff; }

#banner { margin-left:400px; margin-right:400px; }

#subbanner {}

#content {}

#leftside {}

#rightside {}

#footer { margin-left:500px; margin-right:500px;}

Synes godt om

keysersoze Guru

31. august 2014 - 14:31 #21

Du har forhåbentlig også en DOCTYPE osv? Jeg vil hellere se det der ikke virker end din oprindelige kode.

Synes godt om

ej147 Nybegynder

31. august 2014 - 15:03 #22

Jovist har jeg en DOCTYPE :-)
Men ovenstående kode er netop den, der IKKE virker.
I mellemtiden har jeg arbejder mig rundt med begge jeres forslag, så det nu ser ud til at virke, som jeg vil have det - håber jeg. Men desværre kan jeg først lægge det ud på nettet i morgen, så jeg/du evt. vil kunne se, om det nu også gør det.

Synes godt om

keysersoze Guru

31. august 2014 - 15:18 #23

Der er hverken margin auto eller width på #navi?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS