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.rmf.pl!agh.edu.pl!news.agh.edu.pl!news.onet.pl!new
s.nask.pl!news.nask.org.pl!newsfeed00.sul.t-online.de!t-online.de!border2.nntp.
dca.giganews.com!nntp.giganews.com!postnews.google.com!o32g2000yqm.googlegroups
.com!not-for-mail
From: Pushman <p...@g...com>
Newsgroups: pl.comp.www
Subject: Re: Zawartość diva zawsze na środku
Date: Wed, 12 Aug 2009 06:36:50 -0700 (PDT)
Organization: http://groups.google.com
Lines: 92
Message-ID: <f...@o...googlegroups.com>
References: <h5u1dh$rv6$1@inews.gazeta.pl>
<b...@w...googlegroups.com>
<h5ue1f$rgv$1@inews.gazeta.pl>
NNTP-Posting-Host: 77.253.172.45
Mime-Version: 1.0
Content-Type: text/plain; charset=ISO-8859-2
Content-Transfer-Encoding: quoted-printable
X-Trace: posting.google.com 1250084210 31812 127.0.0.1 (12 Aug 2009 13:36:50 GMT)
X-Complaints-To: g...@g...com
NNTP-Posting-Date: Wed, 12 Aug 2009 13:36:50 +0000 (UTC)
Complaints-To: g...@g...com
Injection-Info: o32g2000yqm.googlegroups.com; posting-host=77.253.172.45;
posting-account=XLUpXQoAAADu0oHjV_JTusV0iZnkJTRj
User-Agent: G2/1.0
X-HTTP-UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.2)
Gecko/20090729 Firefox/3.5.2,gzip(gfe),gzip(gfe)
Xref: news-archive.icm.edu.pl pl.comp.www:393311
[ ukryj nagłówki ]
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.