CSS pozycjonowanie

[eldawido]

Witam, jestem mocno poczatkujący lecz zdeterminowany. Mój problem polega na tym, iż nie potrafie pozycjonowac obiektów w CSS.

To jest strona:

http://animacja.esy.es/

 

Chciałbym by logo (smok) był na menu -> w ten sposób:
[url=http://ifotos.pl/zobacz/Przechwyt_eaaeepq.PNG/][/url]

 

inny problem to jak zrobić by po najechaniu myszką na zdjęcie wysunęło się pole z tekstem ? Mi wysuwa się samo pole zaś tekst jest na zdjęciu.

 

Oraz zastanawia mnie jak zsynchronizowac ikone z tekstem (głowna, galeria, fb czy yt na dole..)

 

CSS:
 

/*
CSS file created with:Instantblueprint - Create a web project framework in seconds.
http://instantblueprint.com
Project: Animacja
File: css/style.css
Last edited: September 9, 2014, 4:13 pm
*/

/*  Main  */
body {
 background: #6594f5; 
 background-image: url(../images/background.png);
 background-repeat: no-repeat;
 background-position: center; 
 margin: 0 auto;
 color:#000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}

#BGimage{
	background: url(../images/BGimage.png);
	background-repeat: no-repeat;
	background-position: center; 
	height:500px;
}
#container{
	width: 960px;
	height: 500px;
	margin: 0 auto;
}
/* =logo-------------------------------*/

	
#logo-tlo{
	width: 296px;
	height: 220px;
	background: url(../images/logo-tlo.png) 0 40px;
	background-repeat: no-repeat;
	float: bottom;
	padding-top: 25px
	}
	
#logo-image{
	width: 296px;
	height: 220px;
	background: url(../images/logo-image.png) 0 40px;
	background-repeat: no-repeat;
	display:block;
	
	
	}
	
#logo-image:hover{
	opacity:0.9;
	filter:alpha(opacity=90); /* Dla internet exploera 8 i wcześniejszych */
	}
	
#menu{
	width: 960px;
	height: 65px;
	background: url(../images/menu.png);
	}
#menu ul{
	list-style: none;
	font-family: 'LithosPro';
	font-size: 20px;
	text-shadow: 4px 4px 4px #443915;
	color: #000;
	float: left;
	padding-left: 270px;
	}
	
#menu ul li{
	text-align: center;
	width: 80px;
	height: 50px;
	float:left;
	padding-top: 25px;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	}
	
#menu ul li.glowna{
	width: 80px;
	background: url(../images/glowna.png) 0 -3px;
	background-repeat: no-repeat;
}
#menu ul li.glowna:hover{
	background: url(../images/glownaactive.png) 0 -4px;
	background-repeat: no-repeat;}

#menu ul li.galeria{
	background: url(../images/galeria.png) 0 -3px;
	background-repeat: no-repeat;
	}
	#menu ul li.galeria:hover{
	background: url(../images/galeriaactive.png) 0 -3px;
	background-repeat: no-repeat;}
	
#menu ul li a{
	width: 80px;
	display: block;
	text-decoration: none;
	color: #000}
#menu ul li a:hover{
	Color: #003ab0}
	
	/*slide */

#slide{
	width: 820px;
	height: 280px;
	background: url(../images/slide.jpg);
	box-shadow: 15px 15px 10px #4d5b9e;
	font-family: Lithos Pro;
	font-size: 48px;
	margin: 0 auto;
	margin-top: 20px;}
	
.tekstslide1{
	font-family: Lithos Pro;
	text-shadow: 6px 6px 6px #443915;
	font-size: 48px;
	padding-left: 500px;
	padding-top: 70px;
	}
.tekstslide2{
	font-family: Lithos Pro;
	text-shadow: 6px 6px 6px #443915;
	font-size: 20px;
	padding-left: 580px;
	padding-top: 15px;
	}
	/*kolumny*/
	
#sekcje{
	width: 960px;
	height: 215px;
	margin-top: 50px;
	margin-bottom: 50px;
	}
	
#sekcje-odstep{
	width: 53.3px;
	height: 215px;
	}
	
.sekcje-odstep{
	width: 53.3px;
	height: 215px;
	float: left;
	}

.sekcja{
	width: 400px;
	height: 215px;
	float: left;
	}
	
.kolumna{
	width: 400px;	
	height: 215px;
	background: url(../images/kolumna.jpg) no-repeat;
	box-shadow: 15px 15px 10px #4d5b9e;
	overflow: hidden;
	
	}

.kolumnatekst{
	font-family: Bookman Old Style;
	font-size: 20px;
	text-shadow: 1px 1px 1px #443915;
	text-align: justify;
	text-decoration: none;
	color: #000;
	outline: none;
	line-height: 25px;
		
	}
.kolumnatekst:hover{
opacity: 0.8;
filter: alpha(opacity-80%);}

	/*STOPKA */
#stopka{
	width: 960px;
	height: 880px;
	background: url(../images/stopkazamek.png);
	margin-top: -40px;
	}
#facebook{
	width: 70px;
	height: 70px;
	background: url(../images/FBdol.png) no-repeat;
	float: left;
	margin: 770px 0px 0px -430px;
}
#facebook:hover{
	background: url(../images/FBdolactive.png) no-repeat;
	}
	
#youtube{
	width: 70px;
	height: 70px;
	background: url(../images/youtube.png) no-repeat;
	float: left;
	margin: 770px 0px 0px -340px;
}
#youtube:hover{
	background: url(../images/youtubeactive.png) no-repeat;
	}
	
#kontakt{
	width: 70px;
	height: 70px;
	background: url(../images/kontakt.png) no-repeat;
	float: right;
	margin: 770px 250px 0px 0px;
	}
	
.kontakttekst{
	font-family: Bookman Old Style;
	font-size: 20px;
	line-height: 30px;
	float: right;
	margin: 775px -270px 0px 10px;
	}
#div{}	
	

#div1 {
  width:450px;
  height:300px;
  background: url(../images/obrazek1.png) no-repeat;
  padding:0px;
  font-size:1.2em;
  float:left;
  transition-duration: 2s;
}

#div1:hover {
  width:900px;
  height: 300px;
  background-color:#6780ff;
  
}

Edytowane 11 września 2014 przez eldawido

[creeper]

Tak na szybko:

 

żeby smok był na belce: do id #logo-image dodaj:

margin-top: 45px;

position: absolute;

 

Nie wiem o jaki tekst ci chodzi po najechaniu, ale możesz np. dodać title do linka

 

<a id="logo-image" href="#" title="smok"></a>

 

Wtedy po najechaniu wyświetli się tekst "smok"