cerca questo:
Codice: Seleziona tutto
.social {margin-right: 3px;}
Codice: Seleziona tutto
.social {margin-right: 3px;margin-top: 5px;}
Codice: Seleziona tutto
.social {margin-right: 3px;}
Codice: Seleziona tutto
.social {margin-right: 3px;margin-top: 5px;}
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 ha scritto:se ho capito quello che intendi fai cosi:
cerca questo:e sostituisci conCodice: Seleziona tutto
.social {margin-right: 3px;}
risultatoCodice: Seleziona tutto
.social {margin-right: 3px;margin-top: 5px;}
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>..............
Codice: Seleziona tutto
.float_right_m{float:right;margin-top: 5px;}
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>
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
}
}
Visitano il forum: Nessuno e 9 ospiti