| Autor | Zpráva | ||
|---|---|---|---|
| rudla Profil |
Existuje linka jako <hr> ale
Díky. Moderátor Joker: Myšleno vertikální. Upravil jsem to, aby to nemátlo případné další čtenáře, když to neudělal autor.
A smazal jsem přebytečné tři otazníky za větou. |
||
| panther Profil |
#2 · Zasláno: 24. 7. 2010, 19:09:30
rudla:
„Existuje linka jako <hr> ale horizontální?“ myslíš pravděpodobně vertikální, že? Horizontální je totiž tahle. Neexistuje. Ani existovat nemůže, kde by začínala a kde končila? Použij obrázek na pozadí nebo border. |
||
| rudla Profil |
#3 · Zasláno: 24. 7. 2010, 19:11:09
Sorry za to horizontální.
Už jsem si to uvědomil. |
||
| Bubák Profil |
#4 · Zasláno: 24. 7. 2010, 19:12:26
V této diskusi se to probíralo přibližně před dvěmi roky, padla tam i spousta nepraktických řešení.
Jak se v HTML dělá svislá čára?* |
||
| panther Profil |
#5 · Zasláno: 24. 7. 2010, 19:14:51
Bubák:
„V této diskusi se to probíralo přibližně před dvěmi roky“ já to téma schválně nechtěl vytahovat. No budiž. |
||
| Petr ZZZ Profil |
#6 · Zasláno: 25. 7. 2010, 15:12:05 · Upravil/a: Petr ZZZ
rudla:
Vertikální čára, která by se dala zapsat podobně jednoduše jako horizontální <hr>, myslím v HTML není, ale můžeš nějakému bloku nastylovat okraj, například takto:
<html>
<head>
<style>
.vertik { border-left:solid 6px;
border-left-color:#30c;
border-right:solid 6px;
border-right-color:#30c; }
</style>
</head>
<body>
<div class="vertik">
<p>1. Nějaký text odstavce.</p>
<p>2. Jakýsi další odstavec.</p>
</div>
<p>3. Třetí odstavec, ten je bez okrajů, protože je už mimo
div, který má nastylovaný levý a pravý okraj.</p>
<p class="vertik">4. A čtvrtý odstavec, zase s okraji,
protože dostal příslušnou třídu.
</p>
<p class="vertik">5. Pátý odstavec má zase okraje, protože
zase dostal tu stejnou třídu jako div s odstavci 1 a 2 a jako
odstavec 4. Jen mezi odstavci 4 a 5 není okraj, protože třídu
dostaly pouze odstavce a ne div, který by odstavce uzavíral
jako div kolem odstavců 1 a 2. Název třídy si můžeš zvolit
jaký chceš, třeba kongo (místo vertik), jen se musí shodovat
ve stylopisu (to je to s tou tečkou na začátku) a v body.
Chceš-li čáru jen jednu, musíš ze stylopisu umazat buď levý
nebo pravý okraj. Chceš-li čáry delší než je text odstavce,
můžeš například před koncem odstavce "od<br>čkovat" pár
prázdných řádků. Dvakrát sémantické to asi nebude,
ale funguje to.<br><br><br><br><br>
</p>
</body>
</html>Dva sloupce textu oddělené vertikální čarou by se udělaly jako dva obtékané <div>y, přičemž jeden z nich by měl okraj (například pravý <div> by měl nastylovaný border-left).
|
||
|
Časová prodleva: 4 roky
|
|||
| Mirek z Ostravy Profil |
#7 · Zasláno: 28. 10. 2014, 12:16:25
Vertikal se dá udělat i takto:
<html> <!--Obsah--> <table align="left" valign="top" width="100%" border="0" bgcolor="green"> <tr> <td colspan="5" align="center" width="50%"> <Font color="white"><b>N a d p i s 1</b></Font></td> <td rowspan="4" width="1" bgcolor="brown"></td> <td colspan="5" align="center" width="50%"> <Font color="white"><b>N a d p i s 2</b></Font></td> </tr><tr> <td align="left"> <Font color="violet"><b>01</b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left" width="120"> <Font color="violet"><b>31</b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> </tr><tr> <td align="left"> <Font color="violet"><b>02</b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="violet"><b>32</b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> </tr><tr> <td align="left"> <Font color="violet"><b>03</b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="violet"><b>33</b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> <td align="left"> <Font color="lightblue"><b></b></Font></td> </tr> </table> </html> |
||
| Marschmallow Profil |
#8 · Zasláno: 28. 10. 2014, 12:18:15 · Upravil/a: Moderátor (editace znemožněna) 28. 10. 2014, 15:33:31
Mirek z Ostravy:
Hmmm, super... Proč bych k tomu měl používat ještě tabulku? Moderátor Petr ZZZ: Zrušen přivolávač moderace.
|
||
| Petr ZZZ Profil |
Vytvářet tabulku jen kvůli svislé čáře by bylo zbytečně komplikované řešení, ovšem pokud z jiných důvodů tabulka už existuje, je možné ji upravit a nastylovat tak, aby mezi jejími sloupci byla svislá čára (byly svislé čáry). Trochu jsem kód Mirka z Ostravy upravil a zkrátil (živá ukázka). Protože čára sestává ze samostatného sloupce (čáry sestávají ze samostatných sloupců) tabulky, je to řešení trochu ošklivé, ale snad by mělo být všude funkční.
<!doctype html>
<meta charset="utf-8">
<style type="text/css">
td { text-align:center; }
</style>
<table valign="top" width="100%" border="0" bgcolor="aqua">
<tr>
<td colspan="2" width="50%">
<h2>Nadpis vlevo</h2></td>
<td rowspan="3" width="0.5%" bgcolor="blue"></td>
<td colspan="2" width="49.5%">
<h2>Nadpis vpravo</h2></td>
</tr><tr>
<td> AAA </td>
<td> BBB </td>
<td> CCC </td>
<td> DDD </td>
</tr><tr>
<td> EEE </td>
<td> FFF </td>
<td> GGG </td>
<td> HHH </td>
</tr>
</table> |
||
|
Časová prodleva: 9 let
|
|||
0