Forum PHP.pl > [HTML]Problem z układem na trzy kolumny

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML]Problem z układem na trzy kolumny

kosa351

15.10.2009, 20:34:08

Witam,
znajomy ma jakieś zaliczenie i poprosił mnie, aby stworzyć mu prostą stronkę. Coś tam z tego dziamie, ale ostatni raz bawiłem się w z rok temu, więc wyrocznią na temat htmla i css'a nie jestem :rolleyes:
Mam pewien problem z trzecią kolumną. Strona mniej więcej wygląda tak jak na screenie.

Jak jest zaznaczone chciałbym przenieść trzecią kolumnę do góry, ale nie mam pojęcia teraz jak.

Proszę o w miarę szybką poradę. Mam czas do jutra rana, a trzeba się jeszcze wyspać do pracy. Pozdrawiam

Wstawiam kod strony i css'a.

Kod

<body>
        <div id="main">

            <div class="header">
            </div>

            <div class="search">

            </div>

            <div class="left_menu">
            <ul>
                <li><img src="images/top_linki.gif" /></li>
                <li><img src="images/empty.gif" /></li>
                <li><img src="images/slownik.gif" /></li>
                <li><img src="images/aktualnosci.gif" /></li>
                <li><img src="images/pytania.gif" /></li>
                <li><img src="images/odpowiedzi.gif" /></li>
                <li><img src="images/sonda.gif" /></li>
            </ul>
            <img src="images/koncowka.gif" />
            </div>

            <div class="text">
                <p>gdsgds</p>
            </div>

            <div class="text_prawa">
                <img src="images/panel_central.gif" />
            </div>

        </div>

    </body>

Kod

*    {
    padding: 0;
    margin: 0;
    }

img {
    border:0px;
    }

body {
    height:auto;
    background-image:url(images/background.gif);
    font-family:Verdana, Geneva, sans-serif;
    }

#main {
    width:800px;
    margin:18px auto;
    padding:8px;
    }

.header {
    background-image:url(images/top.jpg);
    width:800px;
    height:112px;
    }

.search {
    background-image:url(images/search.jpg);
    height:41px;
        }

.left_menu {
    float:left;
        }

.left_menu ul {
    padding-left:0px;
    padding-top:0px;
        }

.left_menu li {
    display: block;
    list-style:none;
    line-height:0px;
    margin:0px;
    padding:0px;
        }

.text {
    padding-left:20px;
    margin-left:209px;
    background-repeat:no-repeat;
    width:450px;
    height:774px;
    background-image:url(images/text_area.gif);
    }

.text_prawa    {
    float:right;
    }

athei

15.10.2009, 20:44:08

Mogłeś jakoś pooznaczać divy (tło, border), napisać o które chodzi + wrzucić stronę na serwer.

kosa351

15.10.2009, 20:51:50

można podejrzeć http://test.adamusiak.com/test/
chodzi aby text_prawa był jako trzecia kolumna w postaci wylistowania (tak samo jak div left_menu), ale żeby zaczynał się od góry strony.

athei

15.10.2009, 21:05:17

Dla
left_menu float:left i width:209px,
dla text wyrzuć margin-left, daj float:left i width:450px
dla text_prawa float:left i też jakąś szerokość

kosa351

15.10.2009, 21:24:38

Dzięki za rady, ale niestety nadal pasek jest nie dopasowany do prawej strony (nowy kod http://test.adamusiak.com/test/)

Aktualny css

Kod

*    {
    padding: 0;
    margin: 0;
    }

img {
    border:0px;
    }

body {
    height:auto;
    background-image:url(images/background.gif);
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    }

#main {
    width:800px;
    margin:18px auto;
    padding:8px;
    }

.header {
    background-image:url(images/top.jpg);
    width:800px;
    height:112px;
    }

.search {
    background-image:url(images/search.jpg);
    height:41px;
        }

.left_menu {
    float:left;
    width:209px;
        }

.left_menu ul {
    padding-left:0px;
    padding-top:0px;
        }

.left_menu li {
    display: block;
    list-style:none;
    line-height:0px;
    margin:0px;
    padding:0px;
        }

.text {
    padding-top:10px;
    padding-left:8px;
    float:left;
    width:450px;
    height:774px;
    background-repeat:no-repeat;
    background-image:url(images/text_area.gif);
    }

.text_prawa    {
    float:left;
    width:141px;
    }

.text_prawa ul    {
    padding-left:0px;
    padding-top:0px;
    }

.text_prawa li {
    display:block;
    list-style:none;
    line-height:0px;
    margin:0px;
    padding:0px;
    }

athei

15.10.2009, 21:28:07

Szerokość text zmień na 442, albo zmniejsz padding-left, dla main daj overflow:hidden;

kosa351

15.10.2009, 21:34:33

Dzięki Ci dobry człowieku

Śmiga http://test.adamusiak.com/test/

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.