W tym kodzie jest trochę błędów. Tak więc dam ci kilka rad:
Po pierwsze staraj się, aby kod był przejrzysty tj. odpowiednio używaj tab'a lub kilku spacji (po wytabowaniu tego kodu widać że jeden div nie jest zamknięty). I jeśli w jednym miejscu w klasie w CSS używasz 4 spacji to w innym w tej samej klasie nie używaj 5
Po drugie w CSS'ie po dwukropku używa się jednej spacji lub wogóle się jej nie używa, dla przykładu mój chrome nie rozpoznawał większości wartości, ponieważ były tam dwie spacje.
Przyznam że gdy zobaczyłem co było napisane w CSS'ie "#myButton" to trochę się zdziwiłem. Niżej masz poprawiony kod porównaj go sobie z tym który masz. Mam nadzieje że pomogłem :D
<body onload="odliczanie();">
<img src="pic/black_scales.png"/>
<div id="container">
<img src="pic/logo.png" alt="moje logo" />
<img style="vertical-align: middle">
<div id="zegar">
<script src="timer.js"></script>
</div>
<div id="nav">
<ul>
<li><a href="index.html" class="myButton"><img src="pic/main.png" alt="index" width="40" height="40" /></a></li>
<li><a href="blog.html" class="myButton"><img src="pic/blog.jpg" alt="BLOG" width="60" height="40" /></a></li>
<li><a href="galery.html" class="myButton"><img src="pic/gallery.png" alt="Galery" width="50" height="40" /></a></li><li>
<a href="kontakt.html" class="myButton"><img src="pic/kontakt.png" alt="Kontakt" width="60" height="40" /></a></li>
</ul>
</div>
<div id="content">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div id="socjal">
<ul>
<li><a href="https://www.facebook.com/" class="myButton"><img src="pic/org-fb.png" alt="facebook" width="45" height="50"/></a></li>
<li><a href="https://www.youtube.com/" class="myButton"><img src="pic/youtube.jpg" alt="youtube" width="45" height="50"/></a></li>
<li><a href="https://plus.google.com/" class="myButton"><img srs="https://twitter.com/"class="myButton"><img src="pic/twitter.png" class="myButton"><img src="twitter" width="45" height="50"/></a></li>
<li><a href="img src="pic/gplus.png" class="myButton"><img srs=" alt="gplus" width="45" height="50"/></a></li>
<li><a href="https://www.twitter.com/" class="myButton"><img src="pic/twitter.png" alt="twitter" width="45" height="50"/></a></li>
</ul>
</div>
<div id="footer">
<h4> Robert Jeczminski © Robert BLOGS © 2016 <br/> Thank you for your visit! <i class="icon-mail-alt"></h4>
</div>
</div>
</body>
body {
background-color: #330033;
margin-left: auto;
margin-right: auto;
max-width: 960px;
/*Background pattern is downloaded from subtlepatterns.com*/
background-image: url("pic/connectwork.png");
color: #CBCBCB;
font-style: italic;
}
#container {
width: 960px;
color: #fff;
letter-spacing: 2mm;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
#img {
float: left;
margin-top: 3px;
}
#zegar {
background-color: black;
color: #FFFAF0;
font-size: 48px;
letter-spacing: 2px;
width: 520px;
float: right;
font-style: italic;
font-weight: bold;
margin-top: 3px;
margin-right: 0;
line-height: 1.2;
font-family: Arial, sans-serif;
border: 3px solid #73AD21;
clear: both;
}
#myButton {
font-size: 14px;
position: relative;
border-radius: 25px;
border-size: 3px;
height: 10px;
width: 25px;
text-shadow: 1px 0;
/* ???
Blur Radius: 10px;
class="myButton";
*/
}
#myButton:hover {
background-color: #476e9e;
}
#myButton:active {
position: relative;
top: 1px;
}
#ul, ul li {
display: inline-block;
list-style-type: none;
width: 20px;
margin: 2px;;
padding: 2px;
float: left;
}
#social-icon {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
margin: 2px;
border radius: 10px;
transition: 0.3s transform linear;
background-color: #330033;
opacity: 0.4;
margin-left: auto;
bottom: 0;
float: left;
}
#social-icon: hover {
transform: scale(1.2);
transition: 0.3s transform linear;
float: left;
}
#content {
border:2px solid green;
background-color: #000000;
color: #fff;
font-size: 24px;
margin-left: 125px;
position-top: 15%;
padding: 20px;
width:600px;
float: left;
}
#footer {
color: #fff;
background-color: #000000;
border: 2px solid green;
position: relative;
bottom: 1px;
color: #FFFAF0;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
vertical-align: bottom;
clear: both;
}
