| Autor | Zpráva | ||
|---|---|---|---|
| Misha Profil * |
#1 · Zasláno: 5. 11. 2020, 12:00:56
Ahoj všichni, prosím o radu,
mám nadpis v divu a ten nadpis má podtržení. Pomocí flexu jsem celý nadpis zarovnal. Ale teď ten problém... Jakmile zmenším DIV a text v nadpisu se zalomí, tak šířka H1 zůstane na 100%, přestože text je užší. Potřeboval bych aby se šířka H1 přizpůsobila textu. náhled: www.cssdesk.com/u2Vfs Pro otestování změňte šířku divu třeba na 400px. |
||
| Bubák Profil |
#2 · Zasláno: 5. 11. 2020, 12:22:30
Nekoukal jsem na to, ale nepomůže
whitespace: nowrap;?
|
||
| Misha Profil * |
#3 · Zasláno: 5. 11. 2020, 12:36:05
Bubák:
To ne, zalomení textu je žádoucí. Problémem je to, že šířka se nezmění. |
||
| Kcko Profil |
#4 · Zasláno: 5. 11. 2020, 20:31:47
Misha:
Zmenšuju okno a nic se neděje, cože to má dělat, vůbec nechápu co chceš. |
||
| Misha Profil * |
#5 · Zasláno: 5. 11. 2020, 20:56:10
Kcko:
Proč okno? Píšu změňte šířku divu třeba na 400 px. |
||
| tomix Profil |
Misha:
A keď nastavíš, respektíve do štýlu doplníš h1{
width:80%
} |
||
| Misha Profil * |
#7 · Zasláno: 5. 11. 2020, 21:42:47
tomix:
Zkoušel jsi to? Nepomůže. Pro upřesnění. Podtržení má vypadat tak jako v případě, že je text na jednom řádku. Text může být různě dlouhý, protože se tahá z databáze. Bohužel při zalomení textu si H1 stále drží 100% přestože šířka je menší (ale neznámá). |
||
| tomix Profil |
#8 · Zasláno: 5. 11. 2020, 21:49:47
Misha:
Pochopiteľne,že som to škúšal. Keď som nastavil širku h1 na 80%, tak sa H1 pri zmene šírky div-u napríklad na 400px sa H1 prispôsobil. Ale ak to nefunguje, tak už potom neviem čo chceš |
||
| Misha Profil * |
tomix:
Když nastavíš šířku na 80%, tak je pevně daná a nepřizpůsobuje se šířce obsahu. Když změníš šířku DIVu na 400px a odkomentuješ ten width u H1, tak se zobrazí jak by to mělo vypadat. Jenže problém je, že se to pak bude zalamovat vždycky, ikdyž to není potřeba. |
||
|
Časová prodleva: 3 dny
|
|||
| Misha Profil * |
#10 · Zasláno: 8. 11. 2020, 16:08:13
Takže řešení neexistuje?
|
||
| Serg Profil |
#11 · Zasláno: 8. 11. 2020, 18:00:36
Aby byl podtržený jen text, tak na to jsem zkusil nastavit
display: inline; pro h1, a musel jsem zrušit display: flex; u divu, ale tím se zase rozbilo vertikální vycentrování.
|
||
| Misha Profil * |
#12 · Zasláno: 9. 11. 2020, 10:03:11
Serg:
Display inline udělá podtržení všech řádků, ne jen posledního. |
||
| Kajman Profil |
#13 · Zasláno: 9. 11. 2020, 10:09:53
Co obalit text v h1 do <span> a spodní okraj dát až spanu?
|
||
| Misha Profil * |
#14 · Zasláno: 9. 11. 2020, 10:25:29
Kajman:
To jsme zase u toho, že to podtrhne všechny řádky. |
||
| Kajman Profil |
#15 · Zasláno: 9. 11. 2020, 10:45:24
A když se tomu spanu dá
display:inline-block, tak to také není správně?
|
||
| Misha Profil * |
Kajman:
Můžeš si to tam vyzkoušet. Když dáš inline-block, tak se to chová jako blokový prvek, takže tam pak ten span vůbec nemusí být. No, nakonec jsem to vyřešil pomocí JQuery, ale je to takové nečisté řešení. HTML: <div> <h1><span>Hotely a restaurace</span></h1> </div> CSS: div {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
margin: 0 auto;
width: 400px;
height: 230px;
padding: 0;
text-align: center;
}
h1 {
color: #3a3a3a;
font-size: 32px;
font-weight: bold;
margin: 0;
padding: 0 10px;
line-height: 1.2;
border-bottom: 7px solid #fbb911;
}JQuery: $(document).ready(function() {
$('section .h1 h1').autoUnderlineSize();
});
$.fn.autoUnderlineSize = function() {
$(this).width($('span', this).width() *1 + 1);
}Samozřejmě je potřeba ještě nalinkovat knihovnu JQuery. Samozřejmě místo "section .h1 h1" tam patří jen "h1". Zkopíroval jsem to ze svého projektu a zapomněl upravit strukturu. |
||
|
Časová prodleva: 7 dní
|
|||
| Tomáš123 Profil |
#17 · Zasláno: 17. 11. 2020, 00:21:53
Misha:
To je dosť neelegantné. Šlo by nadpisu nastaviť display: inline, relatívnu pozíciu a na dno absolútne napoziciovať pseudoelement :after. Ostáva ešte odstrániť padding, pohrať sa s vertikálnym centrovaním, možno niečo ďalšie, ale vie to fungovať a je to krajšie ako jQuery.
|
||
|
Časová prodleva: 6 let
|
|||
0