Witam
Mam chyba dość banalny problem jednak nie mogę wpaść na jego rozwiązanie.
Mam do zakodowania taką stronę.



I chce żeby każdy element to znaczy(samochód,drukarka,etc.) były osobnymi elementami a nie jako jedno tło.
I teraz mam problem jak zrobić żeby dany element był zawsze w tym samym miejscu bez względu na rozdzielczość.
Całą stronę mam w divie o stałej szerokości 1008px,

Fragment kodu z obrazkiem

[HTML] pobierz, plaintext 
<div id="samochod">
         <a href="#s"><img src="img/auto_txt.png" id="auto_txt"/></a>
         <img src="img/auto_cr.png" id="auto_foto" />
    </div>
[HTML] pobierz, plaintext 

I kod css do tego elementu

[HTML] pobierz, plaintext 
#auto_foto {
    float: right;
    margin-left: -61px;
    margin-right: -9px;
    margin-top: 273px
}
#auto_txt {
	margin-bottom:-260px;
	margin-right:-160px;
	margin-left:40px;
}
[HTML] pobierz, plaintext 

No i dla rozdzielczości laptoptopowej to dobrze wszystko się wyświetla ale dla większych lub mniejszych rozdzielczości niestety nie ;/

Na prawdę nikt nie ma pomysłu jak to zrobić?

no faktycznie banalny.
Robisz duzego diva z position:relative i później wszystkie mniejsze elementy ładujez do div'ów z position:absolute i nadanymi parametrami left i top.

Nie wiem czemu tak chcesz zrobić, trzymanie w png każdego elementu osobno będzie kilka/kilkanaście razy większe jeżeli wszystko miało być jednym tłem z odpowiednio wypozycjonowanymi linkami, ale cóż twoja decyzja.

Przy twoim podejściu najlepiej jak zrobisz tak:

[HTML] pobierz, plaintext 
<div  id="ten co ma 1000px">
 <div id="link 1">
    <a href=""></a>
 </div>
<div id="link 2">
    <a href=""></a>
 </div>
</div>
[HTML] pobierz, plaintext 

i teraz w css

[CSS] pobierz, plaintext 
 #ten co ma 1000px {
    position: relative;
    szerokość i wysokość ustawić jak i główne tło
  }
  #ten co ma 1000px div {
     position: absolute;
  }
  #ten co ma 1000px a {
    display: block;
    height: 100%;
  }
   #link 1 {
     pozycja od krawędzi dolnej/górnej
     pozycja od krawędzi prawej/lewej
     szerokość linku
     wysokosc linku
     tlo linku
 
   }
 
[CSS] pobierz, plaintext 

Robię tak jak mi napisaliście ale niestety dalej przy różnych rozdzielczościach elementy są w różnych miejscach. Oto cała zawartość pliku html i css.
Może coś robię źle :/

[HTML] pobierz, plaintext 
<div id="content">
    <div id="logo">
    </div>
    <div id="elementy_strony">
		<div id="link_1">
			<a href=""></a>
		</div>
		<div id="link_2">
			<a href=""></a>
		</div>
        <div id="stopka">
            <menu>
                <li><a href="#">Bilboardy</a></li>
                <li><a href="#">Oferta</a></li>
                <li><a href="#">Oklejanie aut</a></li>
                <li><a href="#">Kontakt</a></li>
            </menu>
            <p id="copyright">Copyright flesh 2012</p>
        </div>
        </div>
</div>
 
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
body {
	background-image:url(../img/tlo.png);
	background-repeat:no-repeat;
	background-position:center top;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
a {
	color:#000;
	text-decoration:none;
}
#content {
	width:1000px;
}
#elementy_strony {
position:relative;
 
}
#elementy_strony div {
position:absolute;
}
#elementy_strony a {
display:block;
height:100%;
}
#link_1 {
	width:162px;
	height:35px;
	background:url(../img/auto_txt.png);
	background-repeat:no-repeat;
	top:43%;
	left:27%;
}
 
[CSS] pobierz, plaintext 

Czy te elementy będą mieć jakiś .active czy .hover? Jeżeli nie, to poważnie lepiej wyznaczyć coordsy i dać to jako jedno tło. Da się zrobić, tak jak chcesz, tylko wydaje mi się, że nie jest to najlepsze rozwiązanie.

No niby nie będą miały active a ni hoverow. Tak że słucham twojego sposobu na rozwiązanie tego problemu.

Przykład poniżej, dla div#banner dajesz tło w tym divie robisz linki które pozycjonujesz absolutnie względem tego diva. Musisz oczywiście w tym kodzie dostosować tło dla #banner jego wymiary a także rozmiary i położenie poszczególnych linków.

[HTML] pobierz, plaintext 
<div id="banner">
  <a href="#" id="link1"><span>Opis link1</span></a>
  <a href="#" id="link2"><span>Opis link2</span></a>
  <a href="#" id="link3"><span>Opis link3</span></a>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
div#banner{
  position:relative;
  width:200 px; 
  height:200 px;
  background:transparent url('sciezka/do/tla.jpg') no-repeat;
}
 
div#banner a{
  display:block;
  position:absolute;
}
 
div#banner a span{
  display:none;
}
 
a#link1{
 width:10px;
 height:20px;
 top:10px;
 left:15px;
}
a#link2{
 width:10px;
 height:20px;
 top:10px;
 left:15px;
}
a#link3{
 width:10px;
 height:20px;
 top:10px;
 left:15px;
}
 
[CSS] pobierz, plaintext 

Te wszystkie sposoby działają. tylko że ja mam tło powiedzmy o szerokości 1920 na 1080 i chcę żeby jego rozmiar zmieniał się zależnie od rozmiaru okna i to potrafię zrobić tylko wtedy wszystkie linki mi uciekają przy różnych rozdzielczościach :/ I to jest mój główny problem.

Może ktoś jeszcze ma jakieś propozycję bo te powyższe niestety nie działają tak jak bym chciał.

Pokaż online bo nie rozumiem twojego problemu.

Proszę bardzo

klik

Chodzi mi o to żeby nie trzeba było przewijać strony w bok tylko po dopasowaniu się rozmiaru tła do rozdzielczości(co wiem jak zrobić)
Linki były w dobrych miejscach i działały. Bo teraz jak ustawię tak żeby tło się dopasowywało to linki są w różnych miejscach :/

Bez js tego nie zrobisz, przy załadowaniu strony musisz ustalać nowe pozycje linków w takim wypadku.