-
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.
do góry
ATAL Symbioza w Gdyni już w sprzedaży
