Zaloguj się

zdzislavv · Liczba postów: 8 Liczba wątków: 2 Dołączył: 17-05-2009 Reputacja: 0

Witam serdecznie!
Właściwie to jest pierwsza stronka, którą samemu tworzę i mam pewien problem z rozjeżdżającą się stopką. Sprawdzam stronę w dwóch przeglądarkach - Internet Explorerze i Mozilli Firefoksie. O ile w IE jeszcze to jakoś działa, o tyle MF pokazuje stronę bardzo nieciekawie. A całość się i tak sypie, jeśli wydłużę tekst, czyli zamiast

Kod:
Tekst

napiszę

Kod:
Tekst <div> Tekst <div> Tekst

i tak jeszcze kilka razy. W załączniku umieściłem stronę (index.html i style.css). Proszę o jakieś sugestie, jak naprawić ten problem Big Grin

.

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Untitled Page</title>

    <style type="text/css">

    <!--

    @import url("css/style.css");

    -->

    </style>

<script type="text/javascript" language="JavaScript1.2" src="java\stm31.js"></script>

</head>

<body class="main_body">

<div id="tlo">

</div>

<div id="glowna" align="center"> <!--- wysrodkowanie calosci strony --->

    <div id="gora">

        <div id="logo">

        <img src="http://images40.fotosik.pl/121/9ed50a49145d1c5c.jpg">

        </div>

        <div id="logo2">

        <img src="http://images47.fotosik.pl/126/797f0f8ede178374.jpg">

        </div>

    </div>

    <div id="srodek">

        <div id="lewa">

            <div id="menu">

                <!--#include file="menu.html" -->

            </div>

        </div>

        <div id="prawa">

            <div id="o_firmie">

                <div id="o_firmie_txt">

                    <span class="font_o_firmie">

                        <img src="http://images49.fotosik.pl/125/6ccfd13999f6fcc0.gif"> <br>

                    </span>

                    <span class="font_o_firmie2">

                        Tekst.

                    </span>

                </div>

                <div id="o_firmie_img">

                    <img src="http://images50.fotosik.pl/125/bcf3b1be31f29f97.jpg">

                </div>

            </div>

            <div id="inf">

                <div id="inf_handl" class="font_inf_handl">

                    <img src="http://images40.fotosik.pl/121/d17d843a631dbe2c.gif"> <br><br>

                    Firma <strong>Jakastam</strong> <br>

                    Ulica Jakastam <br>

                    11-111 Gdziestam <br><br>

                    tel. (0-32) 111-11-11 <br>

                    fax 23242343243

                </div>

                <div id="inf_gosp" class="font_inf_gosp">

                    <img src="http://images47.fotosik.pl/126/da3103b3f550d6d6.gif"> <br>

                </div>

            </div>

        </div>

    </div> <!-- koniec div srodek -->

</div> <!-- koniec div glowna -->

<div id="dol" align="center">

    <div id="stopka" class="font_stopka" align="right">

        Na razie w stopce niczego nie ma. <br>

        <p>

            <a href="http://validator.w3.org/check?uri=referer">

                <img style="border: 0pt none ; width: 88px; height: 31px;" src="http://images50.fotosik.pl/125/2e8beab34b5e998c.png" alt="Valid HTML 4.01 Strict">

            </a>

            <a href="http://jigsaw.w3.org/css-validator/check/referer">

                <img style="border: 0pt none ; width: 88px; height: 31px;" src="http://images46.fotosik.pl/125/f6ae447524b5e389.png" alt="Poprawny CSS!">

            </a>

        </p>

    </div>

</div>

</body>

</html>

Kod:
.main_body {

    margin-top: 18px;

    margin-bottom: 60px;

    background-color: #009300;

}

#tlo {

    width: 100%;

    height: 135px;

    background: #00008B; /* kolor gornego podtla */

    position: absolute; /* absolute - wzgledna do main */

    top: 18px; /* top taki sam jak w .main_body */

    left: 0px;

}

#glowna {

    position: relative;

}

#gora {

    width: 902px; /* szerokosc calej gory */

    height: 139px;

    border: 1px solid #000000;

    background-color: #80FF80; /* kolor tla pod logiem */

}

