Re: Zawartość diva zawsze na środku - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › Zawartość diva zawsze na środku › Re: Zawartość diva zawsze na środku

Path: news-archive.icm.edu.pl!news.gazeta.pl!not-for-mail
From: hazet <h...@n...pl>
Newsgroups: pl.comp.www
Subject: Re: Zawartość diva zawsze na środku
Date: Wed, 12 Aug 2009 15:48:06 +0200
Organization: "Portal Gazeta.pl -> http://www.gazeta.pl"
Lines: 90
Message-ID: <h5uh6k$cjl$1@inews.gazeta.pl>
References: <h5u1dh$rv6$1@inews.gazeta.pl>
<b...@w...googlegroups.com>
<h5ue1f$rgv$1@inews.gazeta.pl>
<f...@o...googlegroups.com>
NNTP-Posting-Host: static-ip-77-89-75-190.promax.media.pl
Mime-Version: 1.0
Content-Type: text/plain; charset=ISO-8859-2; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: inews.gazeta.pl 1250084884 12917 77.89.75.190 (12 Aug 2009 13:48:04 GMT)
X-Complaints-To: u...@a...pl
NNTP-Posting-Date: Wed, 12 Aug 2009 13:48:04 +0000 (UTC)
X-User: vitar91
X-Antivirus: avast! (VPS 090811-0, 2009-08-11), Outbound message
In-Reply-To: <f...@o...googlegroups.com>
X-Antivirus-Status: Clean
User-Agent: Thunderbird 2.0.0.22 (Windows/20090605)
Xref: news-archive.icm.edu.pl pl.comp.www:393312
[ ukryj nagłówki ]
Pushman pisze:
> On 12 Sie, 14:54, hazet <h...@n...pl> wrote:
>> Pushman pisze:
>>
>>
>>
>>> On 12 Sie, 11:18, hazet <h...@n...pl> wrote:
>>>> Witam. Jest sobie div wewnątrz którego są linki z display: block z
>>>> określonym wymiarem, , dlatego układają się obok siebie. Liczba linków
>>>> jest zmienna, może być ich 5 a może też 20. Co zrobić aby zawartość tego
>>>> diva (linki) były zawsze na środku ?
>>>> <div><a href="1"></a><a href="2"></a>...</div>
>>>> Podobny problem mam czasami z listą.
>>>> Jak wyśrodkować zmienną ilość blokowych li o określonych wymiarach
>>> Czy te linki przypadkiem nie mają tez float:left? Chyba nie ma mowy,
>>> żeby ułożyły się obok siebie bez tego.
>>> W każdym razie rozwiązanie dla listy wygląda tak:
>>> ul {
>>> float: left;
>>> position: relative;
>>> left: 50%;
>>> }
>>> ul > li {
>>> float: left;
>>> position: relative;
>>> right: 50%;
>>> }
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>> <html xmlns="http://www.w3.org/1999/xhtml">
>> <head>
>> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
>> <title>Untitled Document</title>
>>
>> <style type="text/css">
>>
>> body {width: 800px; background: #FF6600; margin: 0 auto;}
>> div {position: relative; left: 50%;}
>> div > a {float: left; width: 100px; background: #009900; position:
>> relative; right: 50%; }
>>
>> </style>
>> </head>
>>
>> <body>
>> <div>
>> <a href="1">jeden</a> <a href="1">jeden</a>
>> </div>
>>
>> </body>
>> </html>
>>
>> Wyświetla się suwa poziomy, jak jest mniej elementów jak wyżej, to 'a'
>> nie jest wyśrodkowane
>
> Daj divowi float: left. Z body możesz też usunąć width: 800px, bo to
> nic nie daje. Bardzo przydatny jest też wrapper. Ogólnie powinno być:
> <style type="text/css">
> body {background: #FF6600; margin: 0 auto;}
> #wrapper {border: 1px solid lime; overflow: hidden; width: 800px;}
> #wrapper div {float: left; position: relative; left: 50%;}
> div a {float: left; width: 100px; background: #009900; position:
> relative; right: 50%; }
> </style>
> </head>
>
> <body>
> <div id="wrapper">
> <div>
> <a href="1">jeden</a> <a href="1">jeden</a>
> </div>
> </div>
> </body>
> </html>
>
> problem suwaka rozwiązuje overflow:hidden
>
>> ta , a ten selektor dziecka działa W IE6/7 ?
> Nie działa w 6, ale może być normalny selektor potomka, żaden problem.

wrapper nie jest potrzebny ;) body też można nadać wymiary i wyśrodkować.

body {width: 1000px; background: #FF6600; margin: 0 auto; border: 1px
solid;}
div {float: left; position: relative; left: 50%; margin-top: 100px;}
div a {float: left; width: 100px; position: relative; right: 50%; }

dzięki za sposób