Kirjoittaja Aihe: CSS: Miten "div:before"-asetuksella lisätyn tekstin eteen saa tyhjän rivin?  (Luettu 663 kertaa)

AimoE

  • Käyttäjä
  • Viestejä: 1552
    • Profiili
Minulla on .css-tiedostossa tällainen asetus:

Koodia: [Valitse]
div.toc:before { font-size: larger; content: "Sisältö"; }
Haluaisin edellisen rivin ja tässä lisätyn tekstin väliin hieman enemmän valkoista tilaa, siis tyhjän rivin. Saako sen tehdyksi CSS-keinoin? En ole löytänyt keinoa. Laastariksi olen lisännyt tyhjän <p></p>-rivin, mutta se ei ole hyvä. HTML-editori saatttaa poistaa sen koska elementti on tyhjä, jolloin sen sisään täytyy lisätä pakotettu tyhjämerkki, mikä tuntuu turhan monimutkaiselta. Ja siihen päälle tyhjän rivin korkeuden säätö, kaikki joka HTML-tiedostoon erikseen. Miten sen saa siirretyksi CSS-tiedostoon?

kamara

  • Käyttäjä
  • Viestejä: 2090
    • Profiili
Koodia: [Valitse]
<br /> ???
Siis tämäkään ei ole CSS:ää vaan normaalia HTML:ää.

Edit - toinen tapa on tehdä se on  JavaScript, mahdollisesti JQuery:lla helpottamalla.

Edit2 - Luultavasti se ei ole mahdollista tehdä pelkällä CSS:llä. Tosin en tiedä CSS:n uusimpia hienouksia. (Tosin voihan siirtää CSS:n avulla marginaaleja), mutta ymmärtääkseni et jostain syystä sitä halua tehdä.
« Viimeksi muokattu: 17.09.19 - klo:18.10 kirjoittanut kamara »

AimoE

  • Käyttäjä
  • Viestejä: 1552
    • Profiili
(Tosin voihan siirtää CSS:n avulla marginaaleja), mutta ymmärtääkseni et jostain syystä sitä halua tehdä.
Miten niin en halua? DIV-elementti ryhmittelyelementti. Onko ryhmittelyelementeillä marginaali? Siis on. Jeps, kokeilenpa siis sitä.

retu

  • Käyttäjä
  • Viestejä: 905
    • Profiili
Siellä on margin-top tai padding-top yms. Jos taas haluat pakottaa sisältöä voit (kai) käyttää content asetusta, mutta se tuntuu vähän viritykseltä.

AimoE

  • Käyttäjä
  • Viestejä: 1552
    • Profiili
Eipä muuten auta margin-asetukset, koska ne koskevat lisätyn tekstin "Sisältö" ja div-blokin sisään tulevan tekstin väliin jäävää marginaalia. Haluan sen tyhjän ennen tekstiä "Sisältö". Miten sen saa?

Tomin

  • Palvelimen ylläpitäjä
  • Käyttäjä / moderaattori+
  • Viestejä: 10722
    • Profiili
    • Tomin kotisivut
Eipä muuten auta margin-asetukset, koska ne koskevat lisätyn tekstin "Sisältö" ja div-blokin sisään tulevan tekstin väliin jäävää marginaalia. Haluan sen tyhjän ennen tekstiä "Sisältö". Miten sen saa?

Laita se margin tuolle :before elementille.
Automaattinen allekirjoitus:
Lisäisitkö [RATKAISTU] ketjun ensimmäisen viestin aiheeseen ongelman ratkettua, kiitos.

AimoE

  • Käyttäjä
  • Viestejä: 1552
    • Profiili
Laita se margin tuolle :before elementille.
Kokeile itse, ei auta.


Tomin

  • Palvelimen ylläpitäjä
  • Käyttäjä / moderaattori+
  • Viestejä: 10722
    • Profiili
    • Tomin kotisivut
Laita se margin tuolle :before elementille.
Kokeile itse, ei auta.

Näyttäisi toimivan, jos muuttaa :before elementin block-tyyppiseksi (display: block).
Automaattinen allekirjoitus:
Lisäisitkö [RATKAISTU] ketjun ensimmäisen viestin aiheeseen ongelman ratkettua, kiitos.

AimoE

  • Käyttäjä
  • Viestejä: 1552
    • Profiili
No nyt löytyi: https://blog.escapecreative.com/add-line-breaks-css-generated-content/
Mikään noista ei sitten toiminutkaan, vaikka kuinka yritin.

Näyttäisi toimivan, jos muuttaa :before elementin block-tyyppiseksi (display: block).
Tässä on vikana se, että "block" lisää rivinvaihdon lisätyn tekstin loppuun, jolloin se heittää seuraavan rivin alkuun toggle-nappulan, jonka haluan samalle riville. Lisään napppulan javascript-koodissa. Sen avulla avaan sisälllysluettelon tai suljen sen näkyvistä. Sisällysluettelon generoi HTML-editori.
« Viimeksi muokattu: 19.09.19 - klo:11.47 kirjoittanut AimoE »

AimoE

  • Käyttäjä
  • Viestejä: 1552
    • Profiili
Nyt löysin oikeasti sen mitä hain. Avainsana onkin "inline-block" eikä vain "block".
Tämä siis lisää tyhjän rivin alkuun mutta ei loppuun:
Koodia: [Valitse]
div.toc:before { content: "Sisältö"; display: inline-block; margin-top: 16px; }
(jätin pois fontin muokkaukset)

SuperOscar

  • Käyttäjä
  • Viestejä: 3451
  • Tänään täällä, huomenna poissa
    • Profiili
    • Legisign.org
Hyvä että tähän sentään löytyi järjellinen ratkaisu. Tyhjän pystytilan lisääminen rivinvaihdolla on tasan yhtä järjetöntä HTML:ssä kuin se on tekstinkäsittelyohjelmissakin.

Nimimerkillä ”Kiroan kaikki ne ohjeet, jossa kappaleiden väliin käsketään tekemään tyhjä rivi kahdella Enterin painalluksella”. Tekstinkäsittelyssä ei koskaan pitäisi painaa Enteriä kahta kertaa peräkkäin.
openSUSE Leap 15.1 (pöytäkone 1, kannettava 1), Debian GNU/Linux 10 (kannettava 2), openSUSE Tumbleweed (pöytäkone 2, kannettava 3), LibreELEC 8.2.5 (RPi 1), Raspbian GNU/Linux 10 (RPi 2)

kamara

  • Käyttäjä
  • Viestejä: 2090
    • Profiili
Nimimerkillä ”Kiroan kaikki ne ohjeet, jossa kappaleiden väliin käsketään tekemään tyhjä rivi kahdella Enterin painalluksella”. Tekstinkäsittelyssä ei koskaan pitäisi painaa Enteriä kahta kertaa peräkkäin.

... paitsi luettelomerkkien tai numerointi muotoiluasetusten poistamisen yhteydessä. ;)