Zaloguj się

inos · 23-11-2008, 20:36

Witam

Mam taki problem nad ktorym juz siedze z 3 dni i niestety to co wyszukalem na necie tzn. teoretyczne rozwiazanie mojego problemu nie skutkuje:/

Chce wypozycjonowac 3 elementy obok siebie i pod tym wszystkim wstawic stopke... Udalo mi sie to uzyskac za pomoca float ale niestety stopka nie jest na dole strony tylko zlewa sie z tabelkami :/ Jesli usune float to tabelki zamiast na srodku sa jedna pod druga... probowalem wypozycjonowac to za pomoca marginesow ale gdy dodaje cos do bocznej tabelki srodkowa przesowa sie na dol - zamiast pozostac na gorze:/

zaczynam swoja przygode z php ale najpierwchce stworzyc "szkielet" strony zeby pozniej umieszczac w nim php;-)

ponizej daje kody do strony i css :

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Tytuł strony</title>

<link rel="stylesheet" href="test.css" type="text/css" />

</head>

<body>

<div class="obramowanie">

    <div class="logo">

    logo

    </div>

    <div class="logo_menu">logo_menu

    </div>

</div>

<div class="obramowanie">

tu maja sie znajdowac bloki : lewy, srodek i prawy

    <div class="lewa_strona">

        <div class="naglowekl">naglowek

        </div>

        <div class="kolumnal">

        lewa kolumna

        </div>

        <div class="naglowekl">naglowek

        </div>

        <div class="kolumnal">

        lewa kolumna

        </div>

                <div class="naglowekl">naglowek

        </div>

        <div class="kolumnal">

        lewa kolumna

        </div>

        <div class="naglowekl">naglowek

        </div>

        <div class="kolumnal">

        lewa kolumna

        </div>

        <div class="naglowekl">naglowek

        </div>

        <div class="kolumnal">

        lewa kolumna

        </div>

        <div class="naglowekl">naglowek

        </div>

        <div class="kolumnal">

        lewa kolumna

        </div>

    </div>

    <div class="srodek">

    srodek

    </div>

    <div class="prawa_strona">

        <div class="naglowekp">naglowek

        </div>

            <div class="kolumnap">prawa kolumna

            </div>

        <div class="naglowekp">naglowek

        </div>

            <div class="kolumnap">prawa kolumna

            </div>

        <div class="naglowekp">naglowek

        </div>

            <div class="kolumnap">prawa kolumna

            </div>

    </div>

</div>

    <div class="stopka">

        stopka

    </div>

</body>

</html>

Kod:
BODY

    {

    text-align: center;    /*centruje caly tekst na dokumencie*/

    font: 10px;    /*czcionka dokumentu-napisow*/

    }

A:link                /*musza byc te 3 link, active i visited*/

    {

    color: #444444;        /*color linka*/

    text-decoration: none;    /*link bez podkreslenia*/

    }

A:active                /*aktywny*/

    {

    color: #444444;        /*color linka*/

    text-decoration: none;    /*link bez podkreslenia*/

    }

A:visited            /*odwiedzony*/

    {

    color: #444444;        /*color linka*/

    text-decoration: none;    /*link bez podkreslenia*/

    }

.obramowanie

    {

border: 1px solid #888888;

    width: 90%;            /*szerokosc*/

    height: auto;            /*wysokosc*/

    margin: auto auto;

    margin-top: 2%;

    }

.logo

    {

    height: 10%;

    text-align: right;

    border-top: 1px solid #888888;    /* obramowanie*/

    background-color: #DDDDED;        /*kolor tego elementu (wypelnienie tego bloku)*/

    color: #444444;                /*kolor tekstu*/

    font-size: 12px;            /*rozmiar czcionki*/

    padding: 3px 10px;            /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/

    }

.logo_menu

    {

    text-align: right;

    height: 2%;

    border: 1px solid #888888;    /* obramowanie*/

    background-color: #DDDDED;        /*kolor tego elementu (wypelnienie tego bloku)*/

    color: #444444;                /*kolor tekstu*/

    font-size: 12px;            /*rozmiar czcionki*/

    padding: 3px 10px;            /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/

    margin: 0px 0px 0px 0px;

    }

.lewa_strona

    {

border: 1px solid #888888;

    width: 15%;            /*szerokosc*/

    height: auto;            /*wysokosc*/    

    float: left;

    }

.prawa_strona

    {

border: 1px solid #888888;

    width: 15%;        /*szerokosc*/

    height: auto;             /*wysokosc*/

    float: right;

    } 

.naglowekl

    {

    width: 60%;            /*szerokosc*/

    height: 2%;            /*wysokosc*/    

    text-align: center;

    border: 1px solid #888888;    /* obramowanie ale bez dolnego paska*/

    background-color: #DDDDED;        /*kolor tego elementu (wypelnienie tego bloku)*/

    color: #444444;                /*kolor tekstu*/

    font-size: 12px;            /*rozmiar czcionki*/

    padding: 3px 10px;            /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/

    }

.kolumnal

    {

    width: 60%;            /*szerokosc*/

    height: 15%;            /*wysokosc*/    

    text-align: left;

    border: 1px solid #888888;     /* obramowanie ale bez dolnego paska*/

    background-color: #DDDDED;        /*kolor tego elementu (wypelnienie tego bloku)*/

    color: #444444;                /*kolor tekstu*/

    font-size: 12px;            /*rozmiar czcionki*/

    padding: 3px 10px;            /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/

    margin-bottom: 20%;

    }

.naglowekp

    {

    width: 60%;            /*szerokosc*/

    height: 2%;            /*wysokosc*/    

    text-align: center;

    border: 1px solid #888888;    /* obramowanie ale bez dolnego paska*/

    background-color: #DDDDED;        /*kolor tego elementu (wypelnienie tego bloku)*/

    color: #444444;                /*kolor tekstu*/

    font-size: 12px;            /*rozmiar czcionki*/

    padding: 3px 10px;            /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/

    float: right;    

    }

.kolumnap

    {

    width: 60%;            /*szerokosc*/

    height: 20%;            /*wysokosc*/    

    text-align: left;

    border: 1px solid #888888;     /* obramowanie ale bez dolnego paska*/

    background-color: #DDDDED;        /*kolor tego elementu (wypelnienie tego bloku)*/

    color: #444444;                /*kolor tekstu*/

    font-size: 12px;            /*rozmiar czcionki*/

    padding: 3px 10px;            /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/

    margin-bottom: 35%;

    float: right;

    }

.srodek

    {

    width: 59%;            /*szerokosc*/

    height: 76%;    

    text-align: justify;            /*wyjustowanie tekstu*/

    border: 1px solid #888888;

    background-color: #EEEEEE;        /*kolor tego elementu (wypelnienie tego bloku)*/

    font-size: 10px;            /*rozmiar czcionki*/

    color: #555555;                /*kolor tekstu*/

    margin-right: 20%;

    margin-left: 20%;

    /*float: left;*/            

    /*padding: 10px 10px 25px 10px;    */    /*odstep od gory 10 dolu 25 i pawej-lewej 10 do tekstu*/

    }

.stopka

    {

    text-align: right;

    height: 2%;

    border: 1px solid #888888;        /* obramowanie ale bez gornego paska*/

    background-color: #E9E9E9;        /*kolor tego elementu (wypelnienie tego bloku)*/

    color: #444444;                /*kolor tekstu*/

    font-size: 10px;            /*rozmiar czcionki*/

    padding: 3px 10px;            /*odstep od gory-dolu 3 i pawej-lewej 10 do tekstu*/        

    margin-bottom: 0%;

margin-top: 2%;

    }

z gory dzieki za pomoc bo ja juz nie mam pomyslow:/

Pozdrawiam

Jupiter · 23-11-2008, 20:43

Wyślij jakiegoś screen'a! U mnie wygląda tak
http://upload.programik.net/view.php?file_id=6

inos · 23-11-2008, 20:51

hehe no u mnie to inaczej widac ;-)

dam dwa screeny bo na jednym sie nie zmiescilo ;-)

fotki sa w zalaczniku;-)

dzieki za zainteresowanie:-)

Jupiter · 23-11-2008, 21:03

Rozwiązaniem może być

Kod:
clear:both;

dodane do .stopka

inos · 23-11-2008, 22:12

Szorstki · 06-12-2008, 00:08

Pozwolę sobie podłączyć się pod temat, także związany z pozycjonowaniem. Wewnątrz 1 DIVa znajdują się dwa inne, niestety ten 1 główny mimo że ma wys na auto jest krótszy niż wewnętrzne- w efekciewyjeżdżają poza tło(wygląda to tak, jakby tło nie było dla nich rysowane). Oto kod:

Kod:
<div id="zewnetrzny">

  <div class="pierwszy"><p><span>1 wewnetrzny div lezy po prawej i jest wypelniony jakas trescia</span></p></div>

  <div id="drugi">

                <h1><span>Witam serdecznie</span></h1>

                <p><span>jakas tresc, ktora jest po lewej i tez cos w nim jest</span></p>

            </div>

        </div>

CSS:

Kod:
#zewnetrzny {

    color: #000;

    font-size: 12px;

    font-family: Verdana;

    background: url(img/body.gif) repeat-y;

    position: relative;

    width: 800px;

    height: auto;

    }

#pierwszy {

    float: right;

    width: 150px;

    position: relative;

    clear: right;

    display: auto;

    }

#drugi{

    float: left;

    margin-left: 50px;

    width: 450px;

    }

IE wyświetla to tak jak chcę, problem jest w operze... wer.9.62. ff nie używam, więc nie wiem jak to widzi.

pRzemo · 06-12-2008, 00:48

Wielu już się z tym borykało i wiele jest rozwiązań na ten problem. Ja stosuje taki myk:
CSS:

Kod:
.clear {

    clear:both;

}

HTML:

Kod:
<div id="zewnetrzny">

  <div class="pierwszy"><p><span>1 wewnetrzny div lezy po prawej i jest wypelniony jakas trescia</span></p></div>

  <div class="drugi">

                <h1><span>Witam serdecznie</span></h1>

                <p><span>jakas tresc, ktora jest po lewej i tez cos w nim jest</span></p>

  </div>

  <div class="clear"></div>

</div>

Na sam koniecd "zewnętrznego" diva wklejasz pusty div czyszczący.
Powinno zadziałać Smile

Szorstki · 06-12-2008, 00:54

Nie pomyślałem o dodatkowym divie, dzięki Smile

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie