• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

5 obrazków znajdujących się obok siebie nie pojawiło się na środku strony.

VPS Starter Arubacloud
0 głosów
465 wizyt
pytanie zadane 14 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Witam.

Na podstronie mam 5 obrazków znajdujących się obok siebie, ale chciałbym, aby były położone na środku strony. Niestety aktualnie znajdują się po lewej stronie.

W divie wrapper jest menu i stopka. Szerokość menu i stopki to 1000px. Pomiędzy menu, a stopką ma się znajdować wyśrodkowany obszar o szerokości 700px, a w nim wyśrodkowanych 5 obrazków.

<div class="wrapper">

	<nav>
		<ul>
			<li class="home"><a href="index.php">Strona główna</a></li>
		</ul>
	</nav>

	<div id="content">
		<ul style="margin-top: 25px">
			<li>
				<a href="strona1.php">
					<img class="foto" src="obrazek1.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 140px">
			<li>
				<a href="strona2.php">
					<img class="foto" src="obrazek2.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 280px">
			<li>
				<a href="strona3.php">
					<img class="foto" src="obrazek3.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 420px">
			<li>
				<a href="strona4.php">
					<img class="foto" src="obrazek4.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 560px">
			<li>
				<a href="strona5.php">
					<img class="foto" src="obrazek5.jpg"></img>
				</a>
			</li>
		</ul>
	</div>

	<div class="footer">Strona &copy; 2016</div>
</div>
body
{
	margin: 0px;
	width: 100%;
	height: 800px;
}

.wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#content
{
	padding: 1px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	background-color: #008000;
}

Chciałbym, aby te 5 obrazków było położone w divie "content" na środku strony. Te obrazki mają być położone w obszarze o szerokości 700px. Specjalnie stworzyłem w divie content roboczy zielony kolor tła, aby lepiej wszystko widzieć. Szerokość każdego obrazka to 100px, zdjęć jest 5, zatem 500px zajmują łącznie wszystkie obrazki. Między obrazkami są 4 niewielkie odstępy, więc od pierwszego zdjęcia do ostatniego jest jakoś ponad 600px.

Aktualnie to robocze zielone tło jest przesunięte nieco w lewą stronę. Chciałbym, aby te 5 obrazków było w środku tego zielonego tła.

Gdzie jest błąd?

2 odpowiedzi

+1 głos
odpowiedź 14 kwietnia 2016 przez niezalogowany

Jeśli w CSSie trzeba coś liczyć, to zły znak : )

http://codepen.io/Argeento/pen/ZWxXMe

komentarz 14 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)
Możesz umieścić poprawiony kod na jsfiddle albo tutaj? Na tym codepen.io nie widzę kodu.
komentarz 14 kwietnia 2016 przez niezalogowany
<div class="wrapper">
  
    <nav>
        <ul>
            <li class="home"><a href="index.php">Strona główna</a></li>
        </ul>
    </nav>
 
    <main class="content"> 
      <!-- Nie używaj id w CSSie -->
      <!-- Prawdopodobnie będzie tutaj pasował element 'main' -->
       
      <!-- Nie stosuj nigdy CSS inline: style="margin-top: 25px; margin-left: 560px", straszny bałagan robią w kodzie -->
      
      <ul class="images-list">
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
      </ul>
      <!-- Wszstkie img muszą mieć atrubut alt! -->
      <!-- A tutaj przydałoby się również, żeby znaczniki a miały atrybut title -->

      
    </main>
 
    <footer class="footer">Strona &copy; 2016</footer> 
      <!-- Element footer, zamiast div -->
</div>
body
{
    margin: 0px;
    width: 100%;
    height: 800px;
}
 
.wrapper
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.content
{
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    background-color: #008000;
}


/* Stylizacja obrazków */
.images-list {
  list-style-type: none;
  text-align: center;
  padding: 0;
} 
.images-list > li {
  display: inline-block;
}

 

komentarz 15 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Zrobiłem to innym sposobem i też jest OK.

#content
{
	padding: 1px;
	margin-top: 20px;
	margin-left: 127px;
}

Taki zapis w CSS umożliwił mi wyśrodkowanie tych 5 obrazków z lewej i prawej strony równo co do piksela.

Dzięki za próbę pomocy.

0 głosów
odpowiedź 14 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Po pierwsze 

style="margin-top: 25px"

Nie rób tak! 

Wszystkie style wkładaj w oddzielny plik. 

Jak to zrobić możesz użyć flexa, ale jeżeli nie czujesz się na mocy to możesz dla pierwszego i ostatniego elementu dodać większy margines. :first-child i :last-child. Oczywiście wstawienie każdego obrazka w oddzielne ul li a to słaby pomysł, jeżeli już to w jeden znacznik ul. Jeżeli nie będzie ci to służyło za menu to bym wywalił ul. Możesz dać dla każdego elementu float: left; i dać odpowiedni margines, oczywiście nie zapominając o clear: both; Też nasuwa się pytanie co będzie w tym divie #content.

komentarz 14 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)
Pokombinowałem z kodem i teraz jest OK.

Podobne pytania

0 głosów
2 odpowiedzi 8,702 wizyt
pytanie zadane 10 lutego 2016 w HTML i CSS przez Anonimus Nowicjusz (140 p.)
0 głosów
1 odpowiedź 652 wizyt
pytanie zadane 29 maja 2018 w HTML i CSS przez VendE Użytkownik (980 p.)
0 głosów
1 odpowiedź 962 wizyt
pytanie zadane 13 grudnia 2016 w Sieci komputerowe, internet przez razor6017 Użytkownik (780 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...