Witam.
Robię stronę do szkoły. I postanowiłem dodać dymek po najechaniu na avatar w stopce ale jestem zielony w pozycjonowaniu pomoże ktos ? Z góry Dziękuje za pomoc :)
HTML:
<!DOCTYPE HTML>
<html lang="PL">
<head>
<meta charset="Utf-8" />
<title>Komputronik</title>
<meta name="description" content="Strona poświęcona sklepowi internetowemu Komputronik" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="css/fontello.css" />
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.3.min.js"></script>
<script src="gallery.js"></script>
<script src="open.js"></script>
<script src="timer.js"></script>
<script src="dymek.js"></script>
</head>
<body onload="odliczanie()">
<div id="topbar">
<span class="ogloszenia">Ogłoszenia</span>
<span id="zegar"></span>
<span class="login">Logowanie | Rejestracja</span>
</div>
<div id="title">
<p id="logo"><a href="index.html">Komputronik</a></p>
</div>
<div id="menu">
<div id="nav">
<div id="button1">Elektronika<i class="demo-icon icon-down-open"></i></div>
<div id="button3">Usługi</div>
<div class="button2">Pomoc</div>
<div class="button2">Kontakt</div>
<div class="button2">Sklepy</div>
<div style="clear:both"></div>
</div>
</div>
<div id="box">
<div class="option"><img class="obrazek" src="img/obrazki/laptop.png" alt="Laptop"></div>
<div class="option"><img class="obrazek" src="img/obrazki/komputer.png" alt="Komputer"></div>
<div class="option"><img class="obrazek" src="img/obrazki/telefony.png" alt="Telefon"></div>
<div class="option"><img class="obrazek" src="img/obrazki/foto.png" alt="Foto"></div>
<div class="option"><img class="obrazek" src="img/obrazki/agd.png" alt="AGD"></div>
<div class="option"><img class="obrazek" src="img/obrazki/pc.png" alt="PC"></div>
</div>
<div id="gallery">
<p><img id="zdjecie_d" src="img/slajdy/slide1.jpg" alt="Duże zdjęcie" /></p>
<p class="galeria">
<a href="img/slajdy/slide1.jpg" title="Zdjęcie 1"><img src="img/slajdy/slide1.jpg" /></a><br />
<a href="img/slajdy/slide2.jpg" title="Zdjęcie 1"><img src="img/slajdy/slide2.jpg" /></a><br />
<a href="img/slajdy/slide3.jpg" title="Zdjęcie 1"><img src="img/slajdy/slide3.jpg" /></a><br />
<a href="img/slajdy/slide4.jpg" title="Zdjęcie 1"><img src="img/slajdy/slide4.jpg" /></a><br />
</p>
</div>
<div id="content">
<div class="foryou">
<h3>Dla Ciebie</h3>
<div class="dlaciebie">
<h4>Lenovo MIIX 3-1030</h4>
<img class="obrazek1"src="img/small/lenovo.png" />
<span class="cena">1200zł</span>
</div>
<div class="dlaciebie">
<h4>Lenovo Yoga Tablet 2</h4>
<img class="obrazek1"src="img/small/lenovo1.png" />
<span class="cena">820zł</span>
</div>
<div class="dlaciebie">
<h4>Lenovo MIIX 3-1035</h4>
<img class="obrazek1"src="img/small/lenovo2.png" />
<span class="cena">2500zł</span>
</div>
<div class="promocja">
</div>
</div>
<div class="foryou">
<h3>Nowe produkty</h3>
<div class="news">
<h4>Huawei P9</h4>
<img class="obrazek1"src="img/small/hua.png" />
<span class="opis">Smartfon wyposażony w podwójny aparat fotograficzny opracowany we współpracy z firmą Leica.Całość uzupełniają topowe podzespoły.</span>
</div>
<div class="news">
<h4>Sony Playstation VR</h4>
<img class="obrazek1"src="img/small/sony.png" />
<span class="opis">Nowy system wirtualnej rzeczywistości dla konsoli PlayStation 4, dzięki znajdziesz się w akcji.</span>
</div>
</div>
<div class="foryou">
<h3>Informacje</h3>
<div class="info">
<p class="data">24-04-2016</p>
<p class="ifo">Konin – awaria sieci elektrycznej</p>
</div>
<div class="info">
<p class="data">20-03-2016</p>
<p class="ifo">Szczecin – nowy sklep</p>
</div>
<div class="info">
<p class="data">17-02-2016</p>
<p class="ifo">Ostrołęka – remont salonu</p>
</div>
<div class="info">
<p class="data">10-01-2016</p>
<p class="ifo">Zapraszamy do salonu w Gliwicach</p>
</div>
</div>
</div>
<div id="footer">
<div id="flogo">
<span id="logo2">Komputronik</span><br />
<span id="logo1">Sklep internetowy</span>
</div>
<div id="kontakt">
<h2>Kontakt</h2>
<p>Infolinia: (61) 668 00 07, (801) 566 788<br/>
poniedziałek-piątek 8:00 - 21:00<br />
sobota 9:00 - 16:00<br /><br />
Centrala firmy: <br />
Komputronik S.A.<br />
ul. Wołczyńska 37, 60-003 Poznań<br />
tel. (61) 668 00 00, e-mail: office@komputronik.pl</p>
</div>
<div id="finfo">
<h2>Informacje</h2>
<ul>
<li>Przewodnik po sklepie</li>
<li>FAQ</li>
<li>Regulamin sklepu</li>
<li>Jak kupywać ?</li>
</ul>
</div>
<div id="autor">
<h2 id="popis">Autor</h2>
<a href="#"><img src="img/small/avatar.png" class="dymek" style="float: right;" alt="avatar" width="70px" height="70px"/></a>
<span class="podpis">Michał Warmuz</span>
<span class="pokaz">Wszelkie prawa zastrzeżone ©</span>
<span class="pokaz1">Witaj na stronie</span>
</div>
</div>
</body>
</html>
CSS:
body {
/* Background pattern from subtlepatterns.com */
background-image: url("img/tlo.png");
margin: 0 !important;
font-size: 20px;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
}
#title {
font-family: 'Raleway', sans-serif;
width: 80%;
padding: 20px 40px;
height: 100px;
text-align: center;
}
#logo {
font-size: 44px;
letter-spacing: 3px;
color: #0072BC;
font-weight: 700;
}
#logo a {
text-decoration: none;
color: #0072BC;
}
#logo a:hover {
opacity: 0.7;
}
#menu {
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
width: 99%;
height: 50px;
padding: 10px;
}
#nav {
margin-left: 50px;
margin-right: 50px;
}
#button1 {
width: 140px;
height: 30px;
background-color: #0AA699;
text-align: center;
padding: 10px;
border-radius: 7px;
float: left;
cursor: pointer;
}
#button1:hover {
background-color: #099588;
}
#button3 {
width: 100px;
height: 30px;
background-color: #7D074F;
text-align: center;
padding: 10px;
border-radius: 7px;
float: left;
margin-left: 100px;
cursor: pointer;
}
#button3:hover {
background-color: #6C063E;
}
.button2 {
width: 100px;
height: 30px;
background-color: #1F3853;
text-align: center;
padding: 10px;
border-radius: 7px;
float: right;
margin-left: 20px;
cursor: pointer;
}
.button2:hover {
background-color: #0E2742;
}
#gallery {
margin-top: 40px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 350px;
padding: 30px 30px;
}
#zdjecie_d {
border: solid 1px #ccc;
width: 650px;
height: 325px;
padding: 5px;
float: right;
margin-right: 25px;
}
.galeria img {
border: solid 1px #ccc;
width: 80px;
height: 70px;
padding: 4px;
margin-left: 100px;
}
.galeria img:hover {
border-color: #ff9900;
}
#box {
width: 918px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
.option {
width: 260px;
height: 100px;
border: 1px solid #ccc;
float: left;
margin: 2px;
padding: 20px;
}
.obrazek {
display: block;
margin: 0 auto;
}
#content {
width: 900px;
margin-left: auto;
margin-right: auto;
height: 500px;
}
.foryou {
width: 273px;
padding: 10px;
height: 600px;
border: 1px solid #ccc;
margin-right: 5px;
float: left;
}
.info {
color: black;
width: 275px;
height: 80px;
border-bottom: 1px dotted #ccc;
margin-bottom: 5px;
}
h3 {
text-align: center;
color: #0072BC;
border-bottom: 1px solid #0072BC;
margin-bottom: 20px;
}
.data {
color: #0072BC;
font-size: 15px;
font-weight: 700;
}
.ifo {
color: black;
margin-bottom: 5px;
font-size: 17px;
font-weight: 700;
}
#topbar {
width: 100%;
height: 22px;
background-color: black;
padding: 4px;
font-size: 15px;
}
.ogloszenia {
float: left;
margin-left: 100px;
}
.login {
float: right;
margin-right: 100px;
}
#zegar {
margin-left: 400px;
}
.dlaciebie {
color: black;
width: 275px;
height: 150px;
border-bottom: 1px dotted #ccc;
margin-bottom: 5px;
}
h4 {
color: black;
}
.obrazek1 {
float: left;
margin-bottom: 10px;
}
.cena {
float: right;
color: #BA0000;
margin-right: 60px;
margin-top: 20px;
}
.opis {
color: black;
font-size: 10px;
font-weight: 700;
line-height: 0,5 cm;
}
.news {
color: black;
width: 275px;
height: 170px;
backkground-color: white;
border-bottom: 1px solid #ccc;
margin-bottom: 5px;
}
#footer {
margin-top: 150px;
width: 90%;
height: 230px;
padding: 10px 5%;
background-color: #ccc;
}
#flogo {
width: 25%;
height: 150px;
border-right: 1px solid #bbb;
padding: 40px 0;
float: left;
}
#kontakt {
width: 15%;
height: 190px;
border-right: 1px solid #bbb;
padding: 20px 5%;
font-size: 10px;
float: left;
color: #555;
}
#finfo {
width: 15%;
height: 190px;
border-right: 1px solid #bbb;
padding: 20px 5%;
font-size: 10px;
float: left;
color: #555;
}
#autor {
width: 20%;
height: 190px;
padding: 20px 2%;
font-size: 10px;
float: left;
color: #555;
}
#logo2 {
font-size: 44px;
color: #0072BC;
font-weight: 700;
}
#logo1 {
font-size: 20px;
color: #0072BC;
font-weight: 700;
margin-left: 100px;
}
h2 {
color: #0072BC;
border-bottom: 1px solid #0072BC;
margin-bottom: 20px;
}
.podpis {
float: left;
font-weight: 700;
font-size: 22px;
}
#popis {
text-align:center;
font-size: 15px;
}
.pokaz1 {
border: 1px solid #555;
border-radius: 10px;
padding: 2px;
position: fixed;
}
