Design Fluido - L'obiettivo?

vic.

Nuovo Utente
4 Lug 2013
9
0
0
Salve a tutti ragazzi,

Da un po' di tempo a questa parte ho letto delle guide relative al cosiddetto design fluido, seppure non nego che i miei interrogativi in merito siano molti.
In realtà, in primo luogo, non capisco quale sia l'obiettivo finale:

-E dunque, vi chiedo, credo bene se credo che un design fluido serva a far si che immagini, div, e altri elementi di natura non scalabili si adattino alla risoluzione dell'utente?
-Nelle varie guide che ho letto si chiedeva, per verificare, di ridimensionare la finestra in larghezza oppure di ridimensionare il testo (rotellina), ebbene cosa si verifica facendo queste due azioni, qual'è il meccanismo alla base?
-Nel mio piccolo, facendo diverse prove, ho scoperto che la proprietà da modificare per far si che un'immagine si adatti alla finestra è min/max -width/heigth con valore espresso in % o em. (poiché u.d.m. relative), a queste aggiungo la proprietà (della specifica CSS3)
Codice:
background-size:cover
. Il problema è che io vorrei avere immagini a tutto schermo (per larghezza) come ci sono nei siti moderni, ma quando imposto
Codice:
width:100%
+
Codice:
heigth: 100%
questo non avviene
-Come mai non avviene? Non dovrebbe rimanere a tutto schermo quell'immagine e come faccio a impostare che l'altezza dell'immagine dev'essere la propria, ma esprimendolo in %? esempio: immagine (20x20 px) definita con width e heigth entrambe 100% in modo che sia scalare :confused::confused:.


Scusate per il numero consistente di domande, alcune un po' complicate da capire lo so, ma sono interrogativi che mi assillano :book:
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
-E dunque, vi chiedo, credo bene se credo che un design fluido serva a far si che immagini, div, e altri elementi di natura non scalabili si adattino alla risoluzione dell'utente?
Scalabilità significa tutt'altro, un design fluido serve principalmente per avere un margine di risoluzioni che possono visualizzarlo senza errori grafici.
Se provi a guardare per esempio il mio sito web con un computer con risoluzione 800 x 600 vedrai che si vede tutto da schifo.
Questo perchè nel mio sito non ci sono dimensioni percentuali ma sono tutte fisse (in px).

-Nelle varie guide che ho letto si chiedeva, per verificare, di ridimensionare la finestra in larghezza oppure di ridimensionare il testo (rotellina), ebbene cosa si verifica facendo queste due azioni, qual'è il meccanismo alla base?
Si verifica che si deve vedere l'effetto delle dimensioni impostate in percentuali, un esempio ce l'ho già fatto (anche se vecchio) a questa pagina:
- Questa pagina!
Se stringi la finestra vedi che il riquadro della stessa non va a coprire la pagina tagliandola, ma la "schiaccia", in questo modo (tralasciando che la pagina fa schifo) è però visualizzabile anche su dispositivi con schermo molto piccolo.

Il problema è che io vorrei avere immagini a tutto schermo (per larghezza) come ci sono nei siti moderni, ma quando imposto
Codice:
width:100%
+
Codice:
heigth: 100%
questo non avviene
-Come mai non avviene?
Va vista la pagina, o almeno il sorgente, in ogni caso ricorda che le dimensioni percentuali sono anche relative, questo significa che se metti un div nel body con width: 80%; e dentro a questo un'immagine con width: 100%;, l'immagine sarà larga il 100% si, ma del div che lo contiene, quindi nel browser vedrai un'immagine larga l'80% della finestra e che si restringe a ridursi della suddetta finestra.
Se vuoi invece che non ci siano margini bianchi nello sfondo dell'intera pagina con i bordi della finestra imposti nel CSS:
Codice:
body {margin: 0; background: url('path/img.jpg'); background-size: cover;}

come faccio a impostare che l'altezza dell'immagine dev'essere la propria, ma esprimendolo in %? esempio: immagine (20x20 px) definita con width e heigth entrambe 100% in modo che sia scalare :confused::confused:.
Se dichiari solo il WIDTH l'height te lo imposta in proporzione.
Se per esempio dichiari che l'immagine sia larga il 50% l'height automaticamente sarà anch'esso 50% perchè se non è dichiarato riconosce che l'immagine ha i lati uguali, quindi assegna all'altezza lo stesso valore della larghezza.

Se lo fai con un'immagine per esempio che ha l'altezza maggiore della larghezza, sempre non dichiarando l'height ma solo il width, noterai che l'height rimarrà sempre proporzionale e che quindi l'immagine si può rimpicciolire ed ingrandire ma non si schiaccerà o allungherà mai né in larghezza, né in altezza.
 

vic.

Nuovo Utente
4 Lug 2013
9
0
0
Grazie mille Jhonny.
Gentilissimo...

Comunque volevo sapere la differenza tra layout elastico e flessibile?
Riguardo al tuo sito, quindi, tu hai usato un posizionamento con coordinate? (esempio {position:absolute; left:xx; top: xx;} )

P.S: anche io uso background-size:cover che è una proprietà della specifica CSS3, giusto? Ma, dunque, anche questa risente del ridimensionamento come lo hai definito tu, per cui se imposto solo width, allora l'heigth va in automatico?
 
Ultima modifica:

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Riguardo al tuo sito, quindi, tu hai usato un posizionamento con coordinate? (esempio {position:absolute; left:xx; top: xx;} )
No, ho usato il posizionamento centrato non mettendo al div container il float:left; e mettendo il margin: 00px auto 00px auto; che lo centra automaticamente.

P.S: anche io uso background-size:cover che è una proprietà della specifica CSS3, giusto? Ma, dunque, anche questa risente del ridimensionamento come lo hai definito tu, per cui se imposto solo width, allora l'heigth va in automatico?
Si.
 
Discussioni simili
Autore Titolo Forum Risposte Data
R DUBBI PORTFOLIO WEB DESIGN Content Management System (CMS) 2
V Servizio design pagina web e download in self contained html file Discussioni Varie 1
C [ OFFRO ] Realizzazione Sito Web Responsive design e Ottimizzato Offerte e Richieste di Lavoro e/o Collaborazione 1
M [HTML] Responsive design HTML e CSS 0
F [Compro] Account Instagram interior design/architecture/art/design da 3k a 20k real followers Annunci servizi di Social Media Marketing 1
M Responsive design bootstrap HTML e CSS 2
Robert_MW [COMPRO] Pagina Facebook +20k - Tema Casa (idee, fai da te, design) Annunci servizi di Social Media Marketing 5
MatteoRoma81 Cercasi web design per carrello elettronico Offerte e Richieste di Lavoro e/o Collaborazione 2
S Corso web design Roma Discussioni Varie 0
T [Vendo] Guest Post a tema Web Design Offerte e Richieste di scambio links 2
M creazione pagina web per esercizio corso di web design Offerte e Richieste di Lavoro e/o Collaborazione 2
I Cerco Pagine facebook argomento: CASA, VILLE, CASALI,RISTRUTTURAZIONI,INTERIOR DESIGN Presentati al Forum 0
A Design fixed, fluid e responsive HTML e CSS 1
U [Vendo] Spazi pubblicitari blog moda, fashion e design ottimi prezzi. Vendere e Acquistare pubblicita' online 0
7thl Scambio links con sito di design, interior design. architettura, lusso e aziende Offerte e Richieste di scambio links 1
J Canvas e media queries per responsive design HTML e CSS 3
B Scrollbar Responsive Design HTML e CSS 1
V Libri da consigliare per chi è alle prime armi con il web design Discussioni Varie 1
F responsive design HTML e CSS 0
P cerco script immagini effetto carousel in responsive design HTML e CSS 2
L Feedback - design / layout per un sito dedicato ai Tablet PC Presenta il tuo Sito 2
K [consigli] CMS in HTML5 con Responsive Web Design e semantica schema.org Content Management System (CMS) 3
B [VENDO] Libri web design nuovi, usciti negli ultimi mesi. (wordpress e html5/css3) Altri Annunci 0
O Wordpress Web Design Presenta il tuo Sito 0
N Ricerchiamo web master php web design Offerte e Richieste di Lavoro e/o Collaborazione 1
F FM design blog | blog su grafica e web design Presenta il tuo Sito 0
J The Ultimate JavaScript Tutorial in Web Design Javascript 0
K Sito web: Italian bathroom design Presenta il tuo Sito 0
C Vinci denaro con i design contest Presenta il tuo Sito 0
W Realizzazioni siti web dal design accattivante | Weblab Studio Offerte e Richieste di Lavoro e/o Collaborazione 0
MarcoGrazia Defensive Design per il Web Discussioni Varie 0
D Quale corso di Web Design consigliate? Webdesign e Grafica 5
T Parere design mio sito Presenta il tuo Sito 24
M corso di web-design Webdesign e Grafica 5
M Sito di web design Presenta il tuo Sito 0
SolidSnake4 guida al web design - layout e livelli HTML e CSS 5
D Web Design Tips Programmazione 0
bit_freak Hires Logo Design Presenta il tuo Sito 0
B Web design e lezioni di informatica Altri Annunci 0
M web design - web master - grafica Altri Annunci 0
Apeweb Corso base di Web Design gratuito Presenta il tuo Sito 1
L Studio su Web Design & Emozioni inerenti Webdesign e Grafica 0
G Web design e database gestionali Presenta il tuo Sito 0
D Web Design Genova Presenta il tuo Sito 2
F Gara Di Interface Design: 2.000 $ Per il redesign di MasterNewMedia.org HTML e CSS 1
B informazioni su corsi di web design Webdesign e Grafica 1
K About Website Design. Presenta il tuo Sito 3
G Cercasi web design Webdesign e Grafica 5
J Offerta di Lavoro: Docente per corso Web Design. Altri Annunci 3
peppoweb Macromedia potenzia la suite di Web design Windows e Software 0

Discussioni simili