(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
|
14. 03. 2013. | #1 |
član
Certified
Datum učlanjenja: 06.09.2012
Poruke: 64
Hvala: 0
342 "Hvala" u 10 poruka
|
HTML i Google Chrome
Pravim jedan sajt gde su sirina i visina u procentima, ne mogu nikako da definisem visinu u procentima, u body definisem poseban div koji ce biti telo sajta, sirinu stavim 100%, a visinu ne mogu u procentima nece da prihvati mogu samo u pikselima.
Ovo je kod koji sam stavio u CSS #telosajta { top:auto; margin:auto; position:relative; width:80%; height:1000px; } kako da realizujem visinu u %. Drugi problem: Kad sam stavio slike da budu height i wide 100% Internet Explore, Mozilla, Opera prikazuju normalno sliku kako sam ih definisao sa marginama, ali Google Chrome ih totalno skroz rasiri i izmeni ceo izgled kod je: <img src="slike/LOGO.png" title="logo" width="100%" height="100%"> a kad stavim: <img src="slike/LOGO.png" title="logo"> prikazuje u sva cetiri browsera normalno. Slika je u posebnom div sa definisanom klasom. |
15. 03. 2013. | #2 |
član
Certified
Datum učlanjenja: 30.01.2009
Poruke: 77
Hvala: 15
16 "Hvala" u 11 poruka
|
Ne mozes definisati visinu u procentima, jer je odredjena kolicinom sadrzaja. Sta hoces da uradis? Ako je zbog futera, i hoces da ga drzis uvek dole, a ne na pola (ako imas sadrzaja u visini polovine ekrana), za to ima resenja. Nisam siguran da li se zove sticky footer, ili slicno i da li ti taj metod odgovara, ali moze se lako naci, pa proguglaj.
A slikama nema potrebe da dodajes procente. Ako hoces bolje da ih kontrolises, koristi max-width da ne prelaze content deo. |
16. 03. 2013. | #3 |
Душан Бошкић
Qualified
|
Quirks, Standard Compliance mode i Doc Types ...
Quirks mode:
Kôd:
<html> <head> <style> #telosajta { top: auto; margin: auto; position: relative; width: 80%; height: 100%; } div div { border: 1px solid #000; float: left; width: 8%; margin: 0 1% 0 0; } .div10 { height: 10%; } .div20 { height: 20%; } .div30 { height: 30%; } .div40 { height: 40%; } .div50 { height: 50%; } .div60 { height: 60%; } .div70 { height: 70%; } .div80 { height: 80%; } .div90 { height: 90%; } .div100 { height: 100%; } </style> </head> <body> <div id="telosajta"> <div class="div10"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div20"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div30"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div40"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div50"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div60"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div70"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div80"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div90"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div100"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> </div> </body> </html> Kôd:
<!DOCTYPE html> <html> <head> <style> html, body { height: 100%; } #telosajta { top: auto; margin: auto; position: relative; width: 80%; height: 100%; } div div { border: 1px solid #000; float: left; width: 8%; margin: 0 1% 0 0; } .div10 { height: 10%; } .div20 { height: 20%; } .div30 { height: 30%; } .div40 { height: 40%; } .div50 { height: 50%; } .div60 { height: 60%; } .div70 { height: 70%; } .div80 { height: 80%; } .div90 { height: 90%; } .div100 { height: 100%; } </style> </head> <body> <div id="telosajta"> <div class="div10"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div20"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div30"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div40"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div50"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div60"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div70"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div80"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div90"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> <div class="div100"><img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" width="100%" height="100%" title="logo"></div> </div> </body> </html>
__________________
In brightest day, in blackest night ... |
17. 03. 2013. | #4 |
član
Certified
Datum učlanjenja: 29.07.2010
Poruke: 61
Hvala: 3
4 "Hvala" u 3 poruka
|
Pod obavezno za google chrome;
Kôd:
html{height:101%} Kôd:
osnovnidiv{overflow:hidden} Kôd:
osnovnidiv{position:relative} Kôd:
position:absolute Poslednja izmena od pecili : 17. 03. 2013. u 01:01. |
19. 03. 2013. | #5 |
član
Certified
Datum učlanjenja: 06.09.2012
Poruke: 64
Hvala: 0
342 "Hvala" u 10 poruka
|
Hvala uspeo sam
|
|
|