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.
juventissimo
Utente
Utente
Messaggi: 243
Iscritto il: 11/12/2011, 12:21
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL 5.5.36-34.2-log
Contatta:

Re: Problema allineamento immagine

Messaggio da juventissimo » 08/11/2015, 17:54

se ho capito quello che intendi fai cosi:
cerca questo:

Codice: Seleziona tutto

.social {margin-right: 3px;}
e sostituisci con

Codice: Seleziona tutto

.social {margin-right: 3px;margin-top: 5px;}
risultato

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, 18:31

juventissimo ha scritto:se ho capito quello che intendi fai cosi:
cerca questo:

Codice: Seleziona tutto

.social {margin-right: 3px;}
e sostituisci con

Codice: Seleziona tutto

.social {margin-right: 3px;margin-top: 5px;}
risultato
il .social sta apposto, già e allineato al div grazie al parametro line-height:32px; incerito nel css della barra superiore, il problema è .hide_social che quando lo si visualizza in formato smartphone (o con risoluzione inferiore a 500px di larghezza) non mi allinea le icone al div.

juventissimo
Utente
Utente
Messaggi: 243
Iscritto il: 11/12/2011, 12:21
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL 5.5.36-34.2-log
Contatta:

Re: Problema allineamento immagine

Messaggio da juventissimo » 08/11/2015, 18:43

ah...
allora forse ho capito, ho fatto un'altra prova.
ho dato alla versione mobile un altra classe

HTML

Codice: Seleziona tutto

..........
        <!--ICONE SOCIAL SMATPHONE-->
        <div class="hide_social">
            <div class="float_right_m"><a href="https://www.facebook.com/" target="new"><img src="https://placehold.it/24x24" width="24" height="24"  alt="Seguici su Facebook"/></a></div>
            <div class="float_right_m"><a href="https://plus.google.com/" target="new"><img src="https://placehold.it/24x24" width="24" height="24"  alt="Entra nella cerchia"/></a></div>
            <div class="float_right_m"><a href="https://twitter.com/" target="new"><img src="https://placehold.it/24x24" width="24" height="24"  alt="Seguici su Twitter"/></a></div>
            <div class="float_right_m"><a href="https://www.youtube.com/" target="new"><img src="https://placehold.it/24x24" width="24" height="24"  alt="Iscriviti al canale"/></a></div>
        </div>..............
CSS

Codice: Seleziona tutto

.float_right_m{float:right;margin-top: 5px;}
e cosi funziona

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, 18:49

Non è proprio così semplice. Ecco come ho modificato il tuo codice
HTML

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>
<body>
    <!--BARRA SUPERIORE-->
    <div class="top_bar">
        <div class="float_left"><a href="http://miosito.it"><img src="https://placehold.it/32x32" alt="<?php echo $sitename ?>" border="0"/></a>
        </div>
        <!--ICONE SOCIAL-->
        <div class="social-icons">
            <div class="float_left"><div class="font1">Finalmente la Tana dei youtubers e qui!</div></div>
            <div class="float_right social"><a href="https://www.facebook.com/" target="_black"><img src="https://placehold.it/32x32"  alt="Seguici su Facebook"/></a></div>
            <div class="float_right social"><a href="https://twitter.com/" target="_black"><img src="https://placehold.it/32x32" alt="Seguici su Twitter"/></a></div>
            <div class="float_right social"><a href="https://www.youtube.com/" target="_black"><img src="https://placehold.it/32x32" alt="Iscriviti al canale"/></a></div>
            <div class="float_right social"><a href="https://plus.google.com/" target="_black"><img src="https://placehold.it/32x32" alt="Entra nella cerchia"/></a></div>
        </div>
    </div>
    <!--SPAZIO PUBBLICITA'-->
    <div class="adv">Nessuna pubblicità disponibile.</div>
    <!--CONTENITORE-->
    <div class="container">
    <!--MENU SMARTPHONE-->
        <div class="smallbar">
            <div class="smallmenu">
<a href="index.html">Home</a> - <a href="forum/index.php">Community</a> - <a href="youtubers-list.html">Youtubers</a> - <a href="channels-list.html">Canali</a>
            </div>
        </div>
        <!--MENU STANDARD ESTESO-->
        <div class="menu">
            <div class="cat">Principale</div>
            <a href="index.html"><div class="choice">Home</div></a>
            <a href="forum/index.php"><div class="choice">Community</div></a>
            <a href="youtubers-list.html"><div class="choice">Youtubers</div></a>
            <a href="channels-list.html"><div class="choice">Canali</div></a>
            <div class="cat">Servizi</div>
            <a href="download/list.php"><div class="choice">Download</div></a>
            <a href="guide.html"><div class="choice">Videoguide</div></a>
            <div class="cat">Altro</div>
            <a href="link.html"><div class="choice">Link Consigliati</div></a>
            <a href="donate.html"><div class="choice">Donaci</div></a>
        </div>
        <!--CONTENUTO CONTENITORE-->
        <div class="content">PARTE PHP DEL SITO</div>
    </div>
</body>
</html>
CSS

Codice: Seleziona tutto

