Proporcje w CSS3 rozjeżdżają się po zmianie rozdzielczości

Witam, pisząc szablon na aukcję natknąłem się na bardzo ciężki problem, na moim monitorze 1440 X 900 px wszystko śmiga jak się patrzy, lecz, gdy zmienię monitor wszystko się kładzie, próbowałem zmienić wartości na procenty, ale to nic nie daje, HELP!

 

Z góry dziękuję,

 

Pozdrawiam, TheJacol2016

Jakie proporcje masz na myśli? Szerokość i wysokość divów? Jakie pozycjonowanie elementów stosujesz? Spróbuj na sztywno określić szerokość/wysokość całej strony w body.

Na sztywno? W body? Nie łapię. Chodzi mi o rozmiary elementów i ich pozycje

Zrób screena, co się dzieje na innej rozdzielczości. Używasz pozycjonowania absolutnego/relatywnego/fixed? Rozmiary elementów najlepiej ustawić na sztywno - konkretna wartość pikseli - chyba, że chcesz mieć stronę dostosowującą się do rozdzielczości. Jeżeli rozjeżdża Ci się cała strona to wtedy warto ustawić pozycjonowanie absolute dla każdego z elementów, choć nie jest to rozwiązanie idealne. Wtedy punktem odniesienia będzie okno przeglądarki lub obiektu nadrzędnego.

Ja dodać screena na forum, no nic tutaj link jak wszystko dobrze działa http://s6.ifotos.pl/img/Screensho_eherewq.jpg

A tu jak gorzej http://s6.ifotos.pl/img/Screensho_eherenq.jpg Nie wpisałem nic w position

wygląda jakby Ci się elementy nie mieściły, czyli razem przekraczają szerokość kontenera w którym się znajdują. nie wiem jak to prościej napisać.

po screenach to ciężko cokolwiek powiedzieć

Ok, ten problem został już rozwiązany, mam następny, wszystko pieknie działa, ale za Chiny nie mogę zrobić marginesu od dołu, HELP!

Od razu widać, że na drugim zrzucie masz zrobione skalowanie w przeglądarce. Wskazuje na to ikonka lupki po prawej stronie paska adresu. Na przyszłość i dla potomnych:  CTRL+0 :stuck_out_tongue:

wiem, dałem tylko przykład jak to wygląda na innych rozdzielczościach, przejdźmy do drugiego problemu

Zrób padding-bottom.

Może byś tak zapodał jakiś podgląd/przykład/trochę kodu, z fusów tu żaden nie wróży.

Padding i margines nie idzie, chcecie kod, już daję :smiley:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <Style>
  .jeden, .dwa, .trzy, .cztery {
	display:inline;
    position:absolute;
    height:200px;
    margin-top:-218px;
    left:70px;
  }
    .jeden {
    width:485px;
	border:none;
	left:90px;
    }
    
    .dwa {
    width:230px;
    left:572px;
	border:none;
    }
    
      .trzy {
    width:230px;
    left:807px;
	border:none;
    }
    
    .cztery {
    width:313px;
    left:993px;
	border:none;
    }
    
    .kawalki, .topek {
    width:1300px;
	height:580px;
	margin-left:70px;
    }
    
    
    .tab {
    width:480px;
    height:100px;
    text-align:center;
    }
    
    td{
    width:30px;
    height:30px;
    border:1px solid black;
    border-radius:5px;
    }
    
	.jedyneczki {
	
	}
	
    .shop {
    
    }
    
    a {
    color:black;
    text-decoration:none;
    }
    
    a:hover {
    color:#7C0403;
    font-weight:bold;
    }
	
	.pasek {
	width:1300px;;
	height:10px;
	box-shadow:6px 6px 6px 6px grey;
	background: #0e0e0e;
	background: -moz-linear-gradient(top, #0e0e0e 0%, #d1d1d1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e0e0e), color-stop(100%,#d1d1d1));
	background: -webkit-linear-gradient(top, #0e0e0e 0%,#d1d1d1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0e0e0e 0%,#d1d1d1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0e0e0e 0%,#d1d1d1 100%); /* IE10+ */
	background: linear-gradient(to bottom, #0e0e0e 0%,#d1d1d1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#d1d1d1',GradientType=0 );
	font-family:algerian;
	border-radius:5px;
	color:white;
	font-size:30px;
	box-shadow:3px 3px 10px grey;
	z-index:90;
	}

	.zdiecia, .opis {
	display:inline;
	position:absolute;
	margin-bottom:10px;
	}
	
	.zdiecia {
	width:500px;
	border:1px solid black;
	margin-top:10px;
	margin-bottom:10px;
	}
	
	.zdiecia {
	width:500px;
	margin-bottom:-5px;
	border:1px solid black;
	}
	
	.zdiecia > img {
	width:500px;
	margin-bottom:-5px;
	}
	
	.zdiecia > img:first-child {
	width:500px;
	margin-bottom:-5px;
	border-top:none;
	}
	
	.opis {
	width:600px;
	min-height:55.55555555555556%;
	border:1px solid black;
	margin-left:520px;
	margin-top:10px;
	white-space:pre-line;
	padding-:10px;
	margin-bottom:10px;
	}
	
	.besty {
	margin-left:1130px;
	}
	
	.all {
	width:1300px;
	font-family:arial;
	bottom:10px;
	}
	
	.dol {
	width:1300px;
	margin-left:70px;
	margin-top:-570px;
	bottom:10px;
	}
	
  </style>
</head>
<body><div class="all">
  <table class="kawalki"><img src="http://www.szympi.pl/kodowanie/kody/szablon/top.jpg" width="1300" height="580" class="topek"></a>
    <tr class="jedyneczki"><td class="jeden"><div class="rozmiary"><P class="size"><b>Click your size: </b></p>
<table class="tab" width="500px;">
  <tr><td class="nie" colspan="1" style="border:none;"><b>UK :</b></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=XS&submit=Search&_sid=1059308229">6</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=8&submit=Search&_sid=1059308229">8</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=10&submit=Search&_sid=1059308229">10</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=12&submit=Search&_sid=1059308229">12</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=14&submit=Search&_sid=1059308229">14</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=16&submit=Search&_sid=1059308229">16</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=18&submit=Search&_sid=1059308229">18</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=20&submit=Search&_sid=1059308229">20</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=22&submit=Search&_sid=1059308229">22</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=24&submit=Search&_sid=1059308229">24</a></td></tr>
  <tr><td class="nie" colspan="1" style="border:none;"><b>EU :</b></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=XS&submit=Search&_sid=1059308229">34</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=8&submit=Search&_sid=1059308229">36</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=10&submit=Search&_sid=1059308229">38</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=12&submit=Search&_sid=1059308229">40</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=14&submit=Search&_sid=1059308229">42</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=16&submit=Search&_sid=1059308229">44</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=18&submit=Search&_sid=1059308229">46</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=20&submit=Search&_sid=1059308229">48</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=22&submit=Search&_sid=1059308229">50</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=24&submit=Search&_sid=1059308229">52</a></td></tr>
  <tr><td style="border:none;"></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=XS&submit=Search&_sid=1059308229">XS</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=8&submit=Search&_sid=1059308229">S</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=10&submit=Search&_sid=1059308229">M</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=12&submit=Search&_sid=1059308229">L</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=14&submit=Search&_sid=1059308229">XL</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=16&submit=Search&_sid=1059308229">2XL</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=18&submit=Search&_sid=1059308229">3XL</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=20&submit=Search&_sid=1059308229">4XL</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=22&submit=Search&_sid=1059308229">5XL</a></td><td><a href="http://stores.ebay.co.uk/simeve/_i.html?_nkw=24&submit=Search&_sid=1059308229">6XL</a></td></tr>
  </table></td></div>
    <td class="dwa"><div class="shop">
<ul><b><p style=";">Shop Categories:</p></b>

    <li><a href="http://stores.ebay.co.uk/simeve/dresses-/_i.html?_fsub=571034219">dresses, top, shirts</a></li>
    <li><a href="http://stores.ebay.co.uk/simeve/skirts-/_i.html?_fsub=571034419">skirts</a></li>
    <li><a href="http://stores.ebay.co.uk/simeve/trousers-leggings-/_i.html?_fsub=571034619">trousers, leggings</a></li>
    <li><a href="http://stores.ebay.co.uk/simeve/jackets-coats-/_i.html?_fsub=571034719">jackets, jumpers, coats</a></li>
    <li><a href="http://stores.ebay.co.uk/simeve/mens-clothing-/_i.html?_fsub=571035219">men's clothing</a></li>
      <li><a href="http://stores.ebay.co.uk/simeve/Other-/_i.html?_fsub=1">other</a></li>
  </ul></td>
    <td class="trzy"><ul><b><p style=";">Help Links:</p></b>
<li class="help"><a href="http://stores.ebay.co.uk/simeve/_i.html?rt=nc&_sid=1059308229&_trksid=p4634.c0.m14&_sop=10&_sc=1">check our other items</a>
<li class="grafy"><a href="https://signin.ebay.co.uk/ws/eBayISAPI.dll?SignIn&UsingSSL=1&pUserId=&co_partnerId=2&siteid=3&ru=http%3A%2F%2Fmy.ebay.co.uk%2Fws%2FeBayISAPI.dll%3FAcceptSavedSeller%26_trksid%3D%26linkname%3Dincludenewsletter%26sellerid%3Dsimeve%26guest%3D1&pageType=843">sign up for newsletter</a>
<li class="grafy"><a href="http://feedback.ebay.co.uk/ws/eBayISAPI.dll?ViewFeedback2&userid=simeve&&_trksid=p2047675.l2560&rt=nc&iid=271390020499&sspagename=VIP:feedback&ftab=FeedbackAsSeller">see our feedbacks</a>
<li class="grafy"><a href="https://signin.ebay.co.uk/ws/eBayISAPI.dll?SignIn&UsingSSL=1&pUserId=&co_partnerId=2&siteid=3&ru=http%3A%2F%2Fcontact.ebay.co.uk%2Fws%2FeBayISAPI.dll%3FReturnUserEmail%26de%3Doff%26frm%3D3692%26%26iid%3D271390020499%26redirect%3D0%26requested%3Dsimeve%26guest%3D1&pageType=222">contact us</a></div>
</ul></td>
  <td class="cztery"></td></tr>
  </table>
  <div class="dol">
  
  <div class="pasek" colspan="3"></div>

  <div class="zdiecia"><img src="fotos.jpg"><img src="fotos.jpg"></div>

</body>
</html> 

Proszę bardzo :smiley:

  1. Na lini 156, zamykasz link, którego nie ma. (?)

  2. Weź ten pasek i tego diva ze zdjęciami włóż do jakiegoś diva i do tego diva dodaj:

    @media screen and (width: 1440px) and (height: 900px){ /* tu zdefiniuj rozdzielczości, na których wywietla się źle */

    .div { /* tutaj dajesz klasę/id diva, którym objąłeś omówione elementy /
    margin: X !important; /
    tutaj dodajesz margines/padding */
    }

    }

Wiem, można było lepiej, ale nie chce mi się szukać błędu :wink:

P.S. - używaj spoilera do takich bloków kodu

A to że masz div’a o klasie “dol” nie zamkniętego to nie widzisz ?? K***a ludzie, wcięcia, wcięcia i jeszcze raz wcięcia. HTML to nie BrainFuck … 2-letni orangutan to ogarnia.

Proponuję używać walidatora HTML -> http://validator.w3.org/

Pozwala on wykryć takie błędy, jak wyżej wymieniony.

Poprawiłem to, i istnieje problem, u mnie, w przeglądarce wszystko śmiga, ale na aukcji… Masakra, a tym bardziej na podglądzie.

 

Ktoś wie co robić?

Zgłosić się do specjalisty :wink:

Ale śmieszne, to już wiem, że taka opcja istnieje, proszę o poważne odpowiedzi.