Pseudotriedy after, before s vlastnostou content aj pre HTML znacky ?

Fórum › CSS

greppi0

Stálý člen

20. 10. 2007 #1

Cafte,

mam taku teoreticku otazku, chcel by som napr. nejako nadefinovat v CSS ze po nadpise H1 by mi vzdy dalo horizontalnu ciaru (<hr />). Chcel som to riesit cez :after ale ked som do content napisal nejaku HTML znacku tak to nechcelo ist, isiel iba prosty text.

ukazka:

h1 {font-size:120%; color:black;}
[podtrzene]h1:after {content: "<hr />"}[/podtrzene] <- toto nefunguje

tak ma asi napadlo ze tieto pseudotriedy su len pre cisty text, ale je na to aj nejaka alternativa v CSS ?

thx za napady

Nahlásit jako SPAM

IP: ...–

You can make more friends in two months by becoming interested in other people than you can in two years by trying to get other people interested in you - Dale Carnegie

mylan4 0

Super člen

21. 10. 2007 #2

Tak 1. toto tak či tak nebude fungovať v IE (teda aspoň v 6-ke nie) a 2. dá sa to urobiť aj jednoduchšie a síce:
h1 {border-bottom: 1px black solid;}

Nahlásit jako SPAM

IP: ...–

greppi0

Stálý člen

21. 10. 2007 #3

toto tak či tak nebude fungovať v IE

sak to nefunguje ani v FF o to prave ide

2. dá sa to urobiť aj jednoduchšie a síce: h1 {border-bottom: 1px black solid;}

ano to ma napadlo ale ja potrebujem <hr /> a nie pociarknuty text ...

Nahlásit jako SPAM

IP: ...–

You can make more friends in two months by becoming interested in other people than you can in two years by trying to get other people interested in you - Dale Carnegie

Petroff0

Věrný člen

21. 10. 2007 #4

<to Greppi>
Nezapoměň, že přidáváš obsah=content dovnitř elementu(tedy dovnitř nadpisu) a jeho velikost - tedy šířka je omezena šířkou tohoto prvku (při width:100%).
To znamená, že v případě takových odstavců, které zabírají celou šířku stránky, bys uspěl. HTML značky sice nelze vkládat, ale vložený prvek se dá nastylovat => HR se dá nasimulovat takto:

p { margin-top: 1ex; margin-bottom: 1ex } /*...upraví se */

p:after {

content: ".";    /* jakýkoli text,tečka stačí */

display: block; 

font-size:0px;  /* aby text nebyl vidět */

height:0;       /* aby text nebyl vidět */

width:100%; 

margin-top: 1ex;   /* mezera mezi textem a čárou */

border-bottom: 2px black solid;   /* tloušťka čáry */

}

Pomocí absolutního pozicování by to šlo i u nadpisů - jen je třeba nastavit prvku, ve kterém se texty a nadpisy nacházejí (BODY či DIV...) position: relative.
[podtrzene]Ukázka:[/podtrzene]

<html><head><title>HR pod nadpisem</title></head>

<style>

.container {position:relative; margin: 0 1em; border: 1px solid gray}

h1 { margin-top: 1.5ex; margin-bottom: 1ex } /*...upraví se */

h1:after {

content: "."; /* jakýkoli text,tečka stačí */

text-indent: -9999px;  /* aby text nebyl vidět */

display: block;

position:absolute;

height:0; /* aby text nebyl vidět */

top:auto;

left:0;

right:0;

margin-top: -2px; /* mezera mezi textem a čárou */

border-bottom: 2px black solid; /* tloušťka čáry */

}

</style>

<body>

<div class="container">

<h1>nadpis1</h1>

<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus

vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis

dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber

Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum

imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam

commodo libero elei fend ipsum.</p>

<h1>nadpis2</h1>

<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus

vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis

dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber

Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum

imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam

commodo libero elei fend ipsum.</p>

</div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

mylan4 0

Super člen

21. 10. 2007 #5

2 greppi:
1. to bolo myslené všeobecne - pseudotrieda :after nefunguje v IE, takže aj keď to rozbeháš vo Fx, nebude to mať veľký význam
2. prečo tam musí byť <hr /> ? - pýtam sa len zo zvedavosti, nechápem prečo nestačí nastaviť vlastnosť border

Nahlásit jako SPAM

IP: ...–

mylan4 0

Super člen

21. 10. 2007 #6

to Petroff: tak tomuto riešeniu nerozumiem - zdá sa mi to príliš komplikované a hlavne nepraktické, neelegantné. Prečo nastavovať border-bottom: 2px black solid; tej pseudotriede??? Prečo sa to rovno nenastaví tomu nadpisu h1???

Nahlásit jako SPAM

IP: ...–

greppi0

Stálý člen

21. 10. 2007 #7

prečo tam musí byť <hr /> ? - pýtam sa len zo zvedavosti, nechápem prečo nestačí nastaviť vlastnosť border

z grafickych dovodov - keby tam bol len border, ciara by bola len pod nadpisom a ja potrebujem ciaru cez celu stranku. Preto <hr /> ...

to Petroff: tvoj priklad je fainovy, aj ked je trocha zlozitejsi je dobry ... ale ako som sa dozvedel od mylan4 pseudotriedy nefunguju v IE :'( skoda ...

Nahlásit jako SPAM

IP: ...–

You can make more friends in two months by becoming interested in other people than you can in two years by trying to get other people interested in you - Dale Carnegie

mylan4 0

Super člen

21. 10. 2007 #8

keby tam bol len border, ciara by bola len pod nadpisom a ja potrebujem ciaru cez celu stranku

No, ale veď h1 je blokový element, takže defaultne je roztiahnutý cez celú stránku, jedine že by si nejako upravoval jeho šírku...

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

21. 10. 2007 #9

Beru výtky na vědomí ... on to byl stejně spíš příklad, co lze dostat použitím pseudo-content kromě vkládání text.obsahu
(nebo spíš co jednou bude možné, až bude běžný na všech platformách....)

Nahlásit jako SPAM

IP: ...–

greppi0

Stálý člen

21. 10. 2007 #10

No, ale veď h1 je blokový element, takže defaultne je roztiahnutý cez celú stránku, jedine že by si nejako upravoval jeho šírku...

tak to som nedomyslel teda :) ...

ale mne tuto slo viac o riesenie vseobecneho problemu ako nahradu za nieco ine ...

Nahlásit jako SPAM

IP: ...–

You can make more friends in two months by becoming interested in other people than you can in two years by trying to get other people interested in you - Dale Carnegie

← Zpět na seznam vláken ← Zpět do Fóra