Autor Zpráva
Anonymní
Profil *
Nevím, jak udělat jednu věc. Jednou jsem to viděl na některém webu a moc se mi to líbilo. Jedná se o rámeček, který je nahoře přerušen a do něj je vepsán text...takhle nějak:

----- aktualita -----
| |
| |
| |
| |
-----------------------

Nevíte někdo jak? Díky-
DJ Miky
Profil
<fieldset>
<legend>aktualita</legend>
</fieldset>

... a pomocí CSS vycentrovat
Bubák
Profil *
DJ Miky Tomu říkám zmeužití HTML tagů na něco jiného, než jsou určeny.

h3 {
margin: 0; /* pro Firefox */
text-align: left;
position: absolute;
top: -0.6em
}
h3 span {
background: silver;
margin-left: 3em;
padding: 0 0.5em;
}
.aktuality p {
margin: 1em 1em
}
</style>
<div class="aktuality">
<h3><span>První aktualita</span></h3>
<p>Lorem ipsum dolor sit hulanos consectetuer porttitor.</p>
<p>Amet semper facilisis non ut Duis Fusce ullamcorper.</p>
<p>Ut Maecenas Cras Cum at neque morbidni Maecenas consectetuer.</p>
</div>
<div class="aktuality">
<h3><span>druhá aktualita</span></h3>
<p>Interdum Nam convallis pellentesque Curabitur enim senectus.</p>
<p>Sed commodo amet dapibus tincidunt Sed habitasse.</p>
<p>Proin et pellentesque nibh et diam id dui eu Cras.</p>
</div>

IE, potvůrka podivná, nadpis napozicuje o pár px výše, než zbytek světa.
Bubák
Profil *
Nedal jsen tu celý CSS, tak ještě jednou (musím se zaregistrovat):

<style>
.aktuality {
width: auto;
height: auto;
border: 3px double blue;
position: relative;
margin: 2em 1em 1em
}
h3 {
margin: 0; /* pro Firefox */
text-align: left;
position: absolute;
top: -0.6em
}
h3 span {
background: silver;
margin-left: 3em;
padding: 0 0.5em;
}
.aktuality p {
margin: 1em 1em
}
</style>
Anonymní
Profil *
Mám dva dotazy:

1) nejde mi zformátovat font v h3

2) nejde mi ten div začlenit do mého rámce:

<table class="text" cellpadding=4 cellspacing=0 border=0 width="81%" align="left">
<tr>
<th>
Úvodní slovo
</th>
</tr>
<td align="center">
<h4>bla bla</h4>
</td>
</tr>
</table>

vždy se mi ty aktuality zobrazí nad rámcem, mimo něj...
Anonymní
Profil *
Prosím, poraďte jak na to ???
Bubák
Profil
1) nejde mi zformátovat font v h3
Mi jde zfozmátovat font. Můžeš to lépe popsat?

2) nejde mi ten div začlenit do mého rámce:
Máš tam tabulku a a dvě buňky, nikdo neví, kam to chceš dát.
peta
Profil *
"Jedná se o rámeček, který je nahoře přerušen a do něj je vepsán text"

<form>

<fieldset>
<legend>Nadpis</legend>
Obsah
</fieldset>

</form>

Bubák
Proc si komplikovat zivot s CSS? :)
Ale bohuzel trocha CSS neni na skodu, protoze Filedset se v IE a FF chova trosku odlisne...
Jinak v tvem pripade bych misto H3 pouzil divovou konstrukci, protoze H3 je H3.
Cili asi neco takoveho:

<div class="ram">
<div class="ramNadpis">Nadpis</div>
Obsah
</div>

a CSS
<style>
.ram
{
position: relative;
border: 3px double #000;
margin: 1em; /* kdo vi, co to udela ve FF nebo IE*/
padding: 1em;
}
.ramNadpis
{
position: absolute;
top:-1em; /* take nevim, jak se to zachova v IE a FF, mozna bude treba pridat margin */
left:1.5em;
padding: 0 .5em;
background:#fff;
}
</style>
Bubák
Profil
ramNadpis
Už z toho je jasné, že tam chceš nadpis, a na nadpisy je "odjakživa" napis. Že to nemusí být H3, mi je jasné, který nadpis to bude, vyplyne "samo" ze sémantiky dokumentu. Sémantika je dobrá věc, doporučiji nastudovat

margin: 1em; /* kdo vi, co to udela ve FF nebo IE*/ Totéž, co v jiých prohlížečích, podporujících CSS, doporučiji nastudovat
peta
Profil *
Bubák
Hmhmhm, vtipnej :) Ja mam zkusenosti, ze prave magriny top,bottom nektere prohlizece uplne ignoruji :) Treba takove IE.

Co se tyce nadpisu, nadpis je nadpis, nikoli popisek dialogu. Takhle, nebudem to resit, ty bys pouzil H3, ja ne. A kazdy vi proc.
peta
Profil *
A propo s tou semantikou, pripominas mi pixyho filozofii. Podivej se, jak odflakl stranky ministerstva informatiky a to by meli byt reprezentativni. Moznaa jsou semanticky dobre, ale jinak plne chyb.
Bubák
Profil
Ja mam zkusenosti, ze prave magriny top,bottom nektere prohlizece uplne ignoruji :) Treba takove IE.
Uvěď příklad (třeba odkaz na kod) na ignorování magrinu, jinak to jsou jenom hospodské kecy.

Jnadpis je nadpis, nikoli popisek dialogu
Anonymní nechtěl zarámovat dialog, a kdyby normální šlověk chtěl popsat dialog chtěl pojmenovat, , tak použije třídu ramPopis, popisDialog, a né ramNadpis

jinak plne chyb Viděl jsi svůj rámeček ve Firefoxu?
habendorf
Profil
Ja mam zkusenosti, ze prave magriny top,bottom nektere prohlizece uplne ignoruji :) Treba takove IE.
Uvěď příklad (třeba odkaz na kod) na ignorování magrinu, jinak to jsou jenom hospodské kecy.


Asi tak.
Toto téma je uzamčeno. Odpověď nelze zaslat.

0