|
(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
|
03. 09. 2008. | #1 |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
Div čija se dužina prilagođava rezoluciji?
Pozdrav.
Na stranici imam footer koji u vecini slucajeva bi trebao da ima fiksnu dužinu od 60px. Ta većina slučajeva je kada je ukupna dužina stranice veća od rezolucije monitora. Medjutim, ponekad stranica nije duža (manje teksta i fotografija) od rezolucije monitora (čak i na nekim standardnim rezolucijama, a pogotovo na velikim). Meni je potrebno da se taj footer produži do rezolucije monitora. Footer je u div-u. Rješeno sve preko CSS-a. Ja sam pokusao sam min-height i widht: auto, ali ne ide. Da li se iko susretao sa slicnim problemom? Unaprijed hvala na pomoci. Pozdrav, mb |
03. 09. 2008. | #2 |
novi član
Na probnom radu
Datum učlanjenja: 16.07.2008
Poruke: 17
Hvala: 1
0 "Hvala" u 0 poruka
|
Ako sam te dobro razumio, kada kazes duzina mislis na height, to mi nekako ima najvise smisla
Ako je tako onda bi ovaj kod trebao biti rjesenje tvog problema: HTML kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body { margin: 0; padding: 0; } </style> <script language="javascript"> function getWindowHeight() { var windowHeight=0; if (typeof(window.innerHeight)=='number') { windowHeight=window.innerHeight; } else { if (document.documentElement&&document.documentElement.clientHeight) { windowHeight=document.documentElement.clientHeight; } else { if (document.body&&document.body.clientHeight) { windowHeight=document.body.clientHeight; } } } return windowHeight; } function setFooter() { if (document.getElementById) { var windowHeight=getWindowHeight(); if (windowHeight>0) { var contentHeight=document.getElementById('sadrzaj').offsetHeight; var footerElement=document.getElementById('futer'); var footerHeight=footerElement.offsetHeight; if (windowHeight-(contentHeight+footerHeight)>=0) { footerElement.style.height=(windowHeight-contentHeight)+'px'; } else { footerElement.style.height='60px'; } } } } window.onload = function() { setFooter(); } window.onresize = function() { setFooter(); } </script> </head> <body> <div id="sadrzaj" style="background: #bbb; height: 600px;">sadrzaj</div> <div id="futer" style="background: #999; height: 60px;">futer</div> </body> </html> Uglavnom, izracuna se visina prozora i ako je veca od sadrzaja onda poveca div za id-om futer tako da div#futer zauzme prostor do kraja prozora. Inace u div#sadrzaj moraces da stavis cijeli gornji dio strane ili ako imas vise divova onda ce biti potrebna manja prerada funkcije setFooter(). Ako teba javi, nije problem. Ovo bi trebalo da radi u svim browserima (FF, IE, Op, Saf). Pozdrav |
04. 09. 2008. | #3 |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
Damjan, hvala.
Ovo mi se cini kao moguce rješenje. Imam vise div-ova (nije upitanu samo #sadrzaj). Vise mi se dopada ideja da se preradi JS, nego da trpam sve u jedan div. Pokusacu sam to da uradim, pa se javim ako bude problema. Jos jednom hvala. |
04. 09. 2008. | #4 |
profesionalac
Qualified
Datum učlanjenja: 06.09.2007
Lokacija: Zrenjanin
Poruke: 109
Hvala: 21
11 "Hvala" u 11 poruka
|
ovo smo radili kolega i ja
http://www.noformat.com/clients/e2pbs/design.html imas zalepljen div dole i to drvo koje se seta sa promenom rezolucije. Sve je bez skripta, js je koristen samo za iskljucivanje pojedinih delova za manje rezolucije (trazili da radi pod 800x600) |
04. 09. 2008. | #5 | |
novi član
Na probnom radu
Datum učlanjenja: 16.07.2008
Poruke: 17
Hvala: 1
0 "Hvala" u 0 poruka
|
Citat:
HTML kôd:
position: absolute; bottom: 0; A i postoji mogucnost da ti futer prekrije sadrzaj iznad, kao sto se to i desava na tvom sajtu (futer ti prekrije elemente sa desne strane). Tj ne pojavljuje se skrol na prozoru browsera (testirano u ff i ie). Moguce rijesnje je u paddingu ili marginama, ali sad nemam vremena da se pozabavim sa tim. Pozdrav |
|
04. 09. 2008. | #6 |
emperor Selassie
Grand Master
|
Za rešavanje tih gluposti iz IE < 7 možete koristiti IE7 { css2: auto; }
http://code.google.com/p/ie7-js/ Ja sam ga koristio na par sajtova i sve se vidi u IE6 (skoro) isto kao u FF/Opera/IE7 |
"Hvala" Nemanja Avramović za poruku: |
10. 09. 2008. | #7 |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
Tek sam sada stigao da probam implementirati ovo rješenje.
Rješenje savršeno radi ono sto meni treba. Ako ima vise divova dovoljno je da se saberu u varijabli contentHeight. Kôd:
var contentHeight=document.getElementById('header').offsetHeight+document.getElementById('sadrzaj').offsetHeight; Jos jednom hvala na pomoći i svima koji su uzeli učešća u diskusiji. Pozdrav, mb_sa |
11. 09. 2008. | #8 |
A suicide bomber!
Certified
|
treba izbegavati js resenje kada to isto moze da se uradi pomocu css-a:
Kôd:
#footer { position: fixed; width: 100%; height: 35px; bottom: 0; left: 0; } * html #footer { position: absolute; }
__________________
jQuery addict! |
11. 09. 2008. | #9 | |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
Citat:
|
|
11. 09. 2008. | #10 |
A suicide bomber!
Certified
|
aha, sad sam procitao ponovo, tebi onda treba ovo:
Kôd:
<div id="page"> .... ovde sadrzaj strane (header + content) <div id="footer-placeholder"></div> </div> <div id="footer"> </div> Kôd:
html, body { height: 100%; } #page { min-height: 100%; position: relative; } #footer-placeholder { width: 100%; height: 60px; /* visina footera */ } #footer { width: 100%; height: 60px; margin-top: -60px; } ali vidise poenta napraviti sadrzaj (znaci heder + content) da bude visine 100%, footer staviti ispod toga i onda ga izvuci na gore...
__________________
jQuery addict! |
|
|
Slične teme | ||||
Tema | Početna poruka teme | Forum | Odgovori | Poslednja poruka |
Facebook "Like" Dugme - prilagođavanja | marijano | Web aplikacije, web servisi i software | 4 | 22. 03. 2011. 21:30 |