[bartek0305]

Witam! Mam strasznie irytujący mnie problem z rozmieszczeniem pewnych elementów. Strona nad którą obecnie pracuje to troche taka mieszanka, bo tłem jest duza grafika. Mój problem polega na tym, ze chce aby pewne elementy "wisiały" na tym tle w ściśle określonych przeze mnie miejscach. Cała treść strony znajduje się w pewnym divie. Próbowałem odsuwać element na daną pozycje juz różnymi sposobami ale każdy zawodził. Problem polega na tym ze u mnie wszystko wygląda elegancko ale jak zobacze na innym komputerze to elementy są poprzesuwane, porozjeżdżane, nie trzymają się tych miejsc tła na których mają być. Ustawienie ich w boki jakos opanowąłem ale mam problem z ustawieniem ich w pionie. Odsuwam je teraz od góry za pomocą

padding-left:0; padding-right:0; padding-top:360px; padding-bottom:0px;

i u mnie było w dobrym miejscu ale juz na innym kompie zdjęcie było wyżej. Więc ostatecznie: jak ustawić elementy w konkretnych miejscach tła by na każdym komputerze były one w tych samych miejscach? Mam nadzieje że nie zamotałem za bardzo. Baardzo proszę o pomoc!

[unbreak]

Polecam

position: absolute; top: 360px; left 0;

itd.

Fajnie by było jakbyś rzucił linkiem do strony żeby zbadać przez co mogą być takie problemy, plus może jest całkiem inne rozwiązanie tego co chcesz osiągnąć Po drugie zawsze jak tworzysz stronkę to sprawdzaj na wszystkich popularnych przeglądarkach przed jej opublikowaniem. Podstawa to FF, IE, Opera i Chrome, miej wszystkie zainstalowane u siebie.

Użytkownik unbreak edytował ten post 26 sierpień 2010 - 08:37

[bartek0305]

Dziękuję za odpowiedź! Na początku mojej pracy wykluczyłem pomysł z pozycjonowaniem absolutnym, bo pozycjonowało mi od rogu przeglądarki i nie pomyślałem ąeby to sprawdzić teraz jeszcze raz. Oto link do strony a to do pliku css.
Pierwsze 2 zdjęcia z lewej są w divie "left" a kolejne 2 są w divie "right". Całość (te 2 divy, nawigacja i stopka są w głównym divie "all". Faktycznie jeśli je wypozycjonuje absolutnie od góry to przesuwają się tak jak chce, ale nachodzą na nawigacje i stopkę. Więc gdy chce też je przesunąć absolutnie od góry to owszem, zjeżdżają w dół ale przesuwają się w lewo, do krawędzi głównego diva..Nie mam pojęcia co jest nie tak z tym. Żeby było jaśniej widać co chodzi moge divy podkolorować żeby było je wyraźnie widac

[unbreak]

Spoko, spoko Mam chrome i widzę Twoją stronę na wylot

1. Nie używa się już

<center></center>

2. Nie wykorzystuje się już tabel do layoutów - patrz menu i opisy produktów.
3. Nie <br> a <br /> i między divami nie daje się tego im mniej łamaczy linii tym lepiej
4. Jeśli dajesz position: absolute, nie dajesz floatów.
5. Divy left i right wrzuć do jakiegoś jeszcze jednego diva i jego sobie wypozycjonuj na wysokość jaką chcesz.
6. Wywaliłbym tło stopki
7. Jako tło tekstów, np kontaktu dałbym coś transparentnego (półprzezroczystego), tak aby wyraźnie odkreślać część tekstu, ale żeby było widać lekko tło z pod spodu


Możesz pokazać skrina jak chcesz żeby to wyglądało? A jak np wygląda u innych

U mnie wygląda to tak:
 pobrane.jpg (505,45 KB)
Ilość pobrań: 3

[bartek0305]

Jestem dopiero początkujący w css i widzę ze bardzo to widac
2. Wiem że nie powinno być tabel, ale nie wiem jak miałbym to zrobić- z menu dałbym rade bo tylko w diva dac, ale poskładać te całe opisy produktów bez użycia tabeli to mnie przeraża i chyba wykracza ponad moje umiejętności
7. Na marginesie, pozostałe strony są aktualnie "rozjechane" bo pracuje teraz tylko nad główną i pod nią zmieniam plik css Może faktycznie dobrze byłoby zrobić jakies transparentne tło ale to jest najmniejszy problem, bo nie wiem czy to by sie podobało właścicielowi strony bo to ona miała wizję żeby to były "karteczki przypięte pinezkami"

Nad resztą uwag muszę popracować, bo to chyba ciut czasu zabierze

Chciałbym zeby to wyglądało w ten sposób .
Poniżej na tej lekko juz widiocznej gałązce z lewej strony znowu miałby wisieć takie 2 zdjęcia jak wyżej. tak na przemian, 2 z lewej, 2 z prawej, 2 z lewej, 2 z prawej

U innych wygląda to tak, że te zdjęcia wyświetlają się wyżej, na tyle że zakrywały by naprzykład te "zawijasy" wystające nad zdjęciami. Oto przykład z innego komputera (laptopa) . Widać zę to zdjęcie po prawej wjechało ciut wyżej i zakrywa juz ten "zawijasek" nad sobą a u mnie było mniejwięcej tak jak na paprzednim zdjęciu, ze zawijasek wystawał. Niby nie duze przesuniecie ale tu troche, tu troche i efekt koncowy jest taki że ostatnie zdjęcia z dołu w ogóle nie wiszą na gałązce

Użytkownik bartek0305 edytował ten post 26 sierpień 2010 - 12:45

[unbreak]

Ok, teraz to widzę jak sobie to wyobraziłeś Tyle że wiesz że to będzie wyglądało jakby było brzydko rozjechane, bo nikt nie zauważy że to wisi na 'gałązkach' ;p Ja nawet jak o tym napisałeś to tego nie zauważyłem

Co do opisów produktów w divach, to jak będę miał chwilkę to Ci to przerobię

Daj znać jak się uporasz z resztą podpunktów, podziałamy wtedy dalej.

[bartek0305]

Ok, zrobiłem to co kazałeś, narazie na głównej stronie (reszte poprawie później, wiem juz w czym rzecz, tylko potrzebuje czasu ): usunałem <center>, left i right dałem w kolejnego diva i odsunąłem od góry

margin-top: 140px;

. Próbowałem to zrobić pozycjonowaniem absolutnym i udało się, ale jak znowu chciałem przesunąć na dół absolutnie nawigacje to znowu zjechała w bok, a nie miałem jednocześnie float-a, dlatego narazie zostawiłem tak. Usunałem też tabelki z menu, nawigacji i stopki, oraz tło stopki. Narazie nie ruszałem zdjęć (tabelek, center, br). Byłbym bardzo wdzięczny za przerobienie ich Zdaje sobie z tego sprawe ze to może wyglądac na rozjechane, ale ja to tylko próbuje zrobić, wizja jest właścicielki, cóż poradzić

[unbreak]

Jeszcze jedno, jak dajesz dwa, bądź więcej divów z float:

<div style="float: left;"> pierwszy</div> <div style="float: left;"> trzeci</div> <div style="float: left;"> drugi</div>
<div> Jakiśtam div bez float</div>

To dawaj zawsze po nich jakiegoś diva z clear (może być pusty):

<div style="float: left;"> pierwszy</div> <div style="float: left;"> trzeci</div> <div style="float: left;"> drugi</div>
<div style="clear: both;"></div>
<div> Jakiśtam div bez float</div>

[bartek0305]

Dodałem takiego pustego diva. Spróbowałem jakoś ustawić te zdjęcia i mam kilka zdjęć jak to wychodzi. Tym razem odsuwałem od góry za pomocą

padding-top: 25%;

i muszę przyznać że wyglądało obiecująco. Jednak jak spojrzałem na tym pechowym laptopie to jest jak zawsze lipa Oto zdjęcia:

Tak to wygląda u mnie

Tak wygląda na laptopie fot 1
Tak wygląda na laptopie fot 2

Tak wygląda na innym moim komputerze fot 1
Tak wygląda na innym moim komputerze fot 2

Wyraźnie widać te wredne przesunięcia.

[unbreak]

Z tym pustym to mnie w ogóle nie zrozumiałeś...

Po 1, daj mu class="pusty", a nie id, bo id nie może się powtarzać (może go mieć tylko jeden element),
Po 2, daj go po każdych elementach które mają się float-ować, czyli w tym przypadku po left i right, oraz i w left po tab i tab1, oraz po tab4 i tab5 - tak samo w right. Czyli tak:

Spoiler

<div id="content"> 
 
<div id="left"> 
 
    <div id="tab"> 
    <TABLE BORDER="0" CELLSPACING="1" STYLE="border-collapse: collapse" width="240" height="110" bgcolor="#FFFFFF"> 
        <TD height="20"> 
            <div id="pin"> 
    <img src="img/pin.png" width="39" height="42"></div> 
            <!-- div od pin --> 
            </TD> 
        <TR> 
          <TD> <center><A HREF="javascript:popImage('img/Niebieskie.jpg','Duże')"> 
          <img src="img/nieb.jpg" width="200" height="130"></a><p><span>Nr. produktu: 1</span><br>Materiał: metal <br>Kolor: czarny, szary <br><span>cena: 15zł</span></p> </center></TD> 
        </TR> 
            </table> 
    </div> <!-- div od tab --> 
     
    <div id="tab1"> 
    <TABLE BORDER="0" CELLSPACING="1" STYLE="border-collapse: collapse" width="240" height="110" bgcolor="#FFFFFF"> 
        <TD height="20"> 
            <div id="pin"> 
    <img src="img/pin.png" width="39" height="42"></div> 
            <!-- div od pin --> 
            </TD> 
        <TR> 
          <TD> <center><A HREF="javascript:popImage('img/Niebieskie.jpg','Duże')"> 
          <img src="img/nieb.jpg" width="200" height="130"></a><p><span>Nr. produktu: 2</span><br>Materiał: metal <br>Kolor: czarny, szary <br><span>cena: 15zł</span></p> </center></TD> 
        </TR> 
            </table> 
    </div> <!-- div od tab1 --> 
     <div style="clear: both"></div>
     
    <div id="tab4"> 
    <TABLE BORDER="0" CELLSPACING="1" STYLE="border-collapse: collapse" width="240" height="110" bgcolor="#FFFFFF"> 
        <TD height="20"> 
            <div id="pin"> 
    <img src="img/pin.png" width="39" height="42"></div> 
            <!-- div od pin --> 
            </TD> 
        <TR> 
          <TD> <center><A HREF="javascript:popImage('img/Niebieskie.jpg','Duże')"> 
          <img src="img/nieb.jpg" width="200" height="130"></a><p><span>Nr. produktu: 5</span><br>Materiał: metal <br>Kolor: czarny, szary <br><span>cena: 15zł</span></p> </center></TD> 
        </TR> 
            </table> 
    </div> <!-- div od tab4 --> 
     
    <div id="tab5"> 
    <TABLE BORDER="0" CELLSPACING="1" STYLE="border-collapse: collapse" width="240" height="110" bgcolor="#FFFFFF"> 
        <TD height="20"> 
            <div id="pin"> 
    <img src="img/pin.png" width="39" height="42"></div> 
            <!-- div od pin --> 
            </TD> 
        <TR> 
          <TD> <center><A HREF="javascript:popImage('img/Niebieskie.jpg','Duże')"> 
          <img src="img/nieb.jpg" width="200" height="130"></a><p><span>Nr. produktu: 6</span><br>Materiał: metal <br>Kolor: czarny, szary <br><span>cena: 15zł</span></p> </center></TD> 
        </TR> 
            </table> 
    </div> <!-- div od tab5 --> 
    <div style="clear: both"></div>
</div> <!-- div od left --> 
 
 
<div id="right"> 
<div id="tab2"> 
<TABLE BORDER="0" CELLSPACING="1" STYLE="border-collapse: collapse" width="240" height="110" bgcolor="#FFFFFF"> 
    <TD height="20"> 
		<div id="pin"> 
<img src="img/pin.png" width="39" height="42"></div> 
		<!-- div od pin --> 
		</TD> 
    <TR> 
      <TD> <center><A HREF="javascript:popImage('img/Niebieskie.jpg','Duże')"> 
      <img src="img/nieb.jpg" width="200" height="130"></a><p><span>Nr. produktu: 3</span><br>Materiał: metal <br>Kolor: czarny, szary <br><span>cena: 15zł</span></p> </center></TD> 
    </TR> 
		</table> 
</div> <!-- div od tab2 --> 
<div id="tab3"> 
<TABLE BORDER="0" CELLSPACING="1" STYLE="border-collapse: collapse" width="240" height="110" bgcolor="#FFFFFF"> 
    <TD height="20"> 
		<div id="pin"> 
<img src="img/pin.png" width="39" height="42"></div> 
		<!-- div od pin --> 
		</TD> 
    <TR> 
      <TD> <center><A HREF="javascript:popImage('img/Niebieskie.jpg','Duże')"> 
      <img src="img/nieb.jpg" width="200" height="130"></a><p><span>Nr. produktu: 4</span><br>Materiał: metal <br>Kolor: czarny, szary <br><span>cena: 15zł</span></p> </center></TD> 
    </TR> 
		</table> 
</div> <!-- div od tab3 --> 
 
</div> <!-- div od right --> 
 
<div style="clear: both"></div>
 
</div> <!-- div od content --> 

A po kolejne to za bardzo kombinujesz ;p ale niestety w tym tygodniu nie mam czasu żeby Ci to ładnie rozpisać ;\