Får ikke sentrert når jeg bruker float: left;

[Yankes]

Får ikke sentrert ting inni en div når jeg har float: left; på det som er i diven..

 

<div align="center" style="width: XXpx;text-align: center;">
<div style="float: left;">blabla</div> <div style="float: left;">blabla</div> o.s.v.
</div>

 

jeg har prøvd både text-align: center og align="center" som dere ser over der, men siden jeg har float: left; på underdivsene så blir de ikke sentrert, de holder seg helt til venstre..

 

Noen som har en løsning?

[Arve Systad]

Sjølvsagt blir dei ikkje senterert når du har gitt dei float: left;

 

margin: auto; sentererer blokkelement som DIV. Og fjern align="center" og float:left;.

 

Mulig eg misforstår, men teikn opp i paint e.l. korleis du vil ha det om dette ikkje fungerte.

[Yankes]

jeg har den div som går over hele siden! en tynn en..

og alt inni den skal være sentrert, MEN alle divsene som er inni der skal være på ÉN linje (derfor float: left;)

og alle de divene skal bli sentrert, men dette skjer ikke pga float: left;

 

så jeg har to muligheter, men vet ikke hvordan jeg kan løse noen av dem ..

 

1, finne en annen måte enn å bruke float: left; for å få flere divs på samme linje.

2, få alle divsene på linjen (med float: left;) til å bli sentrert.

 

Og btw Arve, align="center" og text-align: center o.s.v. var bare for å illustrere hva jeg har prøvd ut for å løse dette..

Endret 21. januar 2009 av YaNkEs

[Yankes]

Beklager, men tar heller en bump enn å opprette en ny tråd!

Endret 16. februar 2009 av YaNkEs

[FrodeNilsen]

text-align:center

 

http://www.w3.org/TR/CSS21/text.html#propdef-text-align

 

This property describes how inline content of a block is aligned.

 

http://www.w3.org/TR/CSS21/propidx.html

 

Default value:

a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'

 

Dette medfører at text-align skal tilordnes ett block element og gjelder kun på inline elementer som nøster direkte under dette.

 

Hvis du vil at nøstende block elementer skal arve text-align etter sitt foreldre element, så må barnet settes til text-align inherit.

 

text-align har ingen effekt på block elementer.

 

block elementer

 

Sentrering av block elementer gjøres med margin:auto eller andre varianter med å leke med marg. Det enkleste for deg vil være å benytte table-cell, men IE støtten suger. Alternativt kan du oppnå dette med containing-floats.

 

Jeg tviler på om du vil mestre nøstede floats, noe du egentlig har vist allerede. Trikset med nøstende floats er at en float i en float vil føre til at foreldre floaten ekspanderer etter barne floaten.

 

Hvis du ikke kun benytter floats, så må du kombinere nøstede floats med containing floats. Da må du lære deg begge deler.

 

Frode

[Yankes]

Takk for svar, men er dette vanskelig a?

 

løsningen jeg har brukt foreløpig er å bruke width på "barne-diven" som du kaller det..

 

<div style="width: 100%;margin: auto;">
<div style="width: XXpx;">
<div style="float: left;">bla bla bla</div> <div style="float: left;">bla bla bla</div> <div style="float: left;">bla bla bla</div>
</div>
</div>

 

Den ene diven med width: XXpx vil jeg egentlig fjerne, men da havner alle underdivsene helt til venstre (pga float: left;).

 

XX er så mye plass som alle underdivsene tar, så om jeg skal legge til noen divs o.s.v. så må jeg endre på den så den tilsvarer bredden på alle underdivsene.

 

Da får jeg det sentrert som jeg vil, men dette er ganske tungvindt.

[FrodeNilsen]

...

Da får jeg det sentrert som jeg vil, men dette er ganske tungvindt.

 

Det er mer "tungvindt" enn dette.

 

Containing floats

 

Du har nesten benyttet en variasjon av containing floats.

 

Først må du lage ett container element, noe du ikke har gjort. Dette oppnår du med å sette ett element til position relative eller block, i dette tilfellet relative. Det du da gjør, er å lage ett element som alle barn elementer forholder seg til, inkludert clear. Body er ett container element.

 

Du definerer bredden til container elementet, og setter side margene til auto. (Bredde 100% gir null marg, da elementet vil fylle foreldre elementet i bredden.) Hvis du ikke gir container elementet bredde, så får du bredde lik null hvis du bare har flytende barn. Har du ett ikke flytende barn, så vil dette definere bredden. Derfor må du definere bredden.

 

Du kan nå benytte elementer som flyter mot venster, høyre, og som ikke flyter.

 

Problemet i koden din, er at du ikke har forstått at container elementet ikke skalerer i høyden og bredden etter de flytende elementene. Det er selve kjernen i containing-floats. Du må derfor legge til ett siste element, helst en div, uten innhold eller barn. Denne setter du til ikke å flyte, og clear:both.

 

Dette elementet vil da kun klarere til høyre og venstre i container-elementet (ikke mot alt innholdet på hele siden), samt at den vil bli plassert under de flytende elementene dine. Dermed vil container elementet også skalere i høyden.

 

Oppsumering

 

container=position:relative (elementet blir dermed "containing element"), oppgi bredde

innholdsbokser=oppgi bredde, float, og eventuell marg.

tomt element på bunn=clear both (klarer da i henhold til "containing element")

 

Det hører til historien at CSS3 har definert elementer slik at du slipper det tomme elementet.

 

Dette er den mest utbredte måten å designe layout på. Dette er så komplisert det er å lage en layout om dagen. Alternativet er nøstede floats, noe de færreste vet hva er for noe engang, eller css-tabeller som ikke støttes av IE7.

 

Frode