Pagina 1 di 2
Problema allineamento immagine
Inviato: 07/11/2015, 12:10
da Astro86
Ciao ragazzi, sto facendo una home page in html ma o un problema.
La home page supporta i smartphone e quando navighi con il dispositivo ho fatto in modo che ti ridimensiona tutto...
Versione Normale:
Link
Versione per dispositivi mobile:
Link
Il problema è l'allineamento delle icone social nella versione mobile... nonostante abbia questo css continua a non allinearmelo con la barra nera. (la barra ha una altezza di 32px; e le icone della versione mobile sono di 24px;)
CSS Barra superiore nera
Codice: Seleziona tutto
.top_bar {
background: -webkit-linear-gradient(#272727, #545454); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#272727, #545454); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#272727, #545454); /* For Firefox 3.6 to 15 */
background: linear-gradient(#272727, #545454);
border-bottom:#000 1px solid;
box-shadow: 0px 3px 5px 0px #888888;
height:32px;
width:100%;
line-height:32px;
color:#999;
margin-bottom:30px;
}
CSS social icone piccole
Codice: Seleziona tutto
.hide_social{
display:inline;
line-height:32px;
margin-left: 10px;
}
Re: Problema allineamento immagine
Inviato: 07/11/2015, 12:16
da Sir Xiradorn
Prima di procedere perchè non mi carichi la pagina su jsfiddle ad esempio? Così vedo meglio. Devo capire i breackpoints a quanto so stati fissati e vedere che si può fare. Ma dal solo codice css non riesco a capire
Re: Problema allineamento immagine
Inviato: 07/11/2015, 12:22
da Astro86
Ok, il tempo che mi registro e carico tutto.
Re: Problema allineamento immagine
Inviato: 07/11/2015, 12:23
da Sir Xiradorn
Potrei procedere in maniera molto migliore e sperimentare a volo i cambi
Re: Problema allineamento immagine
Inviato: 07/11/2015, 12:45
da Astro86
Sir Xiradorn ha scritto:Potrei procedere in maniera molto migliore e sperimentare a volo i cambi
https://jsfiddle.net/AstroJack/1bLkao4w/
però non si vedono le immagini, non so come caricare la cartella, penso non si può....
Re: Problema allineamento immagine
Inviato: 07/11/2015, 14:30
da Sir Xiradorn
Una dritta da designer. Quando usi ste cose e devi disegnare qualcosa MOLTO rapidamente puoi usare come immagini un segnaposto o placeholder. Ce ne so na marea. Io quello che uso per comodità assurda è questo:
https://placehold.it/
Come usarlo? Facilissimo. Ti basterà fare qualcosa del genere.
http://placehold.it/350x150 Genera una immagine 350px x 150px. E puoi personalizzarlo come vuoi.
Inizio con qualche bacchettata però. Una cosa FONDAMENTALE e tatuatelo a fuoco sue polsi. 3 parole:
INDENTA IL CODICE
Senno quando le cose si complicano sarà un casino.
Seconda cosa ma qua si parla di consigli più che di bacchettate:
- Sviluppa in HTML 5 in maniera che tu abbia una maggiore flassibilità.
- Hai mancato i codici di charsets e il resizing del viewport che allo stato attuale del codice NON è responsive
- Cerca di non usare attributi inline per dare dimensioni alle cose. Ci so i css per questo compito. Risparmi codice, lo rendi più chiaro e soprattuto più veloce
- come targeting usa questi parametri: _self, _blank, _parent, _top. new NON esiste e genera errore di validazione. Esiste anche una opzione framename ma io non la uso personalmente
Prima correzione URGENTE, passaggio a HTML5 e reponsivity attivata. Da
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Tube Friend</title>
</head>
a questo
Codice: Seleziona tutto
<!DOCTYPE html>
<html dir="ltr" lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Tube Friend</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
Poi ancora se puoi, così poi vediamo il reale comportamento, rimpiazzare le immagini con il placeholder dato e il codice corretto e così lavoriamo al seguito
Re: Problema allineamento immagine
Inviato: 07/11/2015, 19:43
da Astro86
sono disordinato in tutto :\
gli ho dato una sistemata, aggiungendo anche dei commenti
per la questione dell'uso inline ho usato questo valore perché se mettevo ad esempio display:none, al cambio risoluzione se a display non mettevo un'altro tipo di valore, rimaneva invisibile il div, volendo quindi ci potrei mettere qualsiasi altra cosa, ad un'altro ad esempio ho messo block
Re: Problema allineamento immagine
Inviato: 08/11/2015, 1:02
da Sir Xiradorn
Se aggiorni il codice vediamo di sistemare. Così vediamo come sta andando e ti faccio capire come gestire le img in un contesto responsive
Re: Problema allineamento immagine
Inviato: 08/11/2015, 11:16
da Astro86
ops, non me la salvato a quanto pare.... ora lo rifaccio
Re: Problema allineamento immagine
Inviato: 08/11/2015, 11:29
da Astro86
ora dovrebbe essere a posto
