+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: problem z rozjeżdżającą się stopką (/thread-problem-z-rozjezdzajaca-sie-stopka)
problem z rozjeżdżającą się stopką - zdzislavv - 17-05-2009
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:
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
RE: problem z rozjeżdżającą się stopką - dziamber - 17-05-2009
Spróbuj tak:
Kod:
<?php include "menu.html" ?>RE: problem z rozjeżdżającą się stopką - zdzislavv - 17-05-2009
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 <!--#include file="menu.html" -->. 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
.
RE: problem z rozjeżdżającą się stopką - Marcin - 18-05-2009
Nie używaj position: absolute; o ile na prawdę nie musisz
. W Twoim przypadku polecam zrobić tak:Kod:
#dol {
width: 920px;
margin: 0 auto;
}
#stopka {
text-align: center;
padding: 5px;
}RE: problem z rozjeżdżającą się stopką - kanion - 18-05-2009
(18-05-2009, 19:52)Marcin napisał(a): Nie używaj position: absolute; o ile na prawdę nie musisz
wogóle nie używaj position najlepiej uzywaj zamiast tego paddingów i marginów
RE: problem z rozjeżdżającą się stopką - Gruby767 - 21-05-2009
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