Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML]Problem z układem na trzy kolumny
kosa351
post 15.10.2009, 20:34:08
Post #1





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 21.12.2007

Ostrzeżenie: (0%)
-----

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;
    }
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
athei
post 15.10.2009, 20:44:08
Post #2





Grupa: Zarejestrowani
Postów: 389
Pomógł: 141
Dołączył: 11.04.2009

Ostrzeżenie: (0%)
-----

Mogłeś jakoś pooznaczać divy (tło, border), napisać o które chodzi + wrzucić stronę na serwer.
Go to the top of the page
+Quote Post
kosa351
post 15.10.2009, 20:51:50
Post #3





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 21.12.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
athei
post 15.10.2009, 21:05:17
Post #4





Grupa: Zarejestrowani
Postów: 389
Pomógł: 141
Dołączył: 11.04.2009

Ostrzeżenie: (0%)
-----

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ść
Go to the top of the page
+Quote Post
kosa351
post 15.10.2009, 21:24:38
Post #5





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 21.12.2007

Ostrzeżenie: (0%)
-----

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;
    }
Go to the top of the page
+Quote Post
athei
post 15.10.2009, 21:28:07
Post #6





Grupa: Zarejestrowani
Postów: 389
Pomógł: 141
Dołączył: 11.04.2009

Ostrzeżenie: (0%)
-----

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

Ten post edytował athei 15.10.2009, 21:32:40
Go to the top of the page
+Quote Post
kosa351
post 15.10.2009, 21:34:33
Post #7





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 21.12.2007

Ostrzeżenie: (0%)
-----

Dzięki Ci dobry człowieku czarodziej.gif Śmiga http://test.adamusiak.com/test/

Ten post edytował kosa351 15.10.2009, 21:34:51
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 13:03
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn