eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwCSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
Ilość wypowiedzi w tym wątku: 8

  • 1. Data: 2011-05-17 13:27:19
    Temat: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: "Robbo" <y...@m...com>

    Witam,

    Chciałem zrobić na stronie 3-kolumnowy layout, przy czym szerokość środkowej
    kolumny ma być zmienna, szerokości kolumn lewej i prawej mają być stałe, a
    ponadto zawartość środkowej kolumny ma być horyzontalnie wycentrowana.

    Gdy robię w sposób, jak przedstawiono poniżej, to nie jest dobrze. Zawartość
    środkowej kolumny nie jest wycentrowana w poziomie, ponadto tło kolumny
    obejmuje tylko napis, a nie całą kolumnę.
    Ilustracja graficzna poniższego kodu:
    http://img811.imageshack.us/img811/362/55532874.png

    <html>
    <head>
    <style type="text/css">
    .container {
    background-color: red;
    padding: 20px;
    text-align: center;
    }

    .left {
    position: relative;
    float: left;
    width: 200px;
    background-color: pink;
    }

    .center {
    position: relative;
    float: left;
    text-align: center;
    background-color: orange;
    }

    .right {
    position: relative;
    float: right;
    width: 200px;
    background-color: yellow;
    }

    .clear {
    clear: both;
    }
    </style>
    </head>

    <body>
    <div class="container">
    <div class="left">uu</div>
    <div class="right">cc</div>
    <div class="center">rr</div>
    <div class="clear"></div>
    </div>
    </body>
    </html>




    Wymyśliłem coś innego. Gry robię w sposób, jak zaprezentowany poniżej, to
    wygląda OK (właśnie taki efekt wizualnie chciałem uzyskać). Ale nie wiem,
    czy to jest sposób poprawny i najlepszy. Należy zauważyć, że kolumna
    środkowa tak naprawdę rozciąga się na całą szerokość containera, ale jest
    przykryta przez kolumny lewą i prawą. Proszę o pomoc, jak prawidłowo
    zrealizować to, o co mi chodzi.
    Ilustracja graficzna poniższego kodu:
    http://img815.imageshack.us/img815/7561/29696081.png

    <html>
    <head>
    <style type="text/css">
    .container {
    width: 650px;
    background-color: red;
    padding: 20px;
    text-align: center;
    }

    .left {
    position: relative;
    float: left;
    width: 200px;
    background-color: pink;
    z-index: 100;
    }

    .center {
    position: relative;

    text-align: center;
    background-color: orange;
    z-index: 99;
    }

    .right {
    position: relative;
    float: right;
    width: 200px;
    background-color: yellow;
    z-index: 100;
    }

    .clear {
    clear: both;
    }
    </style>
    </head>

    <body>
    <div class="container">
    <div class="left">uu</div>
    <div class="right">cc</div>
    <div class="center">rr</div>
    <div class="clear"></div>
    </div>
    </body>
    </html>


    Z góry dziękuję za pomoc.
    Robbo


  • 2. Data: 2011-05-17 13:44:54
    Temat: Re: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: sim_co <s...@g...pl>

    W dniu 2011-05-17 15:27, Robbo pisze:
    > Wymyśliłem coś innego. Gry robię w sposób, jak zaprezentowany poniżej,
    > to wygląda OK (właśnie taki efekt wizualnie chciałem uzyskać). Ale nie
    > wiem, czy to jest sposób poprawny i najlepszy. Należy zauważyć, że
    > kolumna środkowa tak naprawdę rozciąga się na całą szerokość containera,
    > ale jest przykryta przez kolumny lewą i prawą. Proszę o pomoc, jak
    > prawidłowo zrealizować to, o co mi chodzi.
    > Ilustracja graficzna poniższego kodu:
    > http://img815.imageshack.us/img815/7561/29696081.png

    Te z-indexy powywalaj - są moim daniem niepotrzebne, a dla kolumny
    .center pokombinuj z własnością display - jak dobrze pamiętam to przy
    display: table-cell treść z środkowej kolumny nie będzie się 'wylewała'
    na całą szerokość jeśli skończy się kolumna lewa lub prawa i przy
    ustawieniu określonej szerokości też powinna się 'zachowywać' dobrze.


  • 3. Data: 2011-05-18 07:53:26
    Temat: Re: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: beherit <b...@g...com>

    W dniu 2011-05-17 15:44, sim_co pisze:
    > W dniu 2011-05-17 15:27, Robbo pisze:
    >> Wymyśliłem coś innego. Gry robię w sposób, jak zaprezentowany poniżej,
    >> to wygląda OK (właśnie taki efekt wizualnie chciałem uzyskać). Ale nie
    >> wiem, czy to jest sposób poprawny i najlepszy. Należy zauważyć, że
    >> kolumna środkowa tak naprawdę rozciąga się na całą szerokość containera,
    >> ale jest przykryta przez kolumny lewą i prawą. Proszę o pomoc, jak
    >> prawidłowo zrealizować to, o co mi chodzi.
    >> Ilustracja graficzna poniższego kodu:
    >> http://img815.imageshack.us/img815/7561/29696081.png
    >
    > Te z-indexy powywalaj - są moim daniem niepotrzebne, a dla kolumny
    > .center pokombinuj z własnością display - jak dobrze pamiętam to przy
    > display: table-cell treść z środkowej kolumny nie będzie się 'wylewała'
    > na całą szerokość jeśli skończy się kolumna lewa lub prawa i przy
    > ustawieniu określonej szerokości też powinna się 'zachowywać' dobrze.
    >

    można też kombinować tak:
    .dleft i .dright { margin odpowiednio right i left z - }
    .dcenter { padding left i right wynikający z marginów .dright i .dleft}
    .dcenter { width na 100% czy ile tam chcesz :) }

    zawsze ten zapis mi się nie podobał, ale może się Tobie przydać.

    pozdr,
    p.
    /robię w: http://www.teleit.pl


  • 4. Data: 2011-05-18 10:16:19
    Temat: Re: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: Paweł Piskorz <n...@p...nie?>

    On 2011-05-18 09:53, beherit wrote:
    > można też kombinować tak:
    > .dleft i .dright { margin odpowiednio right i left z - }
    > .dcenter { padding left i right wynikający z marginów .dright i .dleft}
    > .dcenter { width na 100% czy ile tam chcesz :) }

    Jak ustawi width:100% i padding, to .dcenter będzie za szerokie o ten
    padding.


    --
    message[autor="PablO"]::after {
    content:"Pozdrawiam";
    }


  • 5. Data: 2011-05-18 10:21:36
    Temat: Re: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: Paweł Piskorz <n...@p...nie?>

    On 2011-05-17 15:27, Robbo wrote:
    > Chciałem zrobić na stronie 3-kolumnowy layout, przy czym szerokość
    > środkowej kolumny ma być zmienna, szerokości kolumn lewej i prawej mają
    > być stałe, a ponadto zawartość środkowej kolumny ma być horyzontalnie
    > wycentrowana.

    http://www.bing.com/search?q=css+3+column+layout


    --
    message[autor="PablO"]::after {
    content:"Pozdrawiam";
    }


  • 6. Data: 2011-05-18 11:28:11
    Temat: Re: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: the_foe <t...@w...pl>

    W dniu 2011-05-17 15:27, Robbo pisze:
    >
    > Chciałem zrobić na stronie 3-kolumnowy layout, przy czym szerokość
    > środkowej kolumny ma być zmienna, szerokości kolumn lewej i prawej mają
    > być stałe, a ponadto zawartość środkowej kolumny ma być horyzontalnie
    > wycentrowana.

    <body>
    <div class="container">
    <div
    style='background-color:blue;width:200px;position:re
    lative;float:left;z-index:1;'>left</div>
    <div
    style='background-color:green;float:left;position:ab
    solute;left:200px;right:200px;z-index:2'>center</div
    >
    <div
    style='background-color:red;position:relative;width:
    200px;float:right;z-index:3;'>right</div>
    </div>
    </body>

    --
    the_foe


  • 7. Data: 2011-05-19 12:30:33
    Temat: Re: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: beherit <b...@g...com>

    W dniu 2011-05-18 12:16, Paweł Piskorz pisze:
    > On 2011-05-18 09:53, beherit wrote:
    >> można też kombinować tak:
    >> .dleft i .dright { margin odpowiednio right i left z - }
    >> .dcenter { padding left i right wynikający z marginów .dright i .dleft}
    >> .dcenter { width na 100% czy ile tam chcesz :) }
    Jak ustawi width:100% i padding, to .dcenter będzie za szerokie o ten
    padding. >

    Słusznie. No tak myślałem o czym innym.
    .wrapper na 100% lub odpowiednią wartość + margin 0 auto (bo chyba autor
    chcial wycentrowac);
    .dcenter na auto a że div blockowy jest to powinno przejść.

    pozdr,p.


  • 8. Data: 2011-05-22 11:52:10
    Temat: Re: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: "Robbo" <y...@m...com>

    > zawsze ten zapis mi się nie podobał, ale może się Tobie przydać.

    CSS jest jak komunizm -- bohatersko rozwiązuje problemy, które sam stwarza
    :)

    R.

strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: