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

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

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 10

1. Data: 2009-08-12 09:18:42
Temat: Zawartość diva zawsze na środku
Od: hazet <h...@n...pl>

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

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2009-08-12 09:52:42
Temat: Re: Zawartość diva zawsze na środku
Od: Pushman <p...@g...com>

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%;
}

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2009-08-12 11:27:40
Temat: Re: Zawartość diva zawsze na środku
Od: hazet <h...@n...pl>

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%;
> }

ta , a ten selektor dziecka działa W IE6/7 ?

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2009-08-12 12:24:14
Temat: Re: Zawartość diva zawsze na środku
Od: hazet <h...@n...pl>

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%;
> }

sprawdziłem, niestety ten sposób nie działa, lista nie jest na środku

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2009-08-12 12:54:09
Temat: Re: Zawartość diva zawsze na środku
Od: hazet <h...@n...pl>

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

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2009-08-12 12:56:16
Temat: Re: Zawartość diva zawsze na środku
Od: Pushman <p...@g...com>

On 12 Sie, 14:24, 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%;
> > }
>
> sprawdziłem, niestety ten sposób nie działa, lista nie jest na środku

Musi działać (ew. mogłem coś źle wpisać -- idea jest dobra, może ustaw
marginy i paddingi na 0).
Najprostszy przykład: http://wklej.org/id/133979/
Kompletne wytłumaczenie:
http://matthewjamestaylor.com/blog/beautiful-css-cen
tered-menus-no-hacks-full-cross-browser-support

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2009-08-12 13:30:06
Temat: Re: Zawartość diva zawsze na środku
Od: hazet <h...@n...pl>

Pushman pisze:
> On 12 Sie, 14:24, 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%;
>>> }
>> sprawdziłem, niestety ten sposób nie działa, lista nie jest na środku
>
> Musi działać (ew. mogłem coś źle wpisać -- idea jest dobra, może ustaw
> marginy i paddingi na 0).
> Najprostszy przykład: http://wklej.org/id/133979/
> Kompletne wytłumaczenie:
> http://matthewjamestaylor.com/blog/beautiful-css-cen
tered-menus-no-hacks-full-cross-browser-support

tylko jak to ma działać w IE6 ? tam gdzie potrzebuje

[ pokaż wiadomość z nagłówkami ]

do góry
8. Data: 2009-08-12 13:36:50
Temat: Re: Zawartość diva zawsze na środku
Od: Pushman <p...@g...com>

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.

[ pokaż wiadomość z nagłówkami ]

do góry
9. Data: 2009-08-12 13:48:06
Temat: Re: Zawartość diva zawsze na środku
Od: hazet <h...@n...pl>

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

[ pokaż wiadomość z nagłówkami ]

do góry
10. Data: 2009-08-12 16:36:33
Temat: Re: Zawartość diva zawsze na środku
Od: Paweł Piskorz <n...@p...nie?>

Pushman pisze:
> 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%;
> }

Ech, człowiek się męczy z display:table; i expression dla badzIEwia, a
tu takie proste rozwiązanie. Starość nie radość :(

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

[ pokaż wiadomość z nagłówkami ]

do góry