Hallo bin in HTML ein wenig vertaut und versuche es mir gerade anzueignen :)
Ich habe aus dem Internet einen Code für Social Media Buttons herausgefunden und wollte Ihn in meine Homepage einbauen nur habe ich folgendes Problem:
Wenn ich den Code des HTML in meine Aside Section rein mache, ist das Feld nicht dort wo ich es gerne hätte.
Ich weiß mit bisschen rum schrauben an der CSS, würde ich es bestimmt schaffen aber ich verstehe rein aus der Logik nicht, wenn ich das Element in diese Section mache, warum Sie nicht dort bleibt.
<P> Ein Text bleibt ja auch genau in dieser Section</p>
Bitte um eure Hilfe
Hier der HTML Code der Social Media Banners:
Die CSS der Social Media Banners:
Hier ein Ausschnitt meines HTML Codes der Homepage:
Der CSS Code meiner Seite ( Ausschnitt):
Ich habe aus dem Internet einen Code für Social Media Buttons herausgefunden und wollte Ihn in meine Homepage einbauen nur habe ich folgendes Problem:
Wenn ich den Code des HTML in meine Aside Section rein mache, ist das Feld nicht dort wo ich es gerne hätte.
Ich weiß mit bisschen rum schrauben an der CSS, würde ich es bestimmt schaffen aber ich verstehe rein aus der Logik nicht, wenn ich das Element in diese Section mache, warum Sie nicht dort bleibt.
<P> Ein Text bleibt ja auch genau in dieser Section</p>
Bitte um eure Hilfe
Hier der HTML Code der Social Media Banners:
HTML:
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3 and HTML5 Social media icons</title>
</head>
<body>
<div class="wrapper">
<a class="icon facebook" href="#"><span class="zocial-facebook"></span></a>
<a class="icon twitter" href="#"><span class="zocial-twitter"></span></a>
<a class="icon linkedin" href="#"><span class="zocial-linkedin"></span></a>
<a class="icon youtube" href="#"><span class="zocial-youtube"></span></a>
<a class="icon flickr" href="#"><span class="zocial-flickr"></span></a>
<a class="icon email" href="#"><span class="zocial-email"></span></a>
</div>
</body>
</html>
Die CSS der Social Media Banners:
HTML:
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
body{
background: url("http://subtlepatterns.com/patterns/cloth_alike.png") repeat scroll 0% 0% transparent;
}
.wrapper{
width: 325px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -162px;
margin-top: -25px;
}
.icon{
display: inline-block;
position: relative;
color: #bdbdbd;
width: 50px;
height: 50px;
text-align: center;
font-size: 1.47em;
line-height: 2em;
background-color: #fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
box-shadow: 0px 3px 0px #bdbdbd, 0px 3px 10px #bababa;
-webkit-transition:background-color 250ms ease 0s;
transition:background-color 250ms ease 0s;
}
.zocial-facebook{margin-left: -8px}
.icon.facebook:hover{background-color: #4986c7;}
.twitter:hover{background-color: #4cb6e8;}
.linkedin:hover{background-color: #29a0cc;}
.youtube:hover{background-color: #a32929;}
.flickr:hover{background-color: #c257ad;}
.email:hover{background-color: #d5b120;}
a{
text-decoration: none;
}
.icon:hover{
color: #fff;
box-shadow: 0px 3px 0px #686868, 0px 3px 10px #7e7e7e;
}
.icon:active{
box-shadow: inset 0px 1px 4px #3d3d3d, 0px 0px 0px #bdbdbd;
top: 3px;
}
Hier ein Ausschnitt meines HTML Codes der Homepage:
HTML:
<section id="main">
<article>
<section>
<h2></h2>
<p>blablabla></p>
</section>
<section>
<h2>blablablabla</h2>
<p>blabla</p>
</section>
</article>
<aside>
<section>
<h2>Social Media</h2>
<ul class="wrapper">
<a class="icon facebook" href="#"><span class="zocial-facebook"></span></a>
<a class="icon youtube" href="#"><span class="zocial-youtube"></span></a>
<a class="icon email" href="#"><span class="zocial-email"></span></a>
</ul>
</section>
Der CSS Code meiner Seite ( Ausschnitt):
HTML:
#main aside {
display:inline-block;
width:30.6%;
margin-left:3%;
padding:0em;
vertical-align:top;
box-shadow: 0px 0px 20px 5px #999;
border-radius:18px;
}
#main aside section {
margin-bottom:1.563em;
border-bottom: 0.188em solid #E7590B;
}
#main article h2 {
padding:1em 1.8em 1em 1.8em;
}