Pagina de start incl Butoane

#1
business11

Posted 24 January 2017 - 12:53

Info Austria

Grup: Senior Members
Posts: 11,820
Înscris: 13.07.2011

Am si eu urmatoarea problema, am o imagine 6000x4000, care am deschis-o in Photoshop. Am pus un logo si 2 butoane (care le-am decupat) si am salvat poza ca html + pictures.

1. Aceasta imagine + butoanele, trebuie sa fie pagina de start. Acum nu reusesc ca imaginea sa se comprime in functie de rezolutia de monitor. Adica sa fie intotdeauna fullscreen indiferent de rezolutie.

2. Dupa ce butoanele au fost decupate (butoanele standard sunt negre), doresc ca atunci cand mouse-ul se muta pe ele sa devina albe. Banuiesc ca aici am nevoie de comanda onmouseover daca nu ma insel?

Quote

Este corect codul?

Back to top

#2
dani.user

Posted 24 January 2017 - 12:58

Guru Member

Grup: Senior Members
Posts: 30,235
Înscris: 24.02.2007

Paginile nu se mai fac decupand poze din Photoshop. CSS-ul a evoluat suficient de mult cat sa iti permita sa desenezi tot felul. Asta aduce avantaje precum calitate la redimensionare si adaptare functie de continut (un buton mai lung, altul mai scurt etc).

Schimbarea culorii o faci deasemenea din css, aplicand alt stil pe :hover.

Back to top

#3
business11

Posted 24 January 2017 - 13:26

Info Austria

Grup: Senior Members
Posts: 11,820
Înscris: 13.07.2011

nu am cunostinte mai avansate de html si css basic basic... deci nu cred ca m-as descurca sa fac ce spui tu :-D

Back to top

#4
dani.user

Posted 24 January 2017 - 13:35

Guru Member

Grup: Senior Members
Posts: 30,235
Înscris: 24.02.2007

Inveti, nimeni nu s-a nascut invatat.

Back to top

#5
cristirg

Posted 24 January 2017 - 14:03

Senior Member

Grup: Senior Members
Posts: 7,711
Înscris: 16.11.2012

imaginea ca sa fie responsiva trebuie sa pui in css:

img {
width:100%;
height:auto;
}

dar oricum trebuie sa inveti html,css

Edited by cristirg, 24 January 2017 - 14:03.

Back to top

#6
business11

Posted 24 January 2017 - 14:49

Info Austria

Grup: Senior Members
Posts: 11,820
Înscris: 13.07.2011

cristirg, on 24 ianuarie 2017 - 14:03, said:

imaginea ca sa fie responsiva trebuie sa pui in css:

img {
width:100%;
height:auto;
}

dar oricum trebuie sa inveti html,css

thanks

Back to top

#7
tigerheart

Posted 24 January 2017 - 15:38

Savage Member

Grup: Senior Members
Posts: 9,887
Înscris: 07.08.2008

Sa nu faci greseala sa folosesti aceeasi imagine pentru toate rezolutiile. De ce? Imaginea aia probabil are vreo 1-2mb, nu? Atunci de ce sa ii afisezi la unu care intra cu mobilul o astfel de imagine? Foloseste @media pentru cateva cazuri si prin care incarci poze la dimensiuni diferite. De ex.:

@media screen and (min-width: 1200px) {
   ...... codul care afiseaza imaginea normala ......
}

@media screen and (min-width: 720px) and (max-width: 1199px) {
   ...... codul care afiseaza o imagine mai mica ......
}

@media screen and (min-width: 420px) and (max-width: 719px) {
   ...... codul care afiseaza o imagine si mai mica ......
}

Un exemplu de cod cu imagine fullscreen: https://css-tricks.c...ckground-image/

Pentru butoanele alea, le poti pune centrat in pagina, cum e de exemplu acest text: http://jsfiddle.net/wprw3/

Back to top

#8
adyyy

Posted 25 January 2017 - 13:30

Member

Grup: Members
Posts: 531
Înscris: 26.06.2006

Ca sa nu deschid topic separat, poti face usor un site/aplicatie responsive din nonresponsive? E ca si cum ai gandi desktop first si apoi aplici stiluri/(queries,grids) sau trebuie sa rescrii mult din app/website?

Edited by adyyy, 25 January 2017 - 13:33.

Back to top

#9
tigerheart

Posted 25 January 2017 - 14:01

Savage Member

Grup: Senior Members
Posts: 9,887
Înscris: 07.08.2008

adyyy, da, dar nu intotdeauna e chiar asa usor. Prima data stabilesti niste rezolutii pe care sa lucrezi(de ex. >1200px, >720px, >480px, <480px) si apoi iei elementele din pagina si le dai o valoare, la unele poti lucra in procente, la altele in dimensiuni concrete, depinde de situatie.
Cateva info:
http://learn.shayhow...ive-web-design/
https://www.thesitew...ve-design.shtml

Back to top

Anunturi

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

Pagina de start incl Butoane

#1 business11 Posted 24 January 2017 - 12:53

#2 dani.user Posted 24 January 2017 - 12:58

#3 business11 Posted 24 January 2017 - 13:26

#4 dani.user Posted 24 January 2017 - 13:35

#5 cristirg Posted 24 January 2017 - 14:03

#6 business11 Posted 24 January 2017 - 14:49

#7 tigerheart Posted 24 January 2017 - 15:38

#8 adyyy Posted 25 January 2017 - 13:30

#9 tigerheart Posted 25 January 2017 - 14:01

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
business11

Posted 24 January 2017 - 12:53

#2
dani.user

Posted 24 January 2017 - 12:58

#3
business11

Posted 24 January 2017 - 13:26

#4
dani.user

Posted 24 January 2017 - 13:35

#5
cristirg

Posted 24 January 2017 - 14:03

#6
business11

Posted 24 January 2017 - 14:49

#7
tigerheart

Posted 24 January 2017 - 15:38

#8
adyyy

Posted 25 January 2017 - 13:30

#9
tigerheart

Posted 25 January 2017 - 14:01