Pseudotriedy after, before s vlastnostou content aj pre HTML znacky ? – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Pseudotriedy after, before s vlastnostou content aj pre HTML znacky ? – CSS – Fórum – Programujte.comPseudotriedy after, before s vlastnostou content aj pre HTML znacky ? – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
greppi0
Stálý člen
20. 10. 2007   #1
-
0
-

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
Reklama
Reklama
mylan40
Super člen
21. 10. 2007   #2
-
0
-

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
-
0
-

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
-
0
-

<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: ...–
mylan40
Super člen
21. 10. 2007   #5
-
0
-

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: ...–
mylan40
Super člen
21. 10. 2007   #6
-
0
-

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
-
0
-

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
mylan40
Super člen
21. 10. 2007   #8
-
0
-

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
-
0
-

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
-
0
-

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
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 7 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý