Hvordan sentrere siden med CSS?

[qualbeen]

dette funket utrolig dårlig, sikkert fordi menyen til venstre er "fixed"

kan noen se på koden?

 

folk.ntnu.no/fredrile

7522912[/snapback]

Har sett på hovedsiden, og jeg vil tro det er css'en som ødelegger litt ja. (http://folk.ntnu.no/fredrile/stil1.css) Kildekoden (html-biten av sida) har jeg lite å utsette på, men du har en </div> for mye helt nederst (eventuelt er den feilplassert).

 

Hva skjer om du fjerner position:fixed fra css? Når jeg lager sider, bruker jeg så og si aldri position:et-eller-annet, fordi jeg synes det er enklere uten å angi noe. Til gjengjeld bruker jeg mye width/height og float:left|right|none.

 

Tips: for å se hvor på siden en div havner, kan det være smart å legge til border:1px #000 dotted;, på den måten får man en ramme rundt div'en.

 

Trenger hjelp med det samme jeg, jeg skjønnte ikke helt den dead center...?

7523700[/snapback]

Ok, skal forklare tankegangen fra den siden:

The cyan box 'horizon' is positioned absolutely 50% from the top of the page, is 100% wide and has a nominal height of 1px. Its overflow is set to 'visible'.

Den vannrette streken du ser på dead center er en div hvis alt annet innhold ligger inni. Div'en har de kalt "horizon" elller noe i den duren. Men hverken horisontal eller vertikal sentrering er på plass ennå, så det man gjør er å ha en ny div (content), som har margin:-50 auto 0 auto;, hvor tallet 50 er halvparten av høyden til div'en (du må altså spesifisere height også).

 

Utdrag av kode (utestet)

Klikk for å se/fjerne innholdet nedenfor

#horizon{
 	position: absolute;
 	top: 50%;
 	left: 0px;
 	width: 100%;
  height: 1px;
 	overflow: visible;
}
#content{
 /* masse rart */
 margin:-50px auto 0 auto;
}

<div id="horizon"><div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et nisi quis sem faucibus nonummy. Nullam accumsan, purus eu posuere cursus, erat lectus congue enim, sed eleifend nibh urna et augue. Integer velit. Sed turpis magna, congue et, dignissim quis, lobortis a, enim. Nullam molestie libero nec justo. Suspendisse pede. Fusce non leo quis enim tempus ornare. Quisque ut mi. Nulla feugiat. Quisque aliquam luctus libero. Suspendisse quis nulla. Etiam bibendum odio sit amet metus. In nisl ligula, scelerisque non, convallis nonummy, mollis quis, odio. Pellentesque bibendum tellus et risus. Ut in sem vitae dui mattis vestibulum. Sed feugiat tellus sit amet velit tristique accumsan. Integer sapien mauris, pellentesque in, sollicitudin vitae, molestie et, risus. Maecenas eu ipsum.
</div></div>

Endret 18. desember 2006 av qualbeen