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 napiszę 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 
.
Zaś struktura div-ów jest następująca:
PS. Przy okazji może też zapytam - dlaczego <!--#include file="menu.html" --> nie chce działać?
Pozdrawiam
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:
TekstKod:
Tekst <div> Tekst <div> Tekst.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 <!--#include file="menu.html" --> nie chce działać?
Pozdrawiam