#logo {

    float: left;

    padding-left: 2px;

    padding-top: 2px;

}

#logo2 {

    float: right;

    padding-right: 5px;

    padding-top: 5px;

}

#srodek {

    width: 902px;

    min-height: 310px; /* dobrac wartosc pod katem MF */

    height: auto;

    clear: both;

    background-color: #00E800;

    border-left: 1px solid #004000;

    border-right: 1px solid #004000;

    border-bottom: 1px solid #004000;

}

#lewa {

    float: left;

    width: 180px; /* szerokosc lewej kolumny */

    height: auto;

}

#menu {

    width: 180px; /* menu.width = lewa.width */

    height: auto;

    padding-top: 20px; /* margines gorny menu */

    padding-left: 10px; /* dodana opcja dla lewego marginesu */

    padding-bottom: 20px; /* czy dziala jako PRZYNAJMNIEJ (preferred) czy jako DOKLADNIE ? */

}

#prawa {

    float: right;

    width: 706px; /* szerokosc, pamietac, ze do prawej jest wyrownane 706px */

    height: auto;

    overflow: auto;

}

#o_firmie {

    width: 706px;

    height: 137px; /* wysokosc "o firmie" 197 */

    padding-top: 16px; /* margines gorny */

    text-align: left;

    min-height: 183px; /* dodalem ze wzgledu na Mozille Firefoksa */

}

#o_firmie_txt {

    float: left;

}

#o_firmie_img {

    float: right;

    padding-right: 21px;

}

#inf {

    padding-top: 10px;

}

#inf_handl {

    float: left;

    width: 50%;

    min-height: 211px;

    height: auto;

}

#inf_gosp {

    float: left; /* na lewo od sasiadujacego elementu !!! */

    width: 50%;

    min-height: 211px;

    height: auto;

}

#dol {

    position: absolute;

    width: 902px;

}

#stopka {

    float: right;

    padding-left: 5px;

    padding-top: 5px;

    padding-right: 5px;

}

Zaś struktura div-ów jest następująca:

Cytat:tlo
glowna
--- gora
--- --- logo
--- --- logo2
--- srodek
--- --- lewa
--- --- --- menu
--- --- prawa
--- --- --- o_firmie
--- --- --- inf
--- --- --- --- inf_handl
--- --- --- --- inf_gosp
dol
--- stopka

PS. Przy okazji może też zapytam - dlaczego  nie chce działać?
Pozdrawiam Smile

**dziamber** · 17-05-2009, 15:34

Spróbuj tak:

Kod:
<?php include "menu.html" ?>

zdzislavv · 17-05-2009, 16:12

Spróbowałem tak i niestety nie zadziałało. Poza tym chciałem uniknąć php, żeby mieć pewność, że nawet jakby serwer miał wyłączoną obsługę php, to działać będzie. Swoją drogą nie rozumiem też do końca tego zapisu, który wcześniej znalazłem . Wydawało mi się, że w taki sposób zaznacza się komentarze.

I najważniejsze: Wdzięczny byłbym, gdybyś mógł przynajmniej rzucić okiem na tę moją strukturę divów i na plik CSS. Może jest tam jakaś prosta rzecz, którą wypadałoby zmienić, bo strona cała się rozjeżdża (jest w załączniku, wystarczy rozpakować i uruchomić index.html). Z góry dzięki Smile

.

***Marcin*** · 18-05-2009, 19:52

Nie używaj position: absolute; o ile na prawdę nie musisz Wink

. W Twoim przypadku polecam zrobić tak:

Kod:
#dol {

width: 920px;

margin: 0 auto;

}

#stopka {    

text-align: center;

padding: 5px;

}

kanion · 18-05-2009, 22:59

(18-05-2009, 19:52)Marcin napisał(a): Nie używaj position: absolute; o ile na prawdę nie musisz . W Twoim przypadku polecam zrobić tak:

wogóle nie używaj position najlepiej uzywaj zamiast tego paddingów i marginów

Gruby767 · 21-05-2009, 02:29

dokładnie, ponieważ z position jeśli dajmy przykład na stronie z reklamami walną Ci więcej reklam niż przewidujesz strona Ci się cała rozwali. Oczywiście jeśli już musisz to.. w ostateczności

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