eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.pl › Grupy › pl.comp.www › CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny › CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
następny post »
  • Data: 2011-05-17 13:27:19
    Temat: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
    Od: "Robbo" <y...@m...com> szukaj wiadomości tego autora
    [ pokaż wszystkie nagłówki ]

    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

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj

następny post »

Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Grupy

Szukaj w grupach

Polecamy

Ranking lokat i kont oszczędnościowych. Przegląd możliwości dostępnych w sierpniu 2025

Ranking lokat i kont oszczędnościowych. Przegląd możliwości dostępnych w sierpniu 2025

Jak mierzyć i oceniać skuteczność mailingu. 5 najważniejszych wskaźników

Jak mierzyć i oceniać skuteczność mailingu. 5 najważniejszych wskaźników

Przelew zagraniczny - jaką opcję wybrać?

Przelew zagraniczny - jaką opcję wybrać?

Artykuły promowane

Ulga B+R 2024/2025. Kto może skorzystać?

Ulga B+R 2024/2025. Kto może skorzystać?

Prawo drogowe - jakie zmiany w 2025 roku?

Jaki podatek od nieruchomości w 2025 roku?

newsletter rss

Eksperci egospodarka.pl

1 1 1

Najnowsze w serwisie

Wyjazd do pracy w Holandii: na jakie zarobki i benefity mogą liczyć Polacy?

Wyjazd do pracy w Holandii: na jakie zarobki i benefity mogą liczyć Polacy?

Toyota Aygo X Hybrid: co oferuje nowy miejski crossover?

Toyota Aygo X Hybrid: co oferuje nowy miejski crossover?

Firmy inwestują w AI i... automatyzują przestarzałe procesy

Firmy inwestują w AI i... automatyzują przestarzałe procesy

Zmiany podatkowe od 2026 r.: ulga mieszkaniowa i IP BOX po nowemu, ryczałt 17% dla świadczeń na rzecz spółki

Zmiany podatkowe od 2026 r.: ulga mieszkaniowa i IP BOX po nowemu, ryczałt 17% dla świadczeń na rzecz spółki

Zamknięcie granicy z Białorusią na 14 dni - konsekwencje dla gospodarki i biznesu

Zamknięcie granicy z Białorusią na 14 dni - konsekwencje dla gospodarki i biznesu

Miliardy w budżecie z podatku katastralnego - ile zapłacą właściciele mieszkań?

Miliardy w budżecie z podatku katastralnego - ile zapłacą właściciele mieszkań?

Rewolucja na rynku pracy: inspektor PIP zdecyduje w trybie natychmiastowym o zamianie umowy zlecenie na etat

Rewolucja na rynku pracy: inspektor PIP zdecyduje w trybie natychmiastowym o zamianie umowy zlecenie na etat

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: