Linea separatoria verticale

**O'NEIL** · 20-02-2004, 19:10

Buon pomeriggio a tutti!

Vorrei chiedere se possiamo creare in linguaggio html una linea separatoria verticale, come per esempio con il commando <hr> possiamo ottenere una linea orizzontale, se esiste un commando tale da ottenere una linea verticale.

Faccio un esempio al volo con comandi css che sicuramente non è una linea separatoria ma l'effetto ottenuto potrebbe essere utilizzato come tale.
Grazie.

codice:

<head>

<style type="text/css">

p.solid 
{
#div1 {
background:white;
border-left:10px solid #CC0033;
padding :2px;
width :30px;
height:500px;
margin-right:1.5cm;
}

</style>

</head>
<body>

<p class="solid">
</body>

**index** · 20-02-2004, 20:16

Giovane, non può esistere!
Come fanno? Quella la devi fare al massimo con una tabella!

Ciao!

**O'NEIL** · 20-02-2004, 20:44

Ok grazie
ciao

**antos** · 20-02-2004, 20:51

Originariamente inviato da index
Giovane, non può esistere!
Come fanno? Quella la devi fare al massimo con una tabella!

Ciao!

perchè una tabella quando ci sono le propietà dei css
infatti puoi impostare anche solo un bordo di un elemento (che puoi usare come linea verticale)
o ancora potresti usare un blocco div largo pochi px e alto n px

**dover** · 20-02-2004, 21:12

non lo trovo molto utile se non inserito in altri contesti, ma creando un'immagine di 1px x 1px di nome per esempio dot.gif, potremmo creare un codice di questo tipo:
[img]dot.gif[/img] e avremmo creato una linea verticale di altezza 300 px. Sempre necessaria poi la creazione di livelli o tabelle per un controllo del layout.
Spero di aver aggiunto qualcosa.
Ciao,
dover

**O'NEIL** · 20-02-2004, 21:51

Si certo "dover" che hai aggiunto qualcosa!
Tutte le idee e i suggerimenti sono benvenuti e letti con particolare cura!

Grazie anche a te.
Ciao

**Jerry Masslo** · 21-02-2004, 02:06

<html>
<head>
<style>
body {text-align:center;}
.contenitore {position:relative;margin:auto;width:80%;backgroun d:silver;height:100%;text-align:left;padding-left:1%;padding-right:1%}
.linea {position:absolute;background:red;height:100%;widt h:1%;right:49%;top:0;z-index:50}
</style>
<body>

<div class="contenitore">
<div class="linea"></div>
ma a che ti serve?

</div>
</body>
</html>

**O'NEIL** · 21-02-2004, 02:55

Ottimo lavoro Jerry! Grazie!

Vorrei creare una pagina con diversi argomenti in anteprima composti da piccoli testi e piccole immagini, una roba che assomiglia più alla prima pagina di un giornale. Vorrei mettere il tutto con un'po di fantasia. Cerco di creare bordi, tabelle contenitori un'po fuori del solito.
Ti mostro un esempio di alcune tabelle multipli.

codice:

<table cellspacing=0 cellpadding=5 width=400 border=0 align="center">
        <tbody> 
        <tr valign=top> 
          <td colspan=5></td>
          <td bgcolor=#ffcccc width="54"> </td>
          <td colspan=2></td>
        </tr>
        <tr valign=top> 
          <td width="6"></td>
          <td bgcolor=#88bbbb width="56"> </td>
          <td colspan=2></td>
          <td bgcolor=#cc3333 colspan=2 rowspan=2> 
            

<font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"><font color="#FFCFCE">TESTO 
              ...

              </font>testo 1
             testo testo </font></p>
          </td>
          <td bgcolor=#ddaaaa width="3"> </td>
          <td></td>
        </tr>
        <tr valign=top> 
          <td bgcolor=#99cccc width="6"> </td>
          <td bgcolor=#006666 colspan=2 rowspan=2> 
            

<font face="Arial, Helvetica, sans-serif" size="2" color="#8CBABD">
              testo 2

              </font><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">testo testo
           </font></p>
          </td>
          <td width="20">[img]/images/23pixels.gif[/img]</td>
          <td colspan=2 rowspan=2> </td>
        </tr>
        <tr valign=top> 
          <td width="6"></td>
          <td bgcolor=#254D78 colspan=3 rowspan=3> 
            <p align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="+3"><font size="+2">Ancora testo
              testo...</font></font></p>
            <p align="center"><font face="Arial, Helvetica, sans-serif" size="3"><font color="#A5C5E2">testo ... 
             </font></font></p>
          </td>
        </tr>
        <tr valign=top> 
          <td colspan=2></td>
          <td bgcolor=#77aaaa width="54"> </td>
          <td bgcolor=#B9D3EC colspan=2 rowspan=2> </td>
        </tr>
        <tr valign=top> 
          <td width="6"> </td>
          <td bgcolor=#FFCF63 colspan=2 rowspan=4> 
            

<font face="Arial, Helvetica, sans-serif" size="2" color="#FFF4DF"><font color="#FFF5DF"> Titolo ...
              </font>

              </font><font face="Arial, Helvetica, sans-serif" size="2">Ancora un'po di testo ...
             </font></p>
          </td>
        </tr>
        <tr valign=top> 
          <td bgcolor=#FFE3AD width="6" rowspan="3"> </td>
          <td rowspan=3 width="20"> 
            

 </p>
          </td>
          <td width="10" bgcolor=#BDD3EF></td>
          <td colspan=3 bgcolor=#357CC4 rowspan=3><font face="Arial, Helvetica, sans-serif" size="2" color="#BDD3EF">bla bla 
            bla </font><font face="Arial, Helvetica, sans-serif" size="2">

            <font color="#FFFFFF">E il testo continua
           testo... </font></font></td>
        </tr>
        <tr valign=top> 
          <td width="1" bgcolor="#BDD3EF"> </td>
        </tr>
        <tr valign=top> 
          <td width="1"> </td>
        </tr>
        </tbody> 
      </table>

Comunque è solo un'idea. Vediamo.
Ti ringrazio molto
Ciao

**Jerry Masslo** · 21-02-2004, 10:55

guarda che quella linea se metti testo e si allunga il contenitore principale non si allunga più, si può sempre mettere un'altra linea sopra con bottom:0 al posto di top:0 ma è sempre una soluzione limitata, altre soluzioni su questo tipo purtroppo non sono cross-browser, secondo me quella più efficace rimane mettere la linea come immagine di sfondo in posizione centrale ripetuta solo verticalmente, basta una piccola gif.

Ho visto il tuo esempio e sarebbe tutto molto simpatico se non fosse per le tabelle, l'orientamento più recente è di riservare il loro uso all'incolonnamento di dati, quelle stesse cose si potrebbero fare con i css, è un po' complicato ma i vantaggi sono innegabili.

**Jerry Masslo** · 21-02-2004, 11:43

piccolo esempio di un tuo box coi css:

<html>
<head>
<title>box</title>
<style>
body {font-size:100%}
p {padding:0;margin:0}
.padding {padding:1em}
.verdone {margin-left:6%;background:#ce7b00;width:30%;height:5%}
.verdino {width:6%;background:#ff9900;height:20%;float:left }
.verdotto{background:#e74118;color:white;float:lef t;width:50%;font-family:verdana;sans-serif}
.bianco {color:white;font-size2em}
.giallo {color:#ffffa8;font-size:4em;}

</style>
</head>

<body>

<div class="verdone"></div>
<div class="verdino"></div>
<div class="verdotto">
<div class="padding">
<p class="bianco">tanto per fare una prova</p>
<p class="giallo">tanto per fare una prova</p>
</div>
</div>
</body>
</html>

Discussione: Linea separatoria verticale

Strumenti discussione

Ricerca discussione

Visualizza

Linea separatoria verticale

Permessi di invio