Podstrony
- telcocafe
- [HTML] Logowanie do ftp poprzez pole tekstowe Jak zrobić logowanie do ftp poprzez pole
- [HTML] Zła pozycja obrazka tła w tabeli Zła pozycja obrazka tła w komórce tabeli
- Darmowe statystyki odslon banera dla strony .html Czy istnieja statystyki odslona banera n
- [html] Newsy i suwak - jak to zrobić? Jak zrobić suwak?
- [HTML] Miejsce pod formularzem Jak usunąć miejsce pod formularzem?
- [HTML] '*' == ?
- Usuwanie zbednych linijek kodu Program do usuwania linijek html
- [HTML] Formularz liczący punkty Coś w rodzaju testu liczącego punkty ;)
- [html] Polskie znaki Po wsadzeniu banera, zniknęły polskie znaki
- [html]W jakiej technice zrobić stronkę? Jestem grafikiem a chce zrobić stronkę....
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- szkoleniahr.opx.pl
telcocafe
Mam problem z "uciekającą stopką". Nie wiem z jakiego powodu albo się nie pojawia albo pojawia się w złym miejscu.Oto kod:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <link rel="stylesheet" href="styles.css" type="text/css" /> <title>Lorem ipsum</title> </head> <body> <div> <div class = "emptybar" /> <div class = "header"> <br /><br /> <h1>Lorem ipsum</h1> <span style="position: relative; right: 20px;"> dolor sit amet </span> </div> <div class = "weatherbar"> Lorem ipsum dolor sit amet </div> <div class = "content"> <div class = "leftmenu"> <h5>Lorem</h5> <a href = "#">ipsum</a><br /> <a href = "#">dolor</a><br /> <a href = "#">sit amet</a> <h5>Lorem</h5> <a href = "#">ipsum</a><br /> <h5>Lorem</h5> <a href = "#">ipsum</a><br /> <a href = "#">dolor</a><br /> <a href = "#">sit amet</a><br /> <br /> </div> <div class = "mainboard"> <br /> <h2>Witaj!</h2> Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? <br /> </div> <div class = "footer"> lorem ipsum </div> </div> </div> </body> </html>
styles.css
body { margin: 0 auto; text-align: center; } a{ color: #666; text-decoration: underline; } a:hover{ color: #83a848; text-decoration: underline; } h1{ color: #666; font-size: 30px; position: relative; right: 20px; } h2{ color: #666; font-size: 24px; border-bottom: 1px solid #83A848; padding-bottom: 2px; } h5{ position: relative; top: 13px; color: #666; font-size: 12px; border-bottom: 1px solid #666; padding-bottom: 1px; } .emptybar{ margin: 0 auto; width: 780px; background-color: #83A848; height: 20px; color: white; font-family: Tahoma; font-size: 12px; } .weatherbar{ position: relative; top: 10px; margin: 0 auto; width: 770px; background-color: #83A848; color: white; font-family: Tahoma; font-size: 12px; text-align: right; padding: 4px 5px; } .header{ position: relative; top: 20px; width: 780px; background-color: #EEEEEE; height: 170px; color: #666; font-family: Tahoma; text-align: right; } .content{ position: relative; top: 10px; width: 780px; background-color: #FFFFFF; color: #666; font-family: Tahoma; text-align: left; } .leftmenu{ position: absolute; top: 0px; padding: 0px 10px; width: 190px; background-color: #EEEEEE; } .mainboard{ position: absolute; top: 0px; bottom: 0px; left: 210px; width: 550px; padding: 0px 10px; background-color: #FFFFFF; } .footer{ position: absolute; bottom: 0px; margin-bottom: 0 auto; width: 780px; background-color: #666; color: white; }
W tym przypadku stopka pokrywa zielony pasek na treścią. Próbowałem już wielu zmian, ale za każdym razem stopka pojawia się albo tutaj, albo na samym dole strony, gdy div footer przeniosę poza div content. Jak zmienić tą stronę, aby stopka pojawiała się tuż pod treścią?
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <link rel="stylesheet" href="styles.css" type="text/css" /> <title>Lorem ipsum</title> </head> <body> <div> <div class = "emptybar" /> <div class = "header"> <br /><br /> <h1>Lorem ipsum</h1> <span style="position: relative; right: 20px;"> dolor sit amet </span> </div> <div class = "weatherbar"> Lorem ipsum dolor sit amet </div> <div class = "content"> <div class = "leftmenu"> <h5>Lorem</h5> <a href = "#">ipsum</a><br /> <a href = "#">dolor</a><br /> <a href = "#">sit amet</a> <h5>Lorem</h5> <a href = "#">ipsum</a><br /> <h5>Lorem</h5> <a href = "#">ipsum</a><br /> <a href = "#">dolor</a><br /> <a href = "#">sit amet</a><br /> <br /> </div> <div class = "mainboard"> <br /> <h2>Witaj!</h2> Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? Lorem ipsum i tak dalej, ale nie chce mi sie tego kopiować z neta, więc nie napisze, bo w sumie to po co by to tutaj pisać? <br /> </div> <div class="clear"></div> </div> <div class = "footer"> lorem ipsum </div> </div> </body> </html>
css
body { margin: 0 auto; text-align: center; } a{ color: #666; text-decoration: underline; } a:hover{ color: #83a848; text-decoration: underline; } h1{ color: #666; font-size: 30px; position: relative; right: 20px; } h2{ color: #666; font-size: 24px; border-bottom: 1px solid #83A848; padding-bottom: 2px; } h5{ position: relative; top: 13px; color: #666; font-size: 12px; border-bottom: 1px solid #666; padding-bottom: 1px; } .emptybar{ margin: 0 auto; width: 780px; background-color: #83A848; height: 20px; color: white; font-family: Tahoma; font-size: 12px; } .weatherbar{ margin: 0 auto; width: 770px; background-color: #83A848; color: white; font-family: Tahoma; font-size: 12px; text-align: right; padding: 4px 5px; } .header{ width: 780px; background-color: #EEEEEE; height: 170px; color: #666; font-family: Tahoma; text-align: right; } .content{ width: 780px; background-color: #FFFFFF; color: #666; font-family: Tahoma; text-align: left; } .leftmenu{ float: left; padding: 0px 10px; width: 190px; background-color: #EEEEEE; } .mainboard{ float: left; width: 550px; padding: 0px 10px; background-color: #FFFFFF; } .footer{ margin-bottom: 0 auto; width: 780px; background-color: #666; color: white; border: 2px solid; } .clear { clear: both; }
Za dużo pozycjonowania absolutnego.