Skocz do zawartości

[CSS] Stopka na spodzie

blelok

Przez blelok
w HTML i CSS

Rekomendowane odpowiedzi

blelok Newbie

blelok

Opublikowano
Opublikowano

Witam wszystkich forumowiczów:). Mam pewien problem ze stronką. Oto kody. Niżej opis problemu.

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Strona</title>
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<body>

<div id="GLOWNY">
<div id="NAGLOWEK">Nagłówek</div>

<div id="MENU">

<ul>

<li><a href="#">Pozycja menu</a></li>
<li><a href="#">Pozycja menu</a></li>
<li><a href="#">Pozycja menu</a></li>
<li><a href="#">Pozycja menu</a></li>
<li><a href="#">Pozycja menu</a></li>
<li><a href="#">Pozycja menu</a></li>
<li><a href="#">Pozycja menu</a></li>
<li><a href="#">Pozycja menu</a></li>

</ul>

</div>

<div id="TRESC">

<h2>DUZO TEKSTU </h2>
<h3>DUZO TEKSTU</h3>
<h4>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
DUZO TEKSTU  <br>
</h4>

</div>

<div id="STOPKA">Treść stopki</div>

</div>

</body>
</html>

css:

html, body {

margin: 0;
padding: 0;
background: #f0f0f0 url(12.jpg);
color: black;
font-family: "Avant Garde Gothic Medium", Verdana, Helvetica, sans-serif;
height:100%;
}

h2
{
font-family: "Avant Garde Gothic Medium", Verdana, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
color: #b12d01;
}

h3
{
font-family: "Avant Garde Gothic Medium", Verdana, Helvetica, sans-serif;
font-size: 10pt;
font-weight:bold"
}

h4
{
font-family: "Avant Garde Gothic Medium", Verdana, Helvetica, sans-serif;
font-size: 10pt;
font-weight:normal;
}

a {
color: black;
text-decoration: underline;
}

a:hover {
color: red;
text-decoration: none;
font-family: "Avant Garde Gothic Medium", Verdana, Helvetica, sans-serif;
}

img
{
margin:auto;
border-width:0px;
}

#GLOWNY {

background: #ffffaa url(tlooo.jpg) no-repeat;

width: 778px;
min-height: 100%;

height:100%;



margin: 0 auto 0 auto;
padding: 0 0 0 0;

border-left: 2px solid black;
border-right: 2px solid black;


}

#NAGLOWEK
{
background-color: #888;
text-align: center;

height:80px;

font-size: 40pt;
font-weight: bold;
padding: 10px 0 20px 0;

border-top: 2px solid black;
}

#MENU {
width: 150px;
float: left;
overflow: hidden;
text-align: center;
background-color: #ccc;
padding: 10px 0 10px 0;
}

#TRESC {
width: 588px;

overflow: hidden;
text-align:justify;
background: lime;
padding: 0 20px 0 20px;
}


#STOPKA {
clear: both;
width: 768px;

background-color: pink;
text-align:right;

font-size: 8pt;

padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;

position: absolute;
bottom: 0;

border-bottom: 2px solid black;
}




ul, ul li {
font-size: 10pt;
display: block;
list-style: none;
margin: 0;
padding: 0;
}

ul {
width: 150px;
padding: 0;
background-color: transparent;

}

ul a:link, ul a:visited {
display: block;
width: 150px;
text-decoration: none;
padding-top:5px;
padding-bottom:5px;
font-weight: bold;
background: transparent;
color: black;

}

ul a:hover {
width: 150px;
background-color: #444444;
color: #eeeeee;

}

Problem polega na nieprawidłowym wyświetlaniu diva STOPKA przy niskim oknie przeglądarki. Jeśli okno przeglądarki jest tak niskie, że nie mieści się w nim cały div TRESC (albo MENU w zależności który większy), to STOPKA nachodzi na MENU/TREŚĆ jednocześnie zmieniając wysokość GLOWNY. Moim zamiarem jest aby GLOWNY był wielkości okna lub większy a STOPKA zawsze była na spodzie diva GLOWNY. Co powinienem poprawić??

Może topornie tłumaczę, ale jak odpalicie tą stronkę to pojmiecie w czym rzecz:)

Odnośnik do komentarza
Udostępnij na innych stronach
mrtn Newbie

mrtn

Opublikowano
Opublikowano

position: absolute - wyrzuć

Clear:both - poczytaj

a najlepiej na przykładach:

www.neuroticweb.com/recursos/2-columns-layout/

https://www.code-sucks.com/css%20layouts/

https://www.dynamicdrive.com/style/layouts/category/C9/

https://maxdesign.com.au/presentation/page_layouts/

itd

Odnośnik do komentarza
Udostępnij na innych stronach
blelok Newbie

blelok

Opublikowano
  • Autor
Opublikowano
position: absolute - wyrzuć

No ok. Wyrzuciłem. Jak również bottom: 0; które bez absoluta raczej nie ma sensu. Tyle, że teraz strona wygląda nie tak jak chciałem. Chodziło mi o to, że jeżeli div GLOWNY jest mniejszy od okna to zajmuje całe okno a STOPKA jest na samym dole tego diva. Teraz tak nie jest.

Clear:both - poczytaj

Co dokładnie jest nie tak w clear: both;?? Jeśli tego nie użyję to STOPKA wchodzi mi pod samą TRESC a nie pod TRESC i MENU (jeśli MENU jest wyższe od TREŚĆ). Mogę dać clear: left ale czy to robi różnicę? (w jedynym z podawanych przez ciebie przykładów było właśnie clear: left;

Przykłady bardzo ładne i fajne, ale żaden z nich nie był taki jak ja chcę tzn właśnie, żeby GLOWNY był wysokości strony a STOPKA była dokładnie na samym dole. Jest jeszcze taka ewentualność, że zamiast mieszać ze stopką zwiększy się jakoś w odpowiedni sposób wysokość MENU lub TRESC ale nie za bardzo wiem jak:(

Problem rozwiązany rozwiązanie znajduje się tu: klik

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności