Avatar billede matfri Nybegynder
15. februar 2012 - 14:22 Der er 7 kommentarer

3 kolonne Layout med fixed sider

Hej,

hvordan laver jeg et div layout med tre kolonner, hvor hver af de yderste er fikseret?

Eksempel som dette site: http://conversations.nokia.com/2011/09/08/microsoft-apps-are-coming-to-symbian/
Avatar billede pstidsen Novice
15. februar 2012 - 15:36 #1
fikseret?
Avatar billede olebole Juniormester
15. februar 2012 - 16:54 #2
<ole>

Du bruger position:fixed på de yderste kollonner

/mvh
</bole>
Avatar billede olebole Juniormester
15. februar 2012 - 17:56 #3
Prøv noget i stil med:

<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 800px;
    margin: 0 auto;
    background: #f0f0f0;
}
#content {
    width: 560px;
    margin: 0 120px;
    display: inline-block;
    background: yellow;
}
#leftBar {
    position: fixed;
    width: 100px;
    display: inline-block;
    background: green;
}
#rightBar {
    position: fixed;
    width: 100px;
    margin-left: -100px;
    display: inline-block;
    background: blue;
}
</style>

- og den tilhørende HTML:

<div id="wrapper">
    <div id="leftBar">Left
        <div style="height:400px">Indhold</div>
    </div>
    <div id="content">Content
        <div style="height:1000px">Indhold</div>
    </div>
    <div id="rightBar">Right
        <div style="height:400px">Indhold</div>
    </div>
</div>
Avatar billede matfri Nybegynder
15. februar 2012 - 22:38 #4
Af en eller anden grund så vises den højre kolonne(blå) ikke. Det ser ellers rigtigt ud...
Avatar billede olebole Juniormester
16. februar 2012 - 15:21 #5
Hmmm ... ja, jeg kan godt se, Chrome og Safari skodder med den kode. IE, Firefox og Opera viser den som forventet. I skrivende stund har jeg ikke en forklaring. Det kan være, jeg får kikket på det lidt senere
Avatar billede pstidsen Novice
16. februar 2012 - 15:49 #6
er koden valid ifølge W3?
Avatar billede olebole Juniormester
16. februar 2012 - 16:13 #7
#6 >> Ja
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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