isti izgled sajta na svim ekranima monitora kompjutera i mobilnih telefona

1

isti izgled sajta na svim ekranima monitora kompjutera i mobilnih telefona

offline
  • Pridružio: 08 Avg 2014
  • Poruke: 15

Pocetnik sam u web dizajnu usavrsio sam html5, css3 (www.w3school.com) javascript, jquery. Poceo sam polako da ucim php i word press. Uradio sam 2 sajta, njihov izgled na ekranima monitora i laptopa je ok ali problem je kada su u pitanju ekrani mobilnih telefona androida i telefoni starije verzije. Moram da napomenem da je slajd sou tj slajderi urađeni sa dosta efekata. Znam da postoje kodovi koji resavaju ovaj problem. Ako neko zna neka mi pomogne dobrim savetom ili da me uputi na neki dobar tutorijal



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 02 Sep 2008
  • Poruke: 4092
  • Gde živiš: Bg

http://www.inmotionhosting.com/support/edu/website.....e-template
http://www.emailonacid.com/blog/details/C13/a_responsive_design_tutorial
http://www.hongkiat.com/blog/responsive-web-tutorials/



offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4575

Ako dobro poznaješ jQuery preporučujem ti jQuery Mobile, jednostavan je za učenje, a dosta moćan Smile

http://jquerymobile.com/

Baci pogled i na Modernizr , on ti omogućuje da i u pretraživačima koji ne podržavaju HTML5 koristiš neke zanimljive funkcije uz JavaScript i CSS Smile Čisto da mogu i posetioci sa starijim pretraživačima da pregledaju tvoj sajt (da se ne zezaš previše sa kompatibilnošću).

http://modernizr.com/

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Moja preporuka za ucenje reponsiva je bootstrap. Za okruzenje bih ti preporucio Sublime sa instaliranim emmet-om.

offline
  • Web Dizajner
  • Pridružio: 08 Dec 2011
  • Poruke: 247
  • Gde živiš: Bar

Takodje preporuka Bootstrap svaki sajt koji radim, radim sa njim jednostavan dobra dokumentacija http://getbootstrap.com/

offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Bootstrap je mama za te stvari, Foundation je jaaaako moćna alatka za to ili jQueryMobile.

http://getbootstrap.com/
http://foundation.zurb.com/
http://jquerymobile.com/

offline
  • C# and PHP Developer
  • Pridružio: 16 Feb 2011
  • Poruke: 1630
  • Gde živiš: Pancevo

Kad imas ovakve pocetnicke probleme onda nisi usavrsio dovoljno dobro html5 i css3. Savrseno je nesto sto ni ja sam ne mogu zamisliti pogotovo kad se govori o html5.

Elem koristi CSS Media Queries:

<!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a stylesheet --> <style> @media (max-width: 600px) {   .facet_sidebar {     display: none;   } } </style>

Pogledaj ovde imas lepo objasnjeno u vezi rezolucija i ostalih podesavanja za MQ
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

offline
  • Pridružio: 08 Avg 2014
  • Poruke: 15

Napisano: 26 Feb 2015 20:13

Dopuna: 26 Feb 2015 20:13

FoxVanis ::Bootstrap je mama za te stvari, Foundation je jaaaako moćna alatka za to ili jQueryMobile.

getbootstrap.com/
foundation.zurb.com/
jquerymobile.com/


Hvala na pomoći. Ziveli Radio sam sajt uz pomoć bootstrapa i veoma sam zadovoljan, mnogo toga sam i naučio. Da li možda znaš postoji li neki plugin ili kod za povećanje slike u bootstrapu. Na primer kliknem sliku i iskoči prozor sa većom slikom, koju ponovo zatvorim klikom na X. Pokušao sam sa nekim jquery modulima i kodovima koji rade ali...kad zatvorim sliku ceo izgled sajta se pomeri malo u stranu pa se vrati, to je mali trenutak ali zna da nervira...

Dopuna: 27 Feb 2015 17:53


Pronašao sam rešenje i za taj problem Ziveli Smajli pomoću metode "jQuery.noConflict();" Pokazaću primer gde sam koristio dve različite jquery biblioteke.. ALI!! ovo ne funkcioniše kada je bootstrap u pitanju

<!DOCTYPE html> <html> <head>        <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>responsive design</title>             <script type="text/javascript"   src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>       <script src="jquery.blueberry.js"></script>     <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> </head> <body> <script>    jQuery.noConflict();    var j = jQuery.noConflict();    j(function() {       j('.slika img[rel]').overlay({effect: 'apple'});    });        $(window).load(function() {       $('.blueberry').blueberry();    }); </script> </body> </html>

offline
  • Pridružio: 28 Feb 2012
  • Poruke: 80
  • Gde živiš: RS

Moja preporuka za takve stvari da koristis direktno klase iz Bootstrap-a.
Integrisano je to vec, pročitaj Modal poglavlje.

Tu mozes odraditi da uvecas sliku, dakle kombinacija thumbnail-a i modalnih prozora.
getbootstrap.com/javascript/#modals

Ako se ne budes snasao, odradicu ja jedan primjer pa postaviti ovdje.

Pozdrav!

offline
  • Pridružio: 08 Avg 2014
  • Poruke: 15

Napisano: 01 Mar 2015 18:45

Hvala pogledacu prvom prilikom kad budem imao vremena

Dopuna: 30 Maj 2015 13:58

Kako u bootstrap-u centrirati linkove u nav-bar-u, zelim da mi stoje u sredini, linkovi se mogu podesiti da budu levo ili desno, u svom fajlu css-a pokusao sam sa text-align: center ali nesto nece da radi kako treba -ne ide...

Ko je trenutno na forumu
 

Ukupno su 725 korisnika na forumu :: 22 registrovanih, 3 sakrivenih i 700 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 9k38, Andrija357, babaroga, Bane san, Boris BM, Boris90, Dannyboy2, FileFinder, Futog 74, kreza, krkalon, Kruger, ladro, Mi lao shu, Parker, S2M, shaja1, stagezin, Trpe Grozni, VP6919, W123, 79693