Center usorteret liste

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:
Center usorteret liste

Indlæg af cristian » 2. okt 2013, 20:41

Så er jeg her igen ,)

Ville lige sige tak for hjælpen indtil videre, og fårhåbenlig kan i hjælpe mig med at blive lidt klogere igen på dette HTML / CSS togt.
Som går fremaf med mine 3 bøger og dette forum.

Har prøvede og følge denne guide
http://www.onextrapixel.com/2011/06/03/ ... and-jquery
Til at lave en navigations menu med en undermenu.

Denne har jeg kommet ind i en div som viser tabel-cell.

Kode: Vælg alt

display: table-cell;
For vertikalt at kunne center menuen.
Hvor jeg fulgte denne guide
http://www.jakpsatweb.cz/css/css-vertic ... ution.html
Og testede og testede indtil jeg forstod hvordan det hang sammen.

Dog kan jeg ikke rigtig finde ud af at center menuen horizontalt inde i diven.
Når jeg laver

Kode: Vælg alt

text-align: center;
Så centerer den teksten i undermenuen af menuen istedet for hele menuen inde i diven.

Så vidt jeg selv kan regne ud har det noget at gøre med hvordan menuen er bygget, hvor der på et tidspunkt står

Kode: Vælg alt

.menu {
    float: left;
    
    padding: 0px;
}

.menu > li {
    float: left;
}
}
Som ligger menuen ud til venster i diven. Samtidig med den gør noget jeg ikke rigtig forstår, ved ikke hvad > betyder i denne sammenhæng. Ligner arv men igen ikke.
Så spørgsmålet er: Hvordan center jeg menuen inde i min div?? :?:

Eller er det et sted i kan pege mig hen hvor jeg kan finde svaret?

det jeg har lavet kan ses på http://www.mnrb.dk

Tak på forhånd.
Vh

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Center usorteret liste

Indlæg af ThomasI » 3. okt 2013, 21:39

Har du overvejet at smide din liste ind i en div og så sætte noget padding på i hver side og på den måde centrerer din liste?

Kode: Vælg alt

<div style="width:500px;">

<div style="width:300px; padding-left:100px; padding-right:100px;">

din liste

<div>


</div>

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Center usorteret liste

Indlæg af cristian » 4. okt 2013, 13:17

ThomasI skrev:Har du overvejet at smide din liste ind i en div og så sætte noget padding på i hver side og på den måde centrerer din liste?

Kode: Vælg alt

<div style="width:500px;">

<div style="width:300px; padding-left:100px; padding-right:100px;">

din liste

<div>


</div>

min liste ligger inde i en navigationMenu div. Og man kunne som sådan godt tilføje padding på venstre side for at centere listen. Men tænker der må være en smartere måde at gøre det på.
Man kunne f.eks. godt gøre det med text-align:center. Men på grund af nogle float:left; i selve menuen jeg ikke forstår funktionaliteten af. Så bliver den ikke centeret via denne måde.

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Center usorteret liste

Indlæg af ThomasI » 5. okt 2013, 12:15

Det ser ud til at du har fået det til at virke Cristian?

Men ja, det nemmeste tror jeg er at bruge padding atributten på enten navigationMenuHeader div´en eller på selve din liste. Sæt den til auto, og du vil på den måde ikke skulle bekymre dig om at ændre padding hver gang du ændre i størrelsen på din nav liste.

f.eks sådean her :

Kode: Vælg alt

#navigationMenuHeader{
width: 600px;
padding-left: auto;
padding-right: auto;
background-color: none;

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Center usorteret liste

Indlæg af cristian » 7. okt 2013, 20:23

ThomasI skrev:Det ser ud til at du har fået det til at virke Cristian?

Men ja, det nemmeste tror jeg er at bruge padding atributten på enten navigationMenuHeader div´en eller på selve din liste. Sæt den til auto, og du vil på den måde ikke skulle bekymre dig om at ændre padding hver gang du ændre i størrelsen på din nav liste.

f.eks sådean her :

Kode: Vælg alt

#navigationMenuHeader{
width: 600px;
padding-left: auto;
padding-right: auto;
background-color: none;
Tjaa jaa det tror jeg. Det ved jeg ikke lige helt, men jeg sidder da og roder med det :)

I øjeblikket leger jeg med 2-3 sider med forskellige layouts. Hvilket er en blanding af succes of nederlag.

En af de ting jeg brugte MEGET tid på var at jeg lavede en div, og inde i den div lavede jeg en tabel, sat med width: 100%.
Problemet er at den løber udover divens sider. Hvilket er ekstremt fusterende :D

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Center usorteret liste

Indlæg af Daniel » 7. okt 2013, 21:33

Det er det sjove ved HTML og CSS, at alle ting tæller med som har en bredde, så en tabel der har nogle kanter (borders), skal have trukket de kanter fra i den samlede bredde, osv, osv, osv.
Det er hamrende irriterende når man arbejder med procent. :shock:

Besvar