phpBB Italia chiude!
phpBB Italia ringrazia tutti gli utenti che hanno dato fiducia al nostro progetto per ben 9 anni, e che, grazie al grande lavoro fatto da tutto lo Staff (rigorosamente a titolo gratuito), hanno portato il portale a diventare il principale punto di riferimento italiano alla piattaforma phpBB.

Purtroppo, causa motivi personali, non ho più modo di gestirlo e portarlo avanti. Il forum viene ora posto in uno stato di sola lettura, nonché un archivio storico per permettere a chiunque di fruire di tutte le discussioni trattate.

Il nuovo portale di assistenza per l'Italia di phpBB diventa phpBB-Store.it, cui ringrazio per aver deciso di portare avanti questo grande progetto.

Grazie ancora,
Carlo - Amministratore di phpBB Italia

Problema allineamento immagine

Discussioni relative allo sviluppo grafico di un sito web utilizzando l'HTML/XHTML e CSS ed alla grafica in generale con l'utilizzo di applicazioni tipo Photoshop e GIMP.
Avatar utente
Astro86
phpBB Expert
phpBB Expert
Messaggi: 924
Iscritto il: 12/08/2009, 14:36
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6
Database: MYSQL
Località: PC. Via localhost N° 82.51.149.40
Contatta:

Problema allineamento immagine

Messaggio da Astro86 » 07/11/2015, 12:10

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 versione normale (icone grandi)

Codice: Seleziona tutto

.social{
margin-right:3px;
float:right;
}
CSS Social versione mobile (icone grandi)

Codice: Seleziona tutto

.social {display:none}
CSS social icone piccole

Codice: Seleziona tutto

.hide_social{
	display:inline;
	line-height:32px;
	margin-left: 10px;
}

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Problema allineamento immagine

Messaggio da Sir Xiradorn » 07/11/2015, 12:16

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
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Avatar utente
Astro86
phpBB Expert
phpBB Expert
Messaggi: 924
Iscritto il: 12/08/2009, 14:36
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6
Database: MYSQL
Località: PC. Via localhost N° 82.51.149.40
Contatta:

Re: Problema allineamento immagine

Messaggio da Astro86 » 07/11/2015, 12:22

Ok, il tempo che mi registro e carico tutto.

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Problema allineamento immagine

Messaggio da Sir Xiradorn » 07/11/2015, 12:23

Potrei procedere in maniera molto migliore e sperimentare a volo i cambi
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Avatar utente
Astro86
phpBB Expert
phpBB Expert
Messaggi: 924
Iscritto il: 12/08/2009, 14:36
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6
Database: MYSQL
Località: PC. Via localhost N° 82.51.149.40
Contatta:

Re: Problema allineamento immagine

Messaggio da Astro86 » 07/11/2015, 12:45

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ò....

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Problema allineamento immagine

Messaggio da Sir Xiradorn » 07/11/2015, 14:30

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>
Piccola Correzione

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
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Avatar utente
Astro86
phpBB Expert
phpBB Expert
Messaggi: 924
Iscritto il: 12/08/2009, 14:36
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6
Database: MYSQL
Località: PC. Via localhost N° 82.51.149.40
Contatta:

Re: Problema allineamento immagine

Messaggio da Astro86 » 07/11/2015, 19:43

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

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Problema allineamento immagine

Messaggio da Sir Xiradorn » 08/11/2015, 1:02

Se aggiorni il codice vediamo di sistemare. Così vediamo come sta andando e ti faccio capire come gestire le img in un contesto responsive
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Avatar utente
Astro86
phpBB Expert
phpBB Expert
Messaggi: 924
Iscritto il: 12/08/2009, 14:36
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6
Database: MYSQL
Località: PC. Via localhost N° 82.51.149.40
Contatta:

Re: Problema allineamento immagine

Messaggio da Astro86 » 08/11/2015, 11:16

ops, non me la salvato a quanto pare.... ora lo rifaccio

Avatar utente
Astro86
phpBB Expert
phpBB Expert
Messaggi: 924
Iscritto il: 12/08/2009, 14:36
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6
Database: MYSQL
Località: PC. Via localhost N° 82.51.149.40
Contatta:

Re: Problema allineamento immagine

Messaggio da Astro86 » 08/11/2015, 11:29

ora dovrebbe essere a posto

Rispondi

Torna a “Web Design & Grafica”

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti