Vánoční nadílka Vánoční nadílka
Vánoční akce! Daruj lepší budoucnost blízkým nebo sobě. Až +50 % zdarma na dárkové poukazy. Více informací

Diskuze: zesílení přeškrtnutí wordpress

HTML a CSS Redakční systémy zesílení přeškrtnutí wordpress American English version English version

Aktivity (1)
Avatar
Rudolf Lichteneger:16. října 11:40

Ahoj všichni, prosil bych o radu, jak zesílit čáru přeškrtnutí v editoru wordpress.
V jídelním lístku chci například v menu přeškrtnout jídlo, které již není k dostání a současné přeškrtnutí je tak slabé, že je sotva vidět viz. obrázek:

 
Odpovědět 16. října 11:40
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16. října 12:51

Ahoj,

podíval bych se, jaký je výsledný HTML kod a na ten bych následně upravil css kod.

Ovládáš css?

Díky,
Marek

 
Nahoru Odpovědět 16. října 12:51
Avatar
Odpovídá na NouF
Rudolf Lichteneger:16. října 13:57

Ach ne, to jsem zapomněl podotknout Porve v životě jsem si složil web ale bez sebemenších znalostí jen pomocí různých návodů. je mi 66 let a udělal jsem to pro jednu známou. já se spíše věnuji opravám PC.
Pokud v editoru kliknu na značku "Přeškrtnutí" a dám prozkoumat, tak mi vpravo vyjede tabulka pravděpodobně CSS ale nevím kde zvětšit px (pixely?) toho přeškrtnutí.
Jinak jestli chceš můžeš se podívat na to moji hrůzu prvotinu:

http://hospudka-na-horce.cz/

Jinak díky za tvou snahu mi pomoci. Ruda

 
Nahoru Odpovědět 16. října 13:57
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16. října 14:05

Můžeš někde přeškrtnout nejaký text, abych videl jak to ten editor udělá, jestli použije třídu, nebo text-decoration: line-through

Děkuju

 
Nahoru Odpovědět 16. října 14:05
Avatar
NouF
Člen
Avatar
NouF:16. října 14:10

Koukám že je to ta lepší varianta. Jestli máš někde css soubor, tak tam jen vložíme název třídy, kterou pak upravíme.

 
Nahoru Odpovědět 16. října 14:10
Avatar
Rudolf Lichteneger:16. října 14:10

Ano, Jídelní lístek "Hovězí líčka....)

 
Nahoru Odpovědět 16. října 14:10
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16. října 14:12

To nevidím jako přeškrtnuté. Vy ano?

 
Nahoru Odpovědět 16. října 14:12
Avatar
Rudolf Lichteneger:16. října 14:14

Proboha jsem nevědomý, myslíš soubor css toho jídelního lístku? Díky za trpělivost (stydím se)

 
Nahoru Odpovědět 16. října 14:14
Avatar
Rudolf Lichteneger:16. října 14:16

ano aktualizoval jsem stránku

 
Nahoru Odpovědět 16. října 14:16
Avatar
NouF
Člen
Avatar
Odpovídá na Rudolf Lichteneger
NouF:16. října 14:19

Tak už to vidím i já.

Výsledek je ten, že pro přeškrtnutí se používá tag "DEL". To je fajn, protože máme možnost si v css souboru té šablony, určit cokoliv chceme.

1. krok - najít si css soubor, kam si budeme vkládat vlastní css kod. (normálně bych si vytvořil vlastní css soubor, ale nebudu vás trápit) najdete si tento soubor - http://hospudka-na-horce.cz/…nt/style.css?…

Do toho přidejte na konec:

del {
text-decoration: none;
font-size: 4em;
position: relative;
}
del::after {
border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);
content: "";
left: 0;
line-height: 1em;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}

Editováno 16. října 14:20
 
Nahoru Odpovědět 16. října 14:19
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17. října 8:37

Si myslim, ze sila preskrtnuti by mohla jit nekde v css3 nastavit. Pokud ne, dal bych tam normalne caru. Googloval jsi? :)

<style>
span.skrtni {position:relative;}
span.skrtni span {position:absolute; width:100%; bottom:0.125em; border-top:4px solid #f00; height:4px; display:block;}
</style>
<span class="skrtni">text<span></span></span>

<style>
span.skrtni2 {line-height:16px; font-size:60px; text-decoration:line-through;}
span.skrtni2 span {font-size:12px;}
</style>
<span class="skrtni2"><span>text</span></span>

google = text-decoration-line

 
Nahoru Odpovědět 17. října 8:37
Avatar
Odpovídá na Peter Mlich
Rudolf Lichteneger:17. října 13:32

Ahoj, sílu čáry vyřešil "NouF" ale nepovedlo se vyřešit přeškrtnutí tří řádků v tabulce viz. foto. Diky za ochotu, To tvoje řešení je co? moc tomu nerozumím díky. Ruda

 
Nahoru Odpovědět 17. října 13:32
Avatar
Odpovídá na Rudolf Lichteneger
Rudolf Lichteneger:17. října 13:34

Ano googloval ale nebyl jsem z toho moudrý, tak jsem se obrátil sem jako poslední spása.

 
Nahoru Odpovědět 17. října 13:34
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:18. října 8:01

Nechapu, ze nerozumis. Vsechna ta reseni jsou uplne jasna, podle kodu. Dal jsem ti html i css kod, staci zkopirovat, otestovat. Ono asi zalezi na tom, jak moc ovladas css a zda vis, co dela border, co position+top a pod.

  • Nouf pouzil tag <DEL> a k nemu si pres css fintu :after+content:"" pridal dalsi tag, kteremu definoval caru a posunul ho tak, aby prekryval text.
  • Totez dela moje prvni reseni, ale misto css :after tam pridavam tag SPAN.
  • To treti reseni neni uplne doladene. To zvetsi font strasne moc, 60px;. Diky tomu se zvetsi i tloustka preskrtnuti a ten druhy tag SPAN vrati font zas zpet na 12px.

Pozicovani cary je pouzitelne v pripade, kdy se text nezalamuje pres dva radky. Proto jsem pridal to druhe reseni s text-decoration. Ale to ma take sve mouchy. Nepovedlo se mi tu caru dat doprostred. Ale nejspis to pujde, nejak docilit, pres line-height nebo jinak. S tim uz si pohrajes.

Na obedy pouzivam menicko.cz, mesto Opava. Tam je to prehledne napsane. Tva tabulka je tak trochu chaos.


border - dela ramecek kolem elementu border-bottom je dole ___t_e_x_t___
position - absolute/relative, uvolnuje element pro posun
top - nastavuje pozici zhora, pokud je pouzite position:abso­lute/relative
display:block - premeni inline element na block element
width:100% - roztahne element do sirky (musel jsem pouzit, protoze puvodni elemen je SPAN, typu inline, jeho sirka se ridi sirkou textu v nem - <span></span>, uvnitr neni zadny text)
height:4px - snizil jsem vysku elementu na 4px. Pokud bych to eudelal, vyska je nastavena default na 1 nebo asi 1.25em, vyska pismenka, to by melo za nasledek prekryvani.
Ok, tak to zkus jinak, pulku z tech veci vyhazu a oramuji oba prvky...

<style>
span.skrtn     i {border:4px solid #f00; position:relative; }
span.skrtni span {border:4px solid #f00; position:absolute; bottom:0.125em; width:200px;}
</style>
<span class="skrtni">text<span></span></span>
 
Nahoru Odpovědět 18. října 8:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:18. října 8:09

Jo, position relative definuje oblast, ramecek, od ktereho bude pocitat souradnice pro left, right, top, bottom.
Kdyby jsi to pro prvni tag nepouzil, tak to position absolute bude pocitat souradnice podle nejblizsiho elementu s relative nad tim tagem ve stromu tagu. Pokud tam zadny nemas, tak se pocita od BODY. bottom:0.125em; zpusobi, ze ti to posune kamsi uplne pryc na spodni okraj stranky. Proto se to cele uzavira do position.

https://www.jakpsatweb.cz/css/
Vpravo je seznam css vlastnosti, rozklikej si to a neco si precti.
Pseudo trida :after tam asi popsane neni, to je takova specialitka. Hlavne se to muze chovat odlisne v chrome, ie, ff. Maji neco malo k tomu zde.
https://www.jakpsatweb.cz/…content.html
Nebo muzes jit na oficialni zdroje prohlizecu, treba firefox to ma popsane zde
https://developer.mozilla.org/…/CSS/::after

Editováno 18. října 8:10
 
Nahoru Odpovědět 18. října 8:09
Avatar
Odpovídá na Peter Mlich
Rudolf Lichteneger:18. října 15:11

Děkuji ti moc za snahu mi pomoci ano moc tomu nerozumím, proto jsem se obrátil sem.
5ešení od "NouF" je dobré, pouze to nedokáže přeškrtnout dva řádky po sebou ale když udělám mezeru mezi těmi řádky, tak je to v pohodě, viz. příloha.
Šlo by toto řešení upravit aby to přeškrtlo ty řádky těsně pod sebou?
Web jsem dělal poprvé v životě bez sebemenších znalostí, podívám se na to menu "menicko.cz, mesto Opava"
Tady je ten script:

del {
text-decoration: none;
position: relative;
}

del::after {
border-bottom: 0.2em solid rgba(0, 0, 0, 1);
content: "";
left: 0;
line-height: 1em;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}

ještě jednou moc děkuji

 
Nahoru Odpovědět 18. října 15:11
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19. října 9:00

Prave to nejde. Funguje to jen pro jeden radek.

Zkusim to nazorne vysvetlit...
[ text ]
[ text [] ] To podtrzeni od Nouf funguje tak, ze si prida za ten text dalsi element.
[ text [ ] ] Jeho default valstnosti je, ze zkopiruje sirku, vysku a jine vlastnosti podle toho, ze ktereho je odvozeny.
[ [text] ] Kdyz aktivujes postion:relative a position:absolute + left:0, tak se oba elementy zacnou prekryvat.
(Pak si mohl usetrit praci a misto marginu pouzit top. A vlastnosti left a right se vzajemne prepisuji, stacila jedna.)

. [ ]
[ [ ] ]
[ text ]
[ ]
Potom tedy pouzije zaporny margin zhora a tim ten element posune ten novy element na vysku doprostred.

. [ ]
[ [__] ]
[ text ]
[ ]
A potom tam prida caru, oramovani elementu, ktera finguje to preskrtnuti a nastavi dalsi vlastnosti vzhledu.


Z toho plyne, pokud podtrhavas text pres dva radky, takto to bude fungovat

<del> text </del>
<del> text </del>

A takto uz nee

<del> text
text</del>

A muzes zkusit doladit to reseni s

<style>
span.skrtni2 {line-height:16px; font-size:60px; text-decoration:line-through;}
span.skrtni2 span {font-size:12px;}
</style>
<span class="skrtni2"><span>text</span></span>

A nebo mne vcera jeste napadlo pouzit hr
<style>
span.skrtni2 {line-height:16px; font-size:60px; text-decoration:line-through;}
span.skrtni2 span {font-size:12px;}
</style>
<span class="skrtni2">­<span>text</span></sp­an>

A mozna lepsi ukazku pro ty 3 moznosti

<style>
div {font-size:20px;}
</style>


<style>
span.skrtni {position:relative;}
span.skrtni span {position:absolute; width:100%; bottom:0.125em; border-top:4px solid #f00; height:4px; display:block;}
</style>
<div><span class="skrtni">text<span></span></span></div>
<div><span class="skrtni">prvni<br> druhy<span></span></div>

<p><hr></p>

<style>
span.skrtni3 {position:relative;}
span.skrtni3 hr {position:absolute; top:0em; width:100%; background:#00f; height:4px;}
</style>
<div><span class="skrtni3">text<hr></span></div>
<div><span class="skrtni3">prvni<br> druhy<hr></span></div>

<p><hr></p>

<style>
span.skrtni2 { font-size:60px; text-decoration:line-through; color:#080; }
span.skrtni2 span {font-size:20px; color:#000; }
</style>
<div><span class="skrtni2"><span>text</span></span></div>
<div><span class="skrtni2"><span>prvni<br> druhy</span></div>
 
Nahoru Odpovědět 19. října 9:00
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19. října 9:15

A jeste jsem vystaral reseni s obrazkem.
google = strike width line css

<style>
span.skrtni4 {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position: 0 0.6em;
}
</style>
<div><span class="skrtni4">text</span></div>
<div><span class="skrtni4">prvni<br> druhy</span></div>

https://stackoverflow.com/…kness-in-css

 
Nahoru Odpovědět 19. října 9:15
Avatar
Rudolf Lichteneger:20. října 22:49

Pánové, díky všem co se mi snažili pomoci ale vzdal jsem to, Zmenšil jsem velikost písma aby se název vešel na jednu řádku a je to vyřešené. Škoda, že nevím jak by se dala rozšířit plocha editoru (zalamování řádku), aby se vešel název s většími písmy do jednoho řádku.

 
Nahoru Odpovědět 20. října 22:49
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22. října 8:48

1. www prohlizec - zobrazit zdrojovy kod stranky
Pripadne ve ff se da udelat ctrl+a - prave tl - zobrazit zdrojovy kod vyberu (coz veme i html vygenerovane javascriptem, to muze byt v pripade editoru generovaneho pres js dost klicove)
2. ctrl + a
3. pspad - novy - html (ono to i nudlicky html kodu pekne preformatuje)
4. ctrl + v
5. v menu najit preformatovat html
6. A potom si v tom zjistis id, tridu, div, ve kterem to je a a vytvoris si pro nej css, ktery pak pridas do sablony.
Otazka asi 5 min to opravit. :)

Jsem ti poslal reseni. Ty sis je ani nezkusil, ze? ten obrazek mi prisel jako zajimave, za jistych okolnosti i funkcni reseni.
Z poslednich zprav oznacis posledni 2 bloky kodu. ctrl+c, plocha - prave tlacitko - novy > textovy soubor - ctrl+v - Soubor>Ulozit jako xx.html. 2x kliknout na plose.
Ten obrazek funguje tak, ze na pozadi pod textem vykresli vodorovne cary. Cili, kdyz je to pres 2 radky, vykresli se 2. Muze to delat problem u vice radku a nebo pri zmene velikosti radku.

Ale, poloz si jinou otazku. Ma smysl na webu u jidelniho listku to skrtat? Proste ten clovek dojde do restaurace a zjisti, ze uz to neni v menu. To se stava. Musi se naucit mit zalozni plan, jinou restauraci, jine jidlo. V Opave to chodi tak, ze nektere menicko je uz v 11:30 vyprodane. Coz pro mne osobne je treba zklamanim. Menicka davaji do 14, takze by aspon do 13 meli mit dost.

 
Nahoru Odpovědět 22. října 8:48
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22. října 8:53

Jo, mezi nami, ja bych na to pouzil tabulku, jako to ma to menicko.cz. Kdyz se ten prostredek zalomi, tak se zalamuje uprostred. Navic to vypada vic solidne, jedna barva, jedno pismo, prirozene zalamovani.

Vývar s nudlemi
100g  1. Vepřový steak Argentina( krkovička ), Šťouchačky, okurek   79 Kč (1, 10, 13)
150g  2. Kuřecí ragů na zelenině, čínské nudle                      79 Kč
300g  3. Šťavnatá uzená krkovička, čočka na kyselo, pečivo, okurek  79 Kč

Jeste bys tam mel mit alergeny.
https://www.strava.cz/…alergeny.pdf

Editováno 22. října 8:55
 
Nahoru Odpovědět 22. října 8:53
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 22 zpráv z 22.