body {
	background-image: url(../images/socialBg.png);
	background-repeat: repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.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;
	
}
.float_left{float:left;}
.float_right{float:right;}
.social{margin-right:3px;}
.adv{
	background-color:#FFF;
	text-align:center;
	margin: 0 auto;
	width: 600px;
	min-width:100px;
	border:#666 1px dashed;
	margin-bottom:30px;
}
.container{
	width:800px;
	min-height:500px;
	margin: 0 auto;
	border:#666 1px solid;
	background-color:#FFF;
	box-shadow: 0px 3px 5px 0px #888888;
	overflow:auto;
	
}
.hide_social{
	display:none;
	margin-left: 10px;
}
.smallbar{
	height:16px;
	background-color:#333;
}
.smallmenu{display:none;}
.menu{
	width:200px;
	height:auto;
	border:#666 1px solid;
	border-left:hidden;
	border-top:hidden;
	box-shadow: 0px 3px 5px 0px #888888;
	float:left;
}
.content{
	width:520px;
	min-height:150px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	padding:10px;
	border:#333 1px solid;
	float:left;
}
.choice{
	height:25px;
	line-height:25px;
	text-align:center;
	background-color:#333;
	color:#CCC;
}
.cat{
	height:25px;
	line-height:25px;
	text-align:center;
	background-color:#666666;
	color:#CCC;
}
.choice:hover{
	background-color:#666;
	border:#333 1px dashed;
}
.menu a:link{color:#CCC}
.menu a:visited{color:#FFF}
.scrollbar{
	border-bottom:#333 3px solid;
	height: auto;
	max-height:300px;
	width: 530px;
	overflow-y: auto;
	margin-bottom: 25px;
}
.news{
	padding-left:5px;
	font-size:14px;
	height:15px;
	line-height:15px;
	background-color:#333;
	color:#CCC;
	word-wrap:break-word
}
.avatar-box{
	width:100px;
	height:100px;
	border:#333 2px solid;
	margin-left: 5px;
	margin-bottom: 5px;
	float:left;
}
.avatar-box > img { width: 100%; height: auto; }
.download-box{
	height:50px;
	margin-bottom:5px;
	border:#666 1px dashed;
	border-left:#333 3px solid; 
}
.img-download{
	float:left;
	width:50px;
	height:50px;
	border-right:#333 1px solid;
}
.img-download > img { width: 100%; height: auto; }
.down-text{
	padding-left:5px;
	font-size:14px;
	height:15px;
	line-height:15px;
	height: auto;
	max-height:50px;
	width: 457px;
	overflow-y: auto;
	word-wrap:break-word
}
/*RESPONSITIVE*/
@media screen and (max-width: 500px) {
.font1 {
	font-size:10px;
	}
.social {display:none}

.container{
	width:300px;
	min-height:500px;
	margin: 0 auto;
	border:#666 1px solid;
	background-color:#FFF;
	overflow:auto;
	
}
.content{
	width:260px;
	min-height:150px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	padding:10px;
	border:#333 1px solid;
	float:left;
}
.scrollbar{
	border-bottom:#333 3px solid;
	height: auto;
	width:270px;
	max-height:100px;
	overflow-y: auto;
	margin-bottom: 25px;
}
.adv{
	background-color:#FFF;
	text-align:center;
	margin: 0 auto;
	width: 300px;
	min-width:100px;
	border:#666 1px dashed;
	margin-bottom:30px;
}
.hide_social{
	display:inline;
	line-height:32px;
	margin-left: 10px;
}
.smallmenu{
	display:block;
	font-size:14px;
	line-height:16px;
	color:#999;
}
.smallmenu a:link{color:#CCC}
.smallmenu a:visited{color:#FFF}
.menu{display:none}
.down-text{
	padding-left:5px;
	font-size:14px;
	height:15px;
	line-height:15px;
	height: auto;
	max-height:50px;
	width: 200px;
	overflow-y: auto;
	word-wrap:break-word
}
.news{
width:260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}


/**
 * Sir Xiradorn Social Icons
 */

/* First a fast clearfix */
.social-icons {
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  .social-icons .social {
    display: block;
  }
  
  .top_bar .float_left {
    margin-right: 2px;
  }
  
  .top_bar .float_left .font1 {
    font-size: .55em
  }
}

/* for smaller device */
@media screen and (max-width: 350px) {
  .float_right img, .float_left img {
    width: 24px;
  }
  
  /* height fix for topbar */
  .top_bar {
    height: 25px;
    line-height: 28px;
  }
  
  .top_bar > .float_left {
    margin-right: 2px;
  }
  
  .top_bar .float_left .font1 {
    font-size: .6em
  }
}
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
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, 18:50

Il testo e gli spazi sono stati ottimizzati. Il lavoro è stato fatto in fretta ma tu puoi migliorare ancora quel punto.

Le modifiche CSS sono alla fine così si capisce cosa ho modificato e soprattutto COME
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 » 09/11/2015, 10:44

grande Sir... vedendo cosi sei intervenuto sulla top_bar (non ci ho proprio pensato io xD) grazie ai tuoi suggerimenti e al tuo punto di partenza credo proprio che riuscirò a fare una buona home page... spero di mantenere l'ordine xD

Rispondi

Torna a “Web Design & Grafica”

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite