Pomoc dot. boxów (HTML)

(@przemyslaw_kurek)

Witam.
robię stronkę i w motywie który zainstalowałem były 4 boxy, ja potrzebuję 3.
I pojawił sie problem po usunięciu jednego nie mogę wyśrodkować ich.

Proszę o pomoc w ich wyśrodkowaniu oraz w rozmieszczeniu ich w równych odstępach.

tutaj są te 3 boxy

box

a tutaj kod

</div>
<div id="services-box">

<img src="http://localhost/CAT/wp-content/themes/skt-white/images/icon-web-design.png" alt="" />
<h2>Paweł Murzyn</h2>
Lorem Ipsum is simply dummy text of they printing and typesetting industry. Lore Ipsum has been the industry standard in dummy text ever since the 1500s, when an unknown printer took a galley of type andin scrambled it to make a type book. <a class="read-more" href="#">Read More</a>

</div>
<div id="services-box">

<img src="http://localhost/CAT/wp-content/themes/skt-white/images/icon-web-design.png" alt="" />
<h2>Piotr Wilk</h2>
Lorem Ipsum is simply dummy text of they printing and typesetting industry. Lore Ipsum has been the industrys standard in dummy text ever since the 1500s, when an unknown printer took a galley of type andin scrambled it to make a type book. <a class="read-more" href="#">Read More</a>

</div>
<div id="services-box">

<img src="http://localhost/CAT/wp-content/themes/skt-white/images/icon-web-design.png" alt="" />
<h2>Marcin Wilk</h2>
Lorem Ipsum is simply dummy text of they printing and typesetting industry. Lore Ipsum has been the industrys standard in dummy text ever since the 1500s, when an unknown printer took a galley of type andin scrambled it to make a type book. <a class="read-more" href="#">Read More</a>

</div>

Viewing 3 replies - 1 through 3 (of 3 total)

ziemekpr0
(@ziemekpr0)

9 years, 1 months temu

Jakiś słaby ten motyw skoro masz obok siebie 4 divy z tym samym identyfikatorem. 🙂

Nie wiadomo czy strona jest responsywna, więc można tylko strzelać czy jednostki będą w pikselach czy procentach. Niemniej powinieneś otworzyć style.css poszukać tego identyfikatora #services-box i sprawdzić jaką ma ustawioną szerokość (width). Jeżeli jest w procentach to należałoby ustawić ją z 25% na 33.3333% (idealna sytuacja, możliwe że nie będzie to wartość równo 25% tylko mniejsza ze względu na ewentualne odstępy między kolumnami). Z drugiej strony bardzo prawdopodobne jest, że motyw ma wbudowany jakiś 'grid-system’ na którym jest oparty i z którego powinieneś w tym momencie skorzystać, z tym że, sądząc po tym wycinku kodu pozostałe style dotyczące ikony nagłówka i opisu nie będą działać. Ciężka sprawa 🙂
Thread Starter Przemyslaw_Kurek
(@przemyslaw_kurek)

9 years, 1 months temu
```
.services { width:100%; margin:0 auto; position:relative; visibility:hidden;}
#services-box { width:19.8%; height:auto; display:inline-block; float:left; margin:0 1px 0 0; padding:2.4%; position:relative; transition:0.3s; background-color:#151515;}
#services-box img { display: block; margin:auto;}
#services-box h2 { color:#fff; font-weight:300; font-size:26px; text-transform:capitalize; text-align:center; padding:20px 0; font-family:'Roboto Condensed', sans-serif;}
#services-box h2 span { font-weight:bold;}
#services-box p { line-height:20px;}
#services-box .read-more { color:#fff; font:300 14px 'Roboto', sans-serif; text-transform:uppercase; text-align:center; border:#fff solid 1px; padding:8px 10px; display:block; margin:30px auto 0 auto; width:50%;}
#services-box:hover .read-more { background:#fff; color:#3a3c41;}
#services-box:hover {cursor:pointer; color:#fff;}
```
sory zły kod podałem wyżej, to jest kod z edytora i to są 4 boxy a potrzebuję 3. Pomoże ktoś ogarnąć temat?
ziemekpr0
(@ziemekpr0)

9 years, 1 months temu

To o czym pisałem, zwróć uwagę na:

#services-box { width:19.8%; padding:2.4%; margin:0 1px 0 0;}

19.8% + 2* 2.4 = 24.6%
a te brakujące 0.4, to prawy margines.

25% to 1/4 szerokości strony.

Więc teraz musisz sobie ustalić wartości tych właściwości tak, aby w sumie dawały ci 33.3333% czyli 1/3 szerokości strony.

Viewing 3 replies - 1 through 3 (of 3 total)

Temat ‘Pomoc dot. boxów (HTML)’ jest zamknięty na nowe odpowiedzi.

Tagi tematu

Wyświetlenia