Responsive design, tabulky, odkaz a...

Michaelo

Tak nejak, kradez to nie je, kludne si to mohol robit u seba lokalne, pokial to niekde nepublikuje ako jeho kod alebo nebude pouzivat, nevidim v tom problem.

Inak, skus si nieco zistit o max/min-width/height a ako to presne funguje. A aby ti to orezalo obrazok tak ho daj klasika ako background (a zacentruj ho) a pouzi prave sirku a vysku divu. Jak sa bude zmensovat, obrazok sa bude "orezavat". O inej moznosti velmi neviem, jedine zeby si pouzil overflow: hidden, no tam asi nebude fungovat zacentrovanie obrazku (nechce sa mi testovat).

killer-bee*-*

Ono to krádež v podstate nieje lebo autor templatu to publikuje pre verejnosť.Ale aj tak, vlastná napísaná stránka je najlepšia.

94jakub

Krádež to možno nie je ale je to porušenie autorského práva. To, že niekto niečo publikuje neznamená, že to môžeš len tak okopírovať.
Záleží to na konkrétnych licenčných podmienkach, ktoré autor na dielo použije. Predpokladám, že tie si na tej stránke asi nečítal, inak by si vedel.

Pokiaľ si ale niečo také niekto robí súkromne pre seba, s tým, že sa na tom "okopírovaní" naučiť napríklad nejaký efekt alebo niečo podobné, tak v tom nevidím moc problém.
I keď okopírovať to 1:1 je trochu zvláštne. Už keď niečo také robím, tak si to aspoň trochu upravím podľa svojich predstáv, nech do toho "učenia" vložím aj trochu kreativity.

OT k tlačidlu vo footeri, sa ti nedá vycentrovať?

*****HERO*****

94jakub napísal:I keď okopírovať to 1:1 je trochu zvláštne. Už keď niečo také robím, tak si to aspoň trochu upravím podľa svojich predstáv, nech do toho "učenia" vložím aj trochu kreativity.

spravit stranku podla predlohy je zaklad. v realite dostane programator kopec grafickych navrhov od grafikov, co v zivote nevideli HTML a netusia, co ma aku narocnost. tam mu kreativita moc nepomoze.

do toho ucenia by mal momentalne hlavne vlozit trochu viac ucenia.

vid to "vycentrovane" tlacitko (left: 39%

):

Kód: Vybrať všetko

.btn {
  text-decoration: none;
  color: #F5F0F1;
  background: #ED0C3D;
  padding: 20px;
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 39%;
  width: 200px;
  text-align: center;
}

pozri sa na ten kod a obrazok z prilohy. je to uplne to iste.

co keby si mu zrusil poziciu (nechal default) a nastavil text-align:center; tomu elementu nad nim?

LukineskoNR

Dakujem nepoznate nejaky program kde budem pisat a zaroven sa mi ukaze zmena nieco ako code pen ale offline

Príspevok od používateľa **Aiden** » 19 feb 2016, 1:43

napr. Gulp + Browsersync a kod si pises v com chces

LukineskoNR

A to ako funguje ? Ako na editor používam sublime text ale rad by som bol že píšem a možem vidieť hned zmeny a nie furt prepínať.

Paragon

Môžeš skúsiť Brackets:
http://brackets.io/

Populárny code editor, podporuje Live Preview - ako píšeš kód, tak sa automaticky aktualizuje stránka v prehliadači. Nemusíš inštalovať žiaden plugin.

Funguje to presne tak, ako pisu na stranke. Ak mas staticku stranku a nepouzivas sass/less, coffeescript, ES6/7 a pod., tak ti staci pouzit priamo BrowserSync, inak si musis assets buildnut s Gulpom a BS pouzit ako sucast toho tasku.

LukineskoNR

Zdravím ľudia nebudem vytvárať už viac tém ale budem všetky otázky vkladať sem čo sa týka responzívneho dizajnu.
Chcel by som sa opýtať v css keď mám:

Kód: Vybrať všetko

@media screen and (max-width: 1000px)

Tak to znamená že nastanú dané zmeny ak šírka je menšia ako 1000px ak by bolo min-width tak viac ako 1000px a to screen znamená čo viem že su hodnoty print to je keď tlačiť chceme ale screen je obrazovka a aké hodnoty ešte môžu byť ktoré sa použivajú v praxi.

Príspevok od používateľa **hojko** » 24 feb 2016, 0:00

Interpunkcne znamienka ti na klavesnici nefunguju??? Pises, ze sa chces nieco opytat, ale ziadna otazka tu nepadla, len nejaka skomolenina niekolkych viet do jedneho neprehladneho suvetia. A navyse som bol taky laskavy, ze som ti tri temy zlucil do jednej.

eMPiko

LukineskoNR napísal:Zdravím ľudia nebudem vytvárať už viac tém ale budem všetky otázky vkladať sem čo sa týka responzívneho dizajnu.
Chcel by som sa opýtať v css keď mám:
Kód: Vybrať všetko
@media screen and (max-width: 1000px) 
Tak to znamená že nastanú dané zmeny ak šírka je menšia ako 1000px ak by bolo min-width tak viac ako 1000px a to screen znamená čo viem že su hodnoty print to je keď tlačiť chceme ale screen je obrazovka a aké hodnoty ešte môžu byť ktoré sa použivajú v praxi.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Tu mas media queries zdokumentovane.

LukineskoNR

Dakujem a to screen ako sa dava vzdy? Lebo chapem ze obrazovka pocitaca tablet mobil

eMPiko

V tej tabulke je tam tych media typov viac, vacsina je uz zastarana (je pri nich napisane Deprecated). V CSS3 su uz definovane len 3: screen, print a speech. Myslim ze zrejme ktora na co sluzi. Okrem toho mozes pouzivat aj all. Taktiez sa to moze pouzit bez toho typu napr:

Kód: Vybrať všetko

@media (max-width:1000px)

Na tvojom mieste by som sa tymito typmi velmi nezatazoval, pokial teda nemas nejaky pripad pouzitia ked sa naozaj moze stat ze sa to clovek bude snazit vytlacit.

LukineskoNR

Existuje nejaká stránka kde su navrhy vo photoshope a mohol by som si to natom cvičit? Asi nie že ?

eMPiko

Napr. na http://mediaqueri.es/ mas galeriu dobrych responzivnych stranok (pochopil som to tak, ze ti ide o tie responzivne teda).

Teraz je medzi dizajnermi celkom popularna aj stranka www.dribbble.com. Aj ked okrem webovych stranok tam mas aj ine vytvory (mobilne appky, loga a pod.), ale je tam aj filtrovanie podla tagov, weby najdes napr. na https://dribbble.com/tags/web Ak si chces cvicit napr. vyslovene responzivne dizajny tak mozes skusit https://dribbble.com/tags/responsive

To su vsetko su ale dost profi stranky, z ktorych niektore mozu byt aj nad tvoje moznosti (napr. pouzitim animacii). Urcite sa v nich vsak mozes inspirovat.

LukineskoNR

Chcem sa opýtať ľudia chcem proste ak je stránka menšia ako 1000 px chcem aby sa to dalo obrázok a text vedľa seba. To som dal ale prečo keď nastavím obrázku 40% a textu 60% tak keď zmenšujem pod 1000 px sú furt fixne a neprispôsobujú sa stránke ?

Kód: Vybrať všetko

http://codepen.io/LukineskoNR/pen/KzwLbw

*****HERO*****

lebo article ma pevnu sirku 900px

Kód: Vybrať všetko

  @media (max-width: 1000px) {
    article {
      width: 900px;
    }
}

LukineskoNR

A aku mu mam dat sirku ? Ako to mam urobit ked mu sirku nedam tak sa to zmensi lebo je v zadani 300 a ked zmenim na 30% tak to nepomoze aj tak

//autoeditácia príspevku (02 Mar 2016, 19:37)
Existuje nejaký doplnok pre chrome že mi bude pisat na koľko pixelov je natiahnuty prhliadač? aby som nemusel ist do developer tool ?

*****HERO*****

http://lmgtfy.com/?q=chrome+pixel+ruler

Responsive design, tabulky, odkaz a...

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Responsive design otázky

Re: Responsive design otázky

Re: Responsive design otázky

Re: Responsive design, tabulky, odkaz a...

Re: Responsive design, tabulky, odkaz a...

Re: Responsive design, tabulky, odkaz a...

Re: Responsive design, tabulky, odkaz a...

Re: Responsive design, tabulky, odkaz a...

Re: Responsive design, tabulky, odkaz a...

Re: Responsive design, tabulky, odkaz a...

Re: Responsive design, tabulky, odkaz a...