centrowanie div

[daniio]

Witam

Mój problem jest następujący

mam element div i w nim kolejny div. Szerokość tego w środku jest dopasowana do jego zawartości. Chciałbym teraz tego div-a w środku wycentrować. Daję mu margin-left: auto i dla roght to samo i nie działa. Czemu?

Trochę kodu

html:

Kod:

        <div id="pasek_gora">
            <div id="przyciski_menu_gora">
                <img src="Grafika/p.png" alt="p">
                <img src="Grafika/p.png" alt="p">
                <img src="Grafika/p.png" alt="p">
            </div>
        </div>

css:

Kod:

#pasek_gora
{
    background: url('Grafika/tlo.jpg');
    width: 800px;
    height: 50px;
}

#przyciski_menu_gora
{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

[Kartofelek]

bo nie ma czegoś takiego jak rought
daj mu wyświetlanie display:inline-block i wtedy margin:0 auto;
Normalnie DIV ma 100% szerokości bo jest elementem blokowym (jeżeli mu jej nie ustawisz na sztywno). Display inline-block ma szerokość taką jaką ma jego content
Oczywiście najlepiej dać coś takiego:

Kod:

display:inline-block;
*display:inline; /* ie7 ect */
margin: 0 auto;

Tak naprawdę to taki element możesz równie dobrze centrować przez text-align:center elementu rodzica.

[daniio]

Dzięki za podpowiedź :] A o co chodzi z tym rough? I jeszcze bym prosił o wyjaśnienie. Przeczytałem, że aby div miał szerokość dopasowaną do content należy albo dać mu position: absolute(co też zrobiłem) albo ustawić mu float. I rzeczywiście szerokość mojego wewnętrznego diva jest dopasowana do content. W takim razie dlaczego nie chce się centrować?

[_perlik]

http://riddle.jogger.pl/2006/04/19/wszystko-co-chcesz-wiedziec-o-centrowaniu-w-css/

[daniio]

Szczerze powiedziawszy wiedza podana na tej stronie jest mi znana. Być może nie potrafię jej wykorzystać ale nadal nie rozumiem czemu to nie działa. Wytłumaczy mi to ktoś?

[_perlik]

Aby wycentrować diva w divie musisz obu nadać na stałe ustaloną szerokość w np. px. Czyli w twoim przypadku "#pasek_gora" ma width: 800px; - spoko. Do "#przyciski_menu_gora" musisz też dopisać jakąś szerokość.

A więc CSS będzie wyglądał np. tak:

Kod:

#pasek_gora{
    background: gray;
    width: 800px;
    height: 50px;
}

#przyciski_menu_gora {
    background: red;
    width: 100px;
    margin: 0 auto;
}

Jak byk jest to napisane w tutorialu do którego link Ci podesłałem:

Każdy element blokowy bez ustawionej szerokości zajmuje 100% wolnego miejsca na stronie. Dlatego wycentrowanie go jest tylko możliwe, jeśli ograniczymy jego zapędy terytorialne - musimy ustawić mu szerokość.

Idąc dalej...

Elementy liniowe jakimi są obrazki (<img />) możesz centrować tak jak tekst, czyli nadając elementowi który je zawiera w CSS text-align: center;

Co jest również opisane w tutorialu:

Pierwszy sposób opiera się na domyślnym wyświetlaniu liniowym każdego <img/> - wystarczy dodać klasę akapitowi, który jest pojemnikiem dla obrazka i ustawić text-align na center.

Czyli Twój CSS będzie w tym przypadku taki:

Kod:

#pasek_gora{
    background: gray;
    width: 800px;
    height: 50px;
}

#przyciski_menu_gora {
    text-align: center;
}

Kolejnym sposobem jest zamienienie liniowych elementów jakim są obrazki na elementy blokowe. Potem należy je wycentrować tak jak div-y (to też el. blokowe) czyli przez margin:0 auto;

Kod:

#pasek_gora{
    background: gray;
    width: 800px;
    height: 50px;
}

#przyciski_menu_gora img {
    display: block;
    margin: 0 auto;
}

Jest to kiepski pomysł jak masz więcej niż 1 obrazek. Czemu? Dlatego, że po każdym elemencie blokowym następuje "załamanie linii" i kolejny element blokowy jest ustawiany pod poprzednim tj. jeden pod drugim.

Polecam czytać powoli i ze zrozumieniem. Ponoć przydaje się to teraz na maturze z polskiego

[daniio]

Dzięki za wyczerpującą odpowiedź. Oczywiście problem jest już rozwiązany, aczkolwiek co do czytania ze zrozumieniem to nie byłbym taki pewny co do tej uwagi. Osobom doświadczonym jest trochę ciężko zrozumieć, że dla osoby uczącej się załóżmy od podstaw, wyrażenie:

musimy ustawić mu szerokość

w tym kontekście wcale nie jest takie jasne.

Dlatego wycentrowanie go jest tylko możliwe, jeśli ograniczymy jego zapędy terytorialne

Tak jak napisałem ustawienie position: absolute ogranicza zapędy terytorialne diva do jego zawartości(czyli tutaj można założyć, że ustala mu pewną szerokość), a mimo tego centrowanie nie działa. Ja wiem, że większość osób tworzące strony kieruje się mottem

Tak powinno być bo tak działa

Ja do nich nie należę i chciałbym to zrozumieć dlaczego tak jest. Ewentualnie prosiłbym odnośnik do jakiegoś źródła, które w sposób jednoznaczny jest rozwiązaniem mojego problemu.

Ps. Oczywiście mówię o pierwszym sposobie opisanym w linku.
Pozdrawiam

[Kartofelek]

Nie. Pozycjonowanie absolutne nie ustala jego zapędów terytorialnych. Do tego służą overflow:hidden i wymiary (width, height).

Podstawy:

Strona zbudowana jest z części - zwanych często "blokami" (nie mówię tutaj o div, ale o prostokątnych "częściach" siatki z której każda strona jest zrobiona - np nagłówek, jakaś belka boczna, stopka ect, linki w stopce, logo, guziczek ect).

Najczęściej używane są 3 typy takich części: blokowe, inline i inline-block.

Blokowe - zajmują DOMYŚLNIE całą szerkość. Można im nadać wymiary. I właściwie tyle

Inline - zamują DOMYŚLNIE tyle ile zajmuje ich wnętrze. Domyślnie też leżą obok siebie (jak nazwa wskazuje) w poziomej linii. Najlepszym przykładem może być np słowo czy podobna mała rzecz.
Takim elementom domyślnie nie można nadać wymiarów

Inline-block - są połączeniem obydwu powyższych. Czyli leżą domyślnie obok siebie, ale można im spokojnie nadawać wymiary, paddingi itp

To oczywiście ich domyślne zachowanie, bo stylując możesz to totalnie pozmieniać. Ale chodzi o semantykę czyli np głupim pomysłem jest umieszczanie w spanie np h1 itp.




Teraz dochodzi stylowanie.

Jeżeli dasz elementowi blokowemu float, to zacznie on "unosić się" - czyli albo poleci na lewo albo na prawo. Ma to wpływ na położenie innych elementów. Oczywiście na inne typy działa to tak samo. Jeżeli jeden element lata, wtedy żeby inneustawiły się obok niego muszą mieć także latanie do tej strony. Jeżeli któryś element ma już nie latać, wtedy dajemy clear:strona (left, right, both);

Jeżeli dla bloku dasz position:absolute wyrwiesz go totalnie z siatki strony i już nic a nic nie będzie on wpływał na inne elementy. Absolute działa do pierwszego nadrzędnego elementu który ma pozycjonowanie relatywne. Jeżeli takiego nie ma to działa dla strony.

Kod:

<div position:relative> <-- do tego bedzie działać absolute
<div>
<div position:absolute></div>
</div>
</div>

Reszta jest opisana w przytaczanych tutaj setki razy tutorialach. Poszukaj w google: html tutorial helion czy html browsehappy. Wiem że te kursy nie są idealne, ale w sumie ciężko znaleźć coś innego. Reszta to już nauka, praktyka i praktyka. Z czasem łapie się doświadczenie i zaczyna bawić się tym całym kodem jakby był zabawkami