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


(Szymek) #1

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


(Michaelp128) #2

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.


(Szymek) #3

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


(Michaelp128) #4

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.


(Szymek) #5

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


(knyku) #6

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ć


(Szymek) #7

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!


(Jim1961) #8

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:


(Szymek) #9

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


(Jim1961) #10

Zrób padding-bottom.

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


(Szymek) #11

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:


(jacko1998) #12
  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


(Jim1961) #13

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.


(Michaelp128) #14

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

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


(Szymek) #15

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


(Jim1961) #16

Zgłosić się do specjalisty :wink:


(Szymek) #17

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