Autor Zpráva
rudla
Profil
Existuje linka jako <hr> ale horizontální vertikální?
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
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
Sorry za to horizontální.
Už jsem si to uvědomil.
Bubák
Profil
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
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
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).
Mirek z Ostravy
Profil
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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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
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>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: