Formátování seznamů (list)

[WoffParticipant]

Dobrý den, chtěl bych poprosit o radu, poku jde o
list-style-position: inside;
respektive
list-style-position: outside;
Chtěl bych mít seznamy (lists) zobrazené jako “outside”, tedy aby odrážky (puntíky/čísla) byly lehce odskočené doleva a text řádku vždy začínal “v jedné vertikální linii”. Ale když přepíšu “inside” na “outside”, celý seznam odskočí doleva a odrážky (puntíky/čísla) zmizí. Nevíte, prosím, kde dělám chybu a jak případně CSS upravit?
Ukázka seznamu na webu je zde: http://kupnisila.cz/platy-ucitelu/
Příslušná část CSS souboru je zde:

/* LIST */	

.content ul:not([class]) {
	list-style-type: none;
	list-style-position: inside;	
	padding-left: 0px;
	padding-bottom: 22px;
	
}

.content  ul:not([class]) li {
	min-height: 22px;
	line-height: 22px;	
	padding: 0px;
	margin: 0px;
}
.content  ul:not([class]) > li:before {    
	font-family: 'FontAwesome';
	content: '\f0c8';
	vertical-align: middle;
	margin-right: 8px;
	font-size: 4px;
	font-weight: normal;
	color: #444;
}

.content ul:not([class]) li ul{
	padding-left: 14px;
	padding-bottom: 15px;
}

.content ol{	
	list-style-type: decimal;
	list-style-position: inside;	
}

.content ol li {	
	overflow: hidden;
}

	
.content ol li ol{
	padding-left: 14px;
	list-style-type: lower-alpha;	
	padding-bottom: 15px;
}

.content ul ol,
.content ol ul,
.content ul:not([class]) ol,
.content ol:not([class]) ul{
	padding-bottom: 15px;
	padding-left: 14px;
}

[mirekkParticipant Web]

A co když před celý odstavec tvořený <li>...</li> přidáte <ul> a v css nastavíte margin?

[WoffParticipant]

Díky za radu. Bohužel tak, jak jsem ji zkusil realizovat, mi nepomohla. Margin funguje, vytvoří se okraj, ale číslované odrážky zmizí a text ani při “outside position” není vlevo zarovnaný tak, aby začínal pod sebou. Ale možná jsem CSS upravil špatně (zkoušel jsem margin: 30px; i pouze margin-left: 30px;):

/* LIST */	

.content ul:not([class]) {
	list-style-type: none;
	list-style-position: outside;	
	margin: 30px;
	padding-left: 0px;
	padding-bottom: 22px;
	
}

.content  ul:not([class]) li {
	min-height: 22px;
	line-height: 22px;	
	padding: 0px;
	margin: 0px;
}
.content  ul:not([class]) > li:before {    
	font-family: 'FontAwesome';
	content: '\f0c8';
	vertical-align: middle;
	margin-right: 8px;
	font-size: 4px;
	font-weight: normal;
	color: #444;
}

.content ul:not([class]) li ul{
	padding-left: 14px;
	padding-bottom: 15px;
}

.content ol{	
	list-style-type: decimal;
	list-style-position: outside;
	margin: 30px;	
}

.content ol li {	
	overflow: hidden;
}

	
.content ol li ol{
	padding-left: 14px;
	list-style-type: lower-alpha;	
	padding-bottom: 15px;
}

.content ul ol,
.content ol ul,
.content ul:not([class]) ol,
.content ol:not([class]) ul{
	padding-bottom: 15px;
	padding-left: 14px;
}

[mirekkParticipant Web]

https://www.jakpsatweb.cz/css/list-style-position.html

[mirekkParticipant Web]

Zkuste porovnat s mým css:

.entry-content ul { list-style: square; }
.entry-content ol { list-style: decimal; }
.entry-content ul, .entry-content ol { margin: 0 0 20px 40px; }
.entry-content ul ul, .entry-content ol ol { margin: 0 0 0 40px; }
.entry-content li { margin-bottom: 5px; }
dl { margin: 0 0 10px 20px; }
dt, dd { display: list-item; }
dt { list-style-type: square; font-weight: bold; }
dd { list-style-type: circle; margin-left: 20px; }
select { max-width: 100%; }

[WoffParticipant]

Dobrý den, Mirku, díky za odkaz na stránku https://www.jakpsatweb.cz/css/list-style-position.html , kterou znám a kde se také píše o rozdílu mezi pozicemi odrážek inside a outside, což jsem zmiňoval již v úvodní otázce. Vy ve svém CSS ani jednu takovou možnost nemáte, navíc jste neuvedl odkaz na daný web, aby účastníci diskuse mohli vidět, jak se kód projevuje “venku”. Takže ještě jednou díky za pokus o pomoc, ale bohužel nyní blíže k vyřešení problému nejsme.

[mirekkParticipant Web]

Odkaz na web mám v profilu u každého mého příspěvku, ale budiž, ještě jednou sem. Je to s <ul>ale číslované seznamy <ol> jsou formátovány stejně

Po koridoru opět projede „replika“ císařského vlaku

[mirekkParticipant Web]

Ještě dodám, že ve vašem css obcas nemáte mezeru před {

[WoffParticipant]

Díky! Máte hezký web, dal jsem Vám aspoň symbolicky like na facebooku.

Nakonec byl zakopaný pes v overflow: hidden, stačilo přepsat na overflow: visible.

A po několika dalších úpravách vypadá výsledek mnohem jednodušeji, takhle (zatím jsem nenašel, že by se něco zobrazovalo blbě):

/* LIST */	

.content ul{	
	list-style-type: disc;
	list-style-position: outside;	
	padding-bottom: 22px;
}

.content ul li {	
	overflow: visible;
}

.content ul li ul{
	padding-left: 14px;
	list-style-type: lower-alpha;	
	padding-bottom: 0px;
}

.content ol{	
	list-style-type: decimal;
	list-style-position: outside;	
	padding-bottom: 22px;
}

.content ol li {	
	overflow: visible;
}

.content ol li ol{
	padding-left: 14px;
	list-style-type: lower-alpha;	
	padding-bottom: 0px;
}

.content ul ol,
.content ol ul,
.content ul:not([class]) ol,
.content ol:not([class]) ul{
	padding-bottom: 15px;
	padding-left: 14px;
}

[adminKeymaster Web]

Aha, díky za uvedení řešení, overflow: visible; by tam ale nemuselo být vůbec (je to defaulní hodnota)?

[Autor]

Příspěvky