Witam,
Próbuje zrobić menu które tnie sobie obrazek i ustawia element normalny hover, i mam mały problem z ustawieniem pozycji każdego elementu w menu, otóż przycisk hover jest trochę szerszy niż w spoczynku i podczas gry najeżdżam myszką na element przycisk się powiększa i przesuwa inne divy, jest to strasznie uciążliwe i nie mam pomysłu jak sobie z tym poradzić. Czy jest jakiś sposób aby ustawić żeby div nie działał na inne (tzn nie przesuwał ich). Jeszcze jedno pytanie z innej beczki, jaki sposób jest najlepszy to pozycjonowania elementów, position: relative to dobry pomysł?

1) Najlepiej wrzuć kod*, będzie łatwiej dla wszystkich. Najprościej to chyba byłoby ustawić szerokość przycisku w spoczynku do takiej samej szerokości jak szerokość hover.
EDIT: albo wrzuć to menu do pojemnika odpowiedniej szerokości (czyli takiej jak ten przycisk hover), wtedy nic nie będzie Ci się przesuwać.

2) position: relative; to bardzo dobry pomysł.


___________________
* Bo nie wiem, czy Cię dobrze zrozumiałem.

Dobrze mnie zrozumiałeś, z tym żeby ustawić takie same szerokości to właśnie wpadłem, przed przeczytaniem Twojego postu, lecz nadal mam problem, ponieważ gdy używam position: relative; przesuwam obiekt powiedzmy o 200px w górę, lecz przesuniecie diva obok nadal zostaje, chodzi mi tutaj tekst który przesunął się w divie.
Coś wydłubałem żeby pokazać tutaj.

Hmm, przyznam, że teraz jednak przestałem rozumieć. Przy najeżdżaniu na menu nic się nie przesuwa ani nie podskakuje. Napisz dokładnie, bez skrótów myślowych o co Ci chodzi, bo jakoś nie umiem skumać
Przede wszystkim nie rozumiem tego zdania:

W szczególności co to znaczy "przesunięcie diva obok nadal zostaje"?

Chodzi mi dokładnie o to, zauważ że "O nas" przewraca wszystko w divie i idzie na górę, chciałbym tylko, żeby nie ruszał innych.

Ok, to teraz napisz, jakiej używasz przeglądarki. Ja używam IE9, sprawdzałem też w najnowszym Firefoxie (chyba beta 10, czy coś takiego), i nic mi się nie przewraca ani nie przesuwa, wszelkie divy stoją tak jak stały. A sam przycisk ładnie wygląda...

EDIT: ok, jednak widzę, co jest źle. Dałeś

[CSS] pobierz, plaintext 
display: inline;
[CSS] pobierz, plaintext 

dla elementów menu?

Niestety ale nie, efekt jaki chce uzyskać to menu poukładać wokół loga, poprzez position: relative.

Aa, to trzeba było mówić od razu, że wokół loga
W takim układzie zrobiłbym to tak, że każdy element, który ma być linkiem (czyli pozycją menu) wstawiłbym do odpowiedniego pudełka (czyli tyle pudełek, ile linków) i wszystko wypozycjonował wokół loga.
Oczywiście wielkość pudełka musi być odpowiednia, żeby chmurki Ci się mieściły i nie powodowały podskoczeń inncyh warstw. Przykładowy kod dla 6 linków (w tym przypadku zamiast position: relative; lepiej użyć float: left/right;):

[CSS] pobierz, plaintext 
#strona
{
	width: 600px;
	height: 300px;
	background: yellow;
	margin: 20px auto;
}
 
#logo
{
	width: 100px;
	height: 50px;
	background: green;
	float: left;
}
 
#gora
{
	width: 100px;
	height: auto;
	background: #099;
	margin-left: 50px;
}
 
#srodek
{
	width: 200px;
	height: auto;
	background: #079;
	clear: both;
}
 
#dol
{
	width: 100px;
	height: auto;
	background: #059;
	clear: both;
	margin-left: 50px;
}
 
#link1
{
	width: 50px;
	height: 20px;
	background: cyan;
	float: left;
}
 
#link2
{
	width: 50px;
	height: 20px;
	background: magenta;
	float: right;
}
 
#link3
{
	width: 50px;
	height: 20px;
	background: blue;
	float: left;
	margin-top: 15px;
}
 
#link4
{
	width: 50px;
	height: 20px;
	background: red;
	float: right;
	margin-top: 15px;
}
 
#link5
{
	width: 50px;
	height: 20px;
	background: grey;
	float: left;
}
 
#link6
{
	width: 50px;
	height: 20px;
	background: orange;
	float: right;
}
[CSS] pobierz, plaintext 

Strona:

[HTML] pobierz, plaintext 
<article id="strona">
	<section id="gora">	
		<section id="link1">
			Link 1
		</section>
 
		<section id="link2">
			Link 2
		</section>
	</section>
 
	<section id="srodek">
		<section id="link3">
			Link 3
		</section>
 
		<section id="logo">
			Logo
		</section>
 
		<section id="link4">
			Link 4
		</section>
	</section>
 
	<section id="dol">
		<section id="link5">
			Link 5
		</section>
 
		<section id="link6">
			Link 6
		</section>
	</section>
</article>
[HTML] pobierz, plaintext 

Chyba że nie o to Ci chodzi, to krzycz

Poukładać do okoła loga? Co przez to rozumiesz? Jeżeli chcesz to poukładać tak, że jeden element wchodzi na drugi, to żeby jeden element nie przesuwał drugi, to najlepiej jak użyjesz pozycjonowania absolutnego, wyłączając jakby dane elementu. Dzięki czemu jeden będzie mógł być blisko drugiego jednocześnie nie wpływając na jego pozycje. Elementy pozycjonowane relatywnie, zachowują się jak bloki i jeżeli ułożysz je obok siebie, i zmienisz dynamicznie któremuś wysokość/szerokość, to automatycznie pozostałe elementy zostaną przesunięte i to jest w sumie całkiem normalne zachowanie tych elementów. Nadaj elementowi nadrzędnemu position:relative. A elementom które są jego dziećmi (czyli twoje przyciski menu), nadaj position:absolute i baw się w przesuwanie. U mnie aktualnie w 1920x1080 przyciski wyglądają tak: http://dl.dropbox.com/u/36249378/taft.png i pozycja tych elementów jest zależna od rozdzielczości przeglądarki. Nie wiem do końca jaki efekt chcesz osiągnąć, ale raczej nie taki: http://dl.dropbox.com/u/36249378/taft2.png

Dziękuje wszystkim za pomoc Zrobiłem to tak: ustawiłem margin: 0 auto; na ul żeby na różnych rozdzielczościach nie skakało i pozycja relative żeby była taka sama i działa