Wygląda to w tej chwili tak: http://www.tepi.pl/meble.tepi.pl/

A chcę żeby wszystkie obrazki były w jednej linii i to bez żadnych przerw. Efekt rollover zaczerpnięty z tąd: http://m1chu.eu/2008/07/08/efekt-rollover-...ywania-obrazka/

jeśli dla LI ustawię display: inline-table to jest w jednej linii, ale z przerwami i wyłącznie w firefoxie. W IE nie zmienia się nic. Nie znalazłem rozwiązania w internecie.

Kod odpowiedzialny za tą część poniżej:


Xhtml

[HTML] pobierz, plaintext 
<ul>
  <li><a href="http://meble.tepi.pl" id="mainpage"><img src="images/mainpage.gif" width="118" height="100" border="0" alt="[Rozmiar: 1197 bajtów]" /></a></li>
  <li><a href="#" id="aboutus"><img src="images/aboutus_menu.gif" width="75" height="100" border="0" alt="[Rozmiar: 618 bajtów]" /></a></li>	
  <li><a href="#" id="kitchens"><img src="images/kitchens.gif" width="143" height="100" border="0" alt="[Rozmiar: 1253 bajtów]" /></a></li>
  <li><a href="#" id="warderobe"><img src="images/warderobe.gif" width="87" height="100" border="0" alt="[Rozmiar: 669 bajtów]" /></a></li>
  <li><a href="#" id="officefurniture"><img src="images/officefurniture.gif" width="130" height="100" border="0" alt="[Rozmiar: 1226 bajtów]" /></a></li>	
  <li><a href="#" id="shop"><img src="images/shop.gif" width="90" height="100" border="0" alt="[Rozmiar: 676 bajtów]" /></a></li>	
  <li><a href="#" id="contactus"><img src="images/contactus.gif" width="87" height="100" border="0" alt="[Rozmiar: 789 bajtów]" /></a></li>
 </ul>
[HTML] pobierz, plaintext 

Style

[HTML] pobierz, plaintext 
#part_top ul, #part_top ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
 
#part_top ul li {
display: inline;
white-space: nowrap;
}
 
#aboutus {
display: block;
width: 75px;
height: 50px;
overflow: hidden;
}
 
#mainpage {
display: block;
width: 118px;
height: 50px;
overflow: hidden;
}
 
#kitchens {
display: block;
width: 143px;
height: 50px;
overflow: hidden;
 
}
 
#warderobe {
width: 87px;
height: 50px;
display: block;
overflow: hidden;
}
 
#officefurniture {
width: 130px;
height: 50px;
display: block;
overflow: hidden;
}
 
#shop {
display: block;
width: 90px;
height: 50px;
overflow: hidden;
}
 
#contactus {
display: block;
width: 87px;
height: 50px;
overflow: hidden;
}
 
ul li a img {
display: block;
}
 
a:hover img {
margin-top: -50px;
}
[HTML] pobierz, plaintext 

http://www.kurshtml.boo.pl/css/poziome_menu,menu.html

W żadnym z tych przykładów nie ma połączenia <a> z <img> a takie jest moje połączenie. Sam tekst to nie problem wypoziomować.

Bo źle używasz w tym wypadku CSS. Obrazki powinny być tłem każdego <a> i w tedy dajesz sobie do a:hover background-position:-50px 0px 0px 0px i wyjdzie ci na to samo a przy okazji rozwiążesz swój problem

O Panie [']

To tak jakby wzywać dźwig do podniesienia cegłówki.

[CSS] pobierz, plaintext 
ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
 
ul li {
	float: left;
	background: url(http://www.64design.ovh.org/menu.jpg);
	width:143px
}
 
ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	text-align: center;
	color: #777;  /* TU SOBIE ZMIENIASZ KOLOR TEKSTU */
	padding: 10px;  /* TU ODLEGŁOŚĆ TEKSTU OD BOKÓW BLOKU */
}
 
ul a:hover {
	color: #000; /* TU SOBIE ZMIENIASZ KOLOR TEKSTU PO NAJECHANIU MYSZKĄ */
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<ul>
  <li><a href="http://domena.pl">Strona Główna</a></li>
  <li><a href="#">O nas</a></li>	
  <li><a href="#">Meble Kuchenne</a></li>
  <li><a href="#">Szafy</a></li>
  <li><a href="#">Meble biurowe</a></li>	
  <li><a href="#">Sklep</a></li>	
  <li><a href="#">Kontakt</a></li>
 </ul>
[HTML] pobierz, plaintext 

Zaoszczędzone chyba ponad 200% kodu, Poprawa o 200% SEO dla menu, zaoszczędzone z 500% transferu.

Jakbyś chciał, żeby długość tych menu była różna w zależności od tekstu, to musiałbyś dodać jeszcze jeden obrazek o szerokości 1px i dać go z lewej i włączyć mu powtarzanie tła, w zależności od długości tekstu, a na końcu dać drugi 1px obrazek z tym zakończeniem danego bloku co masz. Nie chciało już mi się tego pisać.

Dziękuje Wam za sugestie.

Ostatecznie zrobię tak jak jest to rozwiązane tutaj http://www.maplestudios.co.uk/
Czyli oprócz tego co napisał Blame dojdzie optymalizacja pod seo.

Damonsson, nie mogę tego napisać zwykłym tekstem. Mało kto ma Aller Light w komputerze