Formátování seznamů (list)

Zvolené téma obsahuje celkem 9 odpovědí. Do diskuze (3 účastníci) se naposledy zapojil uživatel  admin a poslední změna je stará 6 dní, 14 hodin.

Aktuálně je na stránce zobrazeno 10 příspěvků - 1. až 10. (z celkem 10)
  • Autor
    Příspěvky
  • #32520

    Woff
    Participant

    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;
    }
    #32521

    mirekk
    Participant
    Web

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

    #32536

    Woff
    Participant

    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;
    }
    #32537

    mirekk
    Participant
    Web
    #32538

    mirekk
    Participant
    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%; }
    #32543

    Woff
    Participant

    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.

    #32553

    mirekk
    Participant
    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

    #32554

    mirekk
    Participant
    Web

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

    #32563

    Woff
    Participant

    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;
    }
    #32578

    admin
    Keymaster
    Web

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

Aktuálně je na stránce zobrazeno 10 příspěvků - 1. až 10. (z celkem 10)

Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.

WordPress – novinky, návody a zajímavosti