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
- gawitanowice.opx.pl
telcocafe
Witamchcę żeby div #grass był zawsze przy dolnej krawędzi ekranu.
poradziłem sobie z tym w taki sposób:
#grass { position: absolute; bottom: 0px; background: url(images/grass.gif) repeat-x; height: 112px; width: 100%; z-index: 1; }
wszystko jest niby dobrze, jednak gdy strona jest 'dłuższa' (ma scrolla) to ten element jest umiejscowiony w taki sposób:
http://img363.images...e=helpmebn7.jpg
U mnie działa, gdy dasz position: relative; :)
Użytkownik Tomek92 edytował ten post 27 sierpień 2008, 13:51
a u mnie jest u góry wtedy ;/
#grass { position: relative; bottom: 0px; background: url(images/grass.gif) repeat-x; height: 112px; width: 100%; z-index: 1; }
Może lepiej daj kod strony, bo nie wiem jaki jest u Ciebie układ.
A teraz 2. sposób, u mnie też działający(ale u Ciebie może nie działać bo możesz mieć jakiś inny układ):
padding-bottom: 0px; (to przy position: absolute)
position: fixed; bottom: 0;ew. http://kurs.browseha...akPositionFixed
;)
Użytkownik DJ_ProG edytował ten post 27 sierpień 2008, 16:54
IE7 - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> na początku przed <HTML>
IE6 - W body 2 DIV-y: jeden twój (#grass) drugi z zawartością, przykładowo #content. Kod:
HEAD:
<style type='text/css'>@import 'style.css';</style> <!--[if lte IE 6]> <link href="style.css" rel="stylesheet" type="text/css"> <![endif]-->
style.css:
body { margin: 0; padding: 1em 1em 1em 14em; color: #000; background: #fff; } div#grass { position: absolute; bottom: 0; background: url(images/grass.gif) repeat-x; height: 112px; width: 100%; z-index: 1; } @media screen { div#grass { position: fixed; } * html { overflow-y: hidden; } * html body { overflow-y: auto; height: 100%; padding: 0 1em 0 14em; font-size: 100%; } * html div#grass { position: absolute; } }
Powinno działać.
A teraz 2. sposób, u mnie też działający(ale u Ciebie może nie działać bo możesz mieć jakiś inny układ):
padding-bottom: 0px; (to przy position: absolute)
nie działa
IE7 - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> na początku przed <HTML>
IE6 - W body 2 DIV-y: jeden twój (#grass) drugi z zawartością, przykładowo #content. Kod:
[...]
Powinno działać.
efekt jest taki sam jak na początku :(
daję kod źródłowy strony:
index:
<!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> <title>Przedszkole "Przyjaciół Książki" w Sierakowie</title> <style type='text/css'>@import 'style.css';</style> <!--[if lte IE 6]> <link href="style.css" rel="stylesheet" type="text/css"> <![endif]--> <meta http-equiv="Content-Language" content="pl" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="grass"> </div> <div id="clouds"> </div> <div id="content"> <div id="topImage"> <img src="images/owl.gif" id="owl" /> <div id="header"> </div> <div class="pasek"> </div> <br /><br /><br /> </div> </div> </body> </html>
style.css
body { background: url(images/bageGrandient.jpg) #E5F1FF repeat-x; position:relative; top: 0; left: 0; margin: 0; } #grass { position: absolute; bottom: 0; background: url(images/grass.gif) repeat-x; height: 112px; width: 100%; z-index: 1; } #clouds { position: absolute; top: 0px; background: url(images/clouds.gif) no-repeat; height: 243px; width: 100%; z-index: 1; } #content { position: relative; width: 750px; padding: 0; margin: 0 auto; margin-top: 65px; margin-bottom: 65px; background: url(images/contentbg.gif); z-index: 15; overflow: hidden; } #owl { float: left; margin-left: 15px; margin-top: 15px; } #header { float: left; margin-left: 15px; margin-top: 15px; background: url(images/header.gif) no-repeat; height: 122px; width: 440px; } #topImage { background: url(images/topimage.png) no-repeat; width: 100%; } .pasek { background: url(images/pasek.gif) no-repeat; height: 44px; width: 688px; margin: 0 auto; clear: both; }
link: http://87.199.35.20/przedszkole
Użytkownik PiKey edytował ten post 27 sierpień 2008, 18:12
IE7 - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> na początku przed <HTML>
Ucz go dobrze, jak już uczysz! I dawaj mu odpowiedzi zgodne z zaleceniami. Doctype Transitional jest aby ludzie którym się nie chce korzystali z syfu który już normalnie nie powinien być obsługiwany. Obecnie, wg zaleceń W3C powinno się używać doktype strickt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Chyba że coś się nie zgadza, to mnie popraw.
Wlasnie przy strict w IE 7 nie dziala!
nie ma żadnej różnicy (w ff dobrze, w ie6 trawa odchodzi w prawo)
Użytkownik PiKey edytował ten post 29 sierpień 2008, 07:23