Mam problem z ustawieniem ikon. Ikony wyświetlane są pionowo a chcę żeby były wyświetlane poziomo i dodatkowo na środku tego diva w którym są umieszczone.
HTML
Kod
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<header>
<div id="logo-contener">
<div id="logo-text">
<div class="align-left">
contact@sasda.com
0000-000-000-00
</div>
<div class="align-right">
<ul class="link-net">
<li class="facebook"><a href="#" target="_self"></a></li>
<li class="rss"><a href="#" target="_self"></a></li>
<li class="dribble"><a href="#" target="_self"></a></li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<header>
<div id="logo-contener">
<div id="logo-text">
<div class="align-left">
contact@sasda.com
0000-000-000-00
</div>
<div class="align-right">
<ul class="link-net">
<li class="facebook"><a href="#" target="_self"></a></li>
<li class="rss"><a href="#" target="_self"></a></li>
<li class="dribble"><a href="#" target="_self"></a></li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
CSS
Kod
*{
margin:0;
padding:0;
}
#mainmenu{
margin:0 30%;
background:#fff;
}
#menu-contener{
background:#fff;
width:100%;
float:left;
border-bottom:1px solid #D2D2D2;
}
a {
font-family:'MuseoSlab500Regular','PT Sans',Verdana,Arial, sans-serif;
color:#000;
font-size:12px;
text-decoration:none;
line-height:1.3em;
display:block;
background:#fff;
}
ul {
margin:0;
padding:0;
list-style:none;
}
#logo-contener{
width:100%;
padding:0px;
margin:0px auto;
border-top:4px solid #008cf0;
border-bottom:1px solid #edebeb;
}
#logo-text{
font-family:'MuseoSlab500Regular','PT Sans',Verdana,Arial, sans-serif;
width:73%;
height:35px;
color:#000;
background:#fff;
margin:0px auto;
}
.align-left{float:left;width:30%; font-size:11px;height:35px;}
.align-right{
float: right;
width:70%;
}
.link-net .facebook a {background:url('facebook.png')no-repeat!important;width: 24px;height: 24px;margin-top:2px;opacity:.3;}
.link-net .rss a{background:url('rss.png')no-repeat!important;width: 24px;height: 24px;margin-top:2px;opacity:.3;}
.link-net .dribble a{background:url('dribble.png')no-repeat!important;width: 24px;height: 24px;margin-top:2px;opacity:.3;}
.link-net .facebook a:hover{opacity:.6;}
.link-net .rss a:hover{opacity:.6;}
.link-net .dribble a:hover{opacity:.6;}
.link-net{
list-style: none outside none;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
margin:0;
padding:0;
}
#mainmenu{
margin:0 30%;
background:#fff;
}
#menu-contener{
background:#fff;
width:100%;
float:left;
border-bottom:1px solid #D2D2D2;
}
a {
font-family:'MuseoSlab500Regular','PT Sans',Verdana,Arial, sans-serif;
color:#000;
font-size:12px;
text-decoration:none;
line-height:1.3em;
display:block;
background:#fff;
}
ul {
margin:0;
padding:0;
list-style:none;
}
#logo-contener{
width:100%;
padding:0px;
margin:0px auto;
border-top:4px solid #008cf0;
border-bottom:1px solid #edebeb;
}
#logo-text{
font-family:'MuseoSlab500Regular','PT Sans',Verdana,Arial, sans-serif;
width:73%;
height:35px;
color:#000;
background:#fff;
margin:0px auto;
}
.align-left{float:left;width:30%; font-size:11px;height:35px;}
.align-right{
float: right;
width:70%;
}
.link-net .facebook a {background:url('facebook.png')no-repeat!important;width: 24px;height: 24px;margin-top:2px;opacity:.3;}
.link-net .rss a{background:url('rss.png')no-repeat!important;width: 24px;height: 24px;margin-top:2px;opacity:.3;}
.link-net .dribble a{background:url('dribble.png')no-repeat!important;width: 24px;height: 24px;margin-top:2px;opacity:.3;}
.link-net .facebook a:hover{opacity:.6;}
.link-net .rss a:hover{opacity:.6;}
.link-net .dribble a:hover{opacity:.6;}
.link-net{
list-style: none outside none;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}