Tekst ma sie wyświetlać inaczej, a nie standardowo

Question

Witam.

Na stronie będę miał wypunktowany tekst. Problem polega na tym, że ten tekst wyświetlany jest standardowo. Wygląda to tak:

https://imagizer.imageshack.com/img921/6669/HHfZ41.jpg

Zauważcie, że druga, trzecia, czwarta itd linijka tekstu (pod cyfrą 1, 2, 3 itd) pojawia sie standardowo z lewej strony.

<div id="panel4" class="panel-4" aria-labelledby="tab4" role="tabpanel" aria-hidden="true">
	<div class="box4">
		<div class="border-left">
			<div class="border-right">
				<div class="inner4">
					<p>1. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</p>
					<p>2. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</p>
					<p>3. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</p>
				</div>
			</div>
		</div>
	</div>
</div>

.panel-4
{
	clear: both;
	width: 1000px;
}

.box4
{
	background-color: #000000;
	width: 100%;
}

.box4 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box4 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box4 .inner4
{
	padding: 10px 50px 10px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

Te kwadraciki z lewej i prawej strony to miniaturowa grafika: border-left.gif + border-right.gif, jak coś.

Chciałbym, aby druga, trzecia, czwarta itd linijka tekstu była wyświetlana tuż pod wyrazem "Tu będzie...", a nie tuż pod cyfrą. Wydaje mi sie, że to nawet wizualnie ładniej wygląda.

Czy da sie tak w ogóle zrobić ?

Answer 1

W sensie, żeby akapity kolejnych punktów miały wcięcia?

Czemu nie użyjesz <ol> zamiast ręcznego numerowania? To chyba też zrobi to co chcesz ze wcięciami.

Comments

Nie wiem czy to sie nazywa wcięcie akapitu...

Tu jest dobry przykład na podstawie programu Adobe:

https://helpx.adobe.com/pl/incopy/using/bullets-numbering.html

A na tej stronie idealny przykład na obrazku z napisem po prawej Cooking Instructions i pod tym są 3 numeracje:

https://helpx.adobe.com/content/dam/help/en/incopy/using/bullets-numbering/_jcr_content/main-pars/image_0/op_42.png

Zauważ, że pod napisem Cooking Instructions są 3 numeracje i o takie coś mi chodzi. Druga (ewentualnie trzecia, czwarta, piąta itd) linijka tekstu znajduje sie pod tekstem, a nie pod cyfrą.

---

Próbowałeś z <ol> ? ;)

---

Nie próbowałem jeszcze z <ol>.

Czy w kodzie zamiast znacznika <p> mam wpisać <ol> ?

Tak ma być?

<ol>
	<li>Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</li>
	<li>Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</li>
	<li>Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</li>
</ol>

Jeśli tak ma być, to co trzeba zmienić w CSS ?

---

Nic. To działa "za darmo". Po prostu spróbuj.

---

Są postępy, ale nie jest do końca dobrze. Wygląda to w ten sposób:

https://imagizer.imageshack.com/img923/1372/qWnq4e.jpg

Zauważ, że to wszystko przesunęło sie nieco w prawo i nie ma odstępu pomiędzy treścią z cyfry 1 a 2 oraz 2 a 3. Wcześniej był prawidłowy odstęp, bo podałem piksele w padding.

Czy tak powinno być w CSS ?

.box4 .inner4 ol li
{
	padding: 10px 50px 10px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

 

---

Wprowadziłem kilka poprawek i teraz jest dobrze:

<ol>
	<li>Tu będzie napisany jakiś pierwszy tekst.</li>
	<li>Tu będzie napisany jakiś drugi tekst.</li>
	<li>Tu będzie napisany jakiś trzeci tekst.</li>
	<li>Tu będzie napisany jakiś czwarty tekst.</li>
	<li>Tu będzie napisany jakiś piąty tekst.</li>
</ol>

.box4 .inner4 ol
{
	padding: 5px 50px 5px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

.inner4 li
{
	margin: 10px 0px;
}

Teraz jest odstęp pomiędzy numeracją tekstu. Odpowiada za to margin: 10px. Za wyśrodkowanie tekstu odpowiada padding: 50px (im mniej pikseli, tym tekst jest bardziej rozszerzony na obszarze czarnego tła wraz z grafiką gif).