[HTML][CSS] Położenie elementu Opcje

[grzes999]

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ć?

Ten post edytował grzes999 23.05.2012, 14:46:09

[prowseed]

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.

[lobopol]

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 

[grzes999]

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 

Ten post edytował grzes999 25.05.2012, 10:04:56

[kristaps]

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.

[grzes999]

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

[d3ut3r]

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 

[grzes999]

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ł.

[lobopol]

Pokaż online bo nie rozumiem twojego problemu.

[grzes999]

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 :/

[lobopol]

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