[HTML] [PHP] dividere lo schermo in tre colonne

[paperinik4]

Salve a tutti,

Purtroppo devo riaprire una vecchia discussione a cui non ne sono venuto a capo. Ho l'intestazione in tre punti dello schermo ossia la data al margine sx, l'intestazione al centro, e a dx un vuoto in bianco che dovrà essere riempito ancora non so da coso, e una riga in orizzontale tracciata con il tag <hr>. Il mio problema è il seguente: devo dividere questi tre spazi con una riga in verticale che parte dalla riga orizzontale fino a giù. Come posso fare ??? Cerco di allegarvi un prospetto per capire il tutto. Eccollo, dove ci sono le interruzioni devono partire le righe in verticale fino a giù. Grazie a tutti dell'aiuto.

 

[cris8380]

Ciao scusa il ritardo sei stato spostato in questa sezione ti posto quello che ti serve.

<hr style="layout-flow: vertical-ideographic; width:2px; height:100px; position: relative; top: -220px;" >

ovviamente lo adatti alla tua pagina.

Buona giornata e a presto.

 

[Max 1]

Se i tuoi 3 spazi sono 3 div cosa che non ci dici, puoi anche usare tranquillamente i bordi "border"

 

[paperinik4]

Ciao Max1,

Non ho specificato se sono div perchè non ho la più pallida idea. Tanto per farti capire meglio cosa vorrei ottenere. Non so se ti ricordi il vecchio stile di fb che aveva diviso in tre colonne ??? Ecco una cosa del genere. Ovviamente senza violare il copywrite.

 

[paperinik4]

Ciao Cris,

Grazie per avermi spostato la discussione. pensavo che facesse parte del php.

 

[cris8380]

Un consiglio crea una tabella del tipo

<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

nel caso di problemi siamo qui

 

[cris8380]

Precisamente così

<table  style="width:100%" border="1" >
<tr>
<td>01/07/2016</td>
<td>Benvenuti nel modulo d'iscrizione</td>
<td>&nbsp;</td>
</tr>
</table>

 

[cris8380]

Se nel caso hai bisogno non esitare a postare qui la tua risposta, cerca di creare tu un codice personalizzato e lo posti per darti ulteriori chiarimenti.

Ti saluto.

 

[Max 1]

Si può fare anche come ha detto Cris ma è una soluzione obsoleta e non semantica. Le tabelle servono per dati tabellari ma non per costruire layout che fra l'altro poi ti lamenteresti per i problemi su mobile.
I layout vogliono fatti con i div!
Usa 3 div posizionati con float e tra i bordi come separatori.
Poi come ha detto Cris se ha problemi posta il codice che vediamo di sistemarlo

 

[paperinik4]

Ok Max 1 proverò a combinare qualche cosa, ma perchè non si trovano esempi su internet ???? O sono io che non sono riuscito a trovarli ???? Bah.....

 

[Max 1]

Ci sono esempi a volontà basta una piccola ricerca con layout a 3 colonne o simile!
Io ti rispondo da mobile e non posso fare grandi ricerche per aiutarti ma se per mercoledì non hai risolto ti faccio io il codice.
Abbi fede che a metà settimana risolviamo

 

[paperinik4]

Grazie della tua disponibilità. Purtroppo mi ricordo che avevo già risolto una volta ed ora vattela a pesca dove sta la soluzione. Comunque anche i o non sto con le mani in mano. Proverò a fare delle ricerche da te suggerite. Grazie della disponibilità.

 

[paperinik4]

Salve a tutti,

Allora finalmente ho trovato qualcosina. Ma bisogna adattarla cosa che non ci sono riuscito purtroppo. Questo è lo spezzone di codice:

.colsx{
border-right:1px solid #fff;
 }
 .coldx{
 border-left:1px solid #fff;
 }

Il risultato è il seguente:

Chiedo aiuto per poterla sistemare come da prima immagine che ho postato.

P.S.: Faccio una richiesta che nessuno ancora mi ha risposto. Dove sono i vecchi tag sul forum che c'erano prima ??? Non riesco a trovarli. Grazie a tutti.

 

[cris8380]

Buongiorno carissimo, ho creato un po di codice te lo posto provalo e vediamo cosa succede prova a creare un po di css se ne caso non ci riesci posta sempre nella stessa sezione.

<div class="riga">
<div class="colonna-1">
<header>
QUI INSERISCO L'INTESTAZIONE COME DESCRITTA NELL'IMMAGINE POI FORMATTO IL TUTTO CON CSS
</header> 
</div>
</div>

<div class="riga">
<div class="colonna-1-2">
<p><img src="img/img.png" class="IMG" alt=""></p>
</div>
<div class="colonna-1-2">
<p><img src="img/img.png" class="IMG" alt=""></p>
</div>
</div>

<div class="riga">
<div class="colonna-1-3">
<p><img src="img/img.png" class="IMG" alt=""></p>
</div>
<div class="colonna-1-3">
QUI METTO METTO QUELLO CHE MI PIACE 
</div>
<div  class="colonna-1-3">
ANCHE QUI OVVIAMENTE :-)
</div>
</div>

<div class="riga">
<div class="colonna-1">
<footer>
QUI ALLO STESSO MODO INSERISCO IL FOOTER 
</footer>
</div>
</div>

 

[cris8380]

Ti posto un codice completo incollato su un documento di testo e salvalo con l'estensione .html (es. index.html) e vedi se ti piace.

<!DOCTYPE html>
<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
</head>
<body>

<div id="header">
<h1>MODULO D'ISCRIZIONE DI PAPERINIK4</h1>
</div>

<div id="nav">
Iscizioni<br>
Iscrizioni1<br>
Iscrizioni2
</div>

<div id="section">
<h2>Iscrizioni</h2>
<p>In questa sezione scrivo cio che mi piace </p>
<p>qui posso inserire immagini e altro come mi pare e piace :-)</p>
</div>

<div id="footer">
paperinik4 - tutti i diritti sono riservati...
</div>
</body>
</html>

dai che fino alla fine vinceremoo

 

[paperinik4]

Grazue a tutti della collaborazione. Avete visto il codice che ho postato ieri ???? Stamattina provo entrambi e gi saprò dire.

 

[cris8380]

figurati e sempre un piacere collaborare!! prova il secondo che è completo

 

[paperinik4]

Ok grazie Cris.

 

[paperinik4]

Ciao cris8380,

Mancano solo le righe in verticale. Perchè sennò andrebbe pure bene sono quelle che mi fanno disperare. Ho ottenuto una cosa del genere però ancora none ra quello che volevo io:





A lato anche se non si vede c'è una riga....

 

[cris8380]

ma quindi queste righe in verticale dove dovrebbe apparir? come sono vedo nell'immagine? affianco a secondo footer ? fammi sapere perche tra un po vado via.