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

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Salve a tutti,

Volevo capire delle cose.

1) la riga in verticale non è stata tratta con il tag <hr> ???

2) Per prolungare le righe cosa debbo fare ???

3) perchè il mio editor mi da il seguente errore: padding: 30px; 30px 0 30px;l'ho evidenziato perchè era difficile sottolinearlo.

4) Vorrei togliere lo spazio che c'è tra l'intestazione e la riga in verticale, inoltre vorrei mettere se è possibile la data a sx dello schermo senza quello spazio, al centro l'intestazione e a dx anche vuoto va bene.

Chiedo a voi perchè non vorrei creare casini nel toccare e fare modifiche benchè abbia fatto una copia del file. Spero di ricevere risposta. Grazie
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
1) la riga in verticale non è stata tratta con il tag <hr> ???
No! È stata ottenuta con border
2) Per prolungare le righe cosa debbo fare ???
Niente! Man mano che si allunga i div con i contenuti si allungano anche le righe verticali. Altrimenti se le vuoi più lunghe senza contenuti dai un'altezza ai div.
4) Vorrei togliere lo spazio che c'è tra l'intestazione e la riga in verticale, inoltre vorrei mettere se è possibile la data a sx dello schermo senza quello spazio, al centro l'intestazione e a dx anche vuoto va bene.
Questa non l'ho capita spiega meglio. Spazio tra intestazione e righe verticali non ce nè c'è solo uno spazio tra il testo e la riga orizzontale che è dovuto all'ampiezza dei div che puoi regolare regolando il padding
3) perchè il mio editor mi da il seguente errore: padding: 30px; 30px 0 30px;l'ho evidenziato perchè era difficile sottolinearlo.
Ti da errore perchè io ho fatto un errore di battitura scrivendo il codice, ho messo un ";" in più dove non ci voleva e cioè questo:
Codice:
padding: 30px; 30px 0 30px;
il codece corretto è così:
Codice:
padding: 30px 30px 0 30px;
Se lo correggi in quel modo sparisce anche lo spazio tra il testo e la riga orizzontale
 
  • Like
Reactions: paperinik4

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Salve a tutti,

Ho bisogno ancora di voi. Tanto vedo che le discussioni non si chiudono quindi non faccio nessun danno ehehehehe. Ho provato ad allungare la linea verticale ci sono riuscito ma non mettetevi a ridere perchè si è allungata solo dappa parte dx dello schermo e a sx niente. Vi mando l'immagine. Come posso risolvere ??? Come potete vedere quello cerchiato in blu ossia la data che la ottengo da un file esterno chiamato data.php dovrebbe stare più sulla sx e invece l'intestazione va bene al centro. Se mi dite come fare posso provare a modificare anche da solo. Grazie.
 

Allegati

  • Risultato prolungamento della linea orizzontale.PNG
    Risultato prolungamento della linea orizzontale.PNG
    10,9 KB · Visite: 289

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Direi qausi perfetto c'è un ulterirore modifica da apportare, ma se mi dici come si fa la faccio io. La riga che io ho detto verticale ma non era verticale volevo dire orizzontale mi si è prolungata solo da un lato come puoi vedere dall'immagine, vorrei prolungarla anche dal lato sx. Come posso fare ??? Tieni presente che le due riche verticale vanno bene così come stanno.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
La riga orizzontale così come è è al massimo della larghezza perchè è larga come la pagina se la vuoi più lunga nei due sensi bisogna allargare la pagina. Ma non capisco perchè dovrebbe essere più larga della pagina
 
  • Like
Reactions: paperinik4

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Ah non pensavo che fosse al massimo della larghezza (ecco perchè la volevo più lunga( adesso ho capito il motivo. Non ho idea di come si possa vedere su un monitor a 22" ma lo scoprirò giovedì quando ritorno a roma. Una curiosita. Il tag <hr> arriva come dico io e va oltre alla larghezza della pagina ???? Comunque grazie della mano.
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Allora ho modificato un pò le cose e posso mostrare quello che ho fatto. Questo è il codice:

PHP:
<style type="text/css">
/***********************************************************************
* Elementi generali
**********************************************************************/

body {
    background-color: #333;
    color: #FFF;
    font-family: Comic Sans MS, Serif;
    font-size: 20px;
    margin-top: 120px; /* Deve essere maggiore o uguale al margine inferiore di .intestazione */
}

/* Aggiunto a scopo decorativo */
form {
    max-width: 1280px;
    margin: auto;
    padding: 0.25em;
    border: 2px double #CCC;
}

label {
    display: block;
    margin: 0.5em 0;
}



/***********************************************************************
* Classi
**********************************************************************/

/* Un elemento di questa classe è centrato orizzontalmente all'interno del
* blocco a cui appartiene. */
.centering {
    display: block;
    margin: auto;
}

/* Un elemtno di questa classe è allineato a sinsitra */
.float_left {
    display: block;
    float: left;
}

.intestazione {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    left: 0px;
    font-family: Comic Sans MS, Serif;
    text-align: center;
    border-bottom: 2px inset #CCC;
}
#header {
    width: 980px;
    margin: 0auto;
}
#col1, #col2 {
    width: auto;
    height: auto;
    float: left;
    margin: 0;
    padding: 30px 30px 0 30px;
    /*border: 0;*/
}
#col1 {
    padding: 30px 30px 0 0;
    width: 265px;
}
.clear {
    clear: both;
}
#cont1, #cont2, #cont3 {
    float: left;
    width: 265px;
    height: 1000px;
    margin: 0;
    padding: 30px 30px 0 30px;
}
#cont1, #cont2 {
    border-right: #ffffff 2px solid;
}
hr {
    margin: 0;
    padding: 0;
}
         </style>

Questo è il risultato. Dove stanno gli spazi vuoti, dovrebbero andare le righe.l Si potrebbe modificare su questo codice che ti ho postato ???? Io non ci sono riuscito. Questa è l'immagine. Grazie.
 

Allegati

  • modificato l'intestazione e colonne.PNG
    modificato l'intestazione e colonne.PNG
    34,7 KB · Visite: 348

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Se ci dai solo il css non andimo molto lontano ci devi dare il codice di tutta la pagina css+html o un link come ho fatto io
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Ciao Max1,

Come promesso t'invio l'intero codice.
Codice:
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Divisione a tre colonne</title>
        <style type="text/css">
/***********************************************************************
* Elementi generali
**********************************************************************/

body {
    background-color: #333;
    color: #FFF;
    font-family: Comic Sans MS, Serif;
    font-size: 20px;
    margin-top: 120px; /* Deve essere maggiore o uguale al margine inferiore di .intestazione */
}

/* Aggiunto a scopo decorativo */
form {
    max-width: 1280px;
    margin: auto;
    padding: 0.25em;
    border: 2px double #CCC;
}

label {
    display: block;
    margin: 0.5em 0;
}



/***********************************************************************
* Classi
**********************************************************************/

/* Un elemento di questa classe è centrato orizzontalmente all'interno del
* blocco a cui appartiene. */
.centering {
    display: block;
    margin: auto;
}

/* Un elemtno di questa classe è allineato a sinsitra */
.float_left {
    display: block;
    float: left;
}

.intestazione {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    left: 0px;
    font-family: Comic Sans MS, Serif;
    text-align: center;
    border-bottom: 2px inset #CCC;
}
#header {
    width: 980px;
    margin: 0auto;
}
#col1, #col2 {
    width: auto;
    height: auto;
    float: left;
    margin: 0;
    padding: 30px 30px 0 30px;
    /*border: 0;*/
}
#col1 {
    padding: 30px 30px 0 0;
    width: 265px;
}
.clear {
    clear: both;
}
#cont1, #cont2, #cont3 {
    float: left;
    width: 265px;
    height: 1000px;
    margin: 0;
    padding: 30px 30px 0 30px;
}
#cont1, #cont2 {
    border-right: #ffffff 2px solid;
}
hr {
    margin: 0;
    padding: 0;
}
         </style>
    </head>
    <body>
        <div class="intestazione">
            <div class="float_left">
                <?php require_once "data.php"; ?>
                <hr >
            </div>
           
          <h1>BENVENUTI NEL MODULO D'ISCRIZIONE</h1>
          <hr>
        </div>
<div class="clear"></div>
</div>
<div id="content">
  <div id="cont1">Inserite qui il contenuto per "cont1"</div>
  <div id="cont2">Inserite qui il contenuto per "cont2"</div>
  <div id="cont3">Inserite qui il contenuto per "cont3"</div>
</div>
  <div class="clear"></div>
        <?php
       echo"</hr>";
        ?>
    </body>
   
   
</html>

Questo è tutto. Grazie anticipatamente.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Ti riferisci agli spazi tra le verticali e l'orrizzontale? Ne hai aggiunta una hai aggiunto position fixed hai aggiunto display block tutte cose che influiscono e rendono complicato togliere spazi qui e la. Non capisco l'aggiunta di certe regole css in uno schema così semplice. Non capisco perchè si deve aggiungere un hr con php
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Allora ricapitoliamo per bene. Sulla riga orizzontale che ho fatto con il tag hr ci sono dei segni blu, come avrai potuto vedere dall'immagine che ti ho inviato. Ho preferito farlo con questo tag perchè mi prende tutta la larghezza come la voglio io da sx verso dx e con il border non mi piaceva molto la visuale. Inoltre mi hai detto che non va fuori misura. Gli altri codici in css servono per altre cose perchè poi c'è un form. Ma questo mi serve per le pagine riservate e non per l'iscrizione. I punt segnati servono per indicare che da quel punto deve partire una linea in verticale attaccata alla linea orizzontale stessa cosa sul mkargine dx. Infine, se io non mettessi in finale sotto php la chiusura del tag hr e la mettessi in html, il risultato sarebbe di una doppia linea. Non so per quale motivo. Pensi di poter riuscire a fare queste piccole modifice ??? O sennò mi puoi spiegare come si allargano e si stringono le righe in modo tale che ci posso provare io. Come preferisci. Ho fatto alcune prove modificando il padding ma il risultato un casino totale.
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
C Dopo chiusura del tag php la stringa html va a capo PHP 1
A inserire variabile php colore in div html PHP 2
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Z Mod_rewrite da HTML in PHP PHP 3
C [RISOLTO]Inserimento variabile php in input html PHP 20
C Risalire al php da html PHP 27
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
F [PHP] Form html PHP 2
G FORM HTML E PHP PHP 0
F [PHP] [HTML] Tabella cambia pagina responsive PHP 8
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
M [PHP] Istruzione "echo" all'interno di codice html PHP 2
F [PHP] Importare file CSV in HTML PHP 12
T [PHP] [HTML] Dettagli che cambiano PHP 5
M [PHP] Come inserire codice html in un ciclo while PHP 2
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
F [PHP] [HTML] Formmail PHP 0
ANDREA20 [PHP] [HTML] crea form di contatto PHP 4
D [PHP] [HTML] Pagina con permessi amministratore PHP 6
L [Wordpress]Precedenza Index.php a Index.html WordPress 1
Angelo Russo [PHP] [HTML] form contatti PHP 0
F [PHP] Importare file CSV in HTML PHP 3
C [PHP] Pagina html che legge file txt PHP 41
GiErre [PHP] [HTML] Disabilitare un link in funzione della piattaforma PHP 7
Y [PHP] [HTML] Modificare i quadranti PHP 1
F [PHP] [HTML] File legato ad action in un form PHP 1
T [PHP] [HTML] Action direttamente associate a onmouseover PHP 11
A [PHP] Inserimento url dinamici in pagina html PHP 3
Y [PHP] [HTML] Pagina referenti PHP 5
trattorino [PHP] [HTML] redirect iniezione su firefox PHP 5
D Come intrecciare PHP all'HTML PHP 1
S [PHP] [HTML] Come creare un grafico dinamico PHP 4
A [Retribuito][Offro] Restyling grafico portale PHP/HTML Offerte e Richieste di Lavoro e/o Collaborazione 0
andreas88 [PHP] [HTML] Pagina preventivi form contatti PHP 5
A [PHP] Formattazione Mail HTML HTML e CSS 5
J [PHP] [HTML] Trasferire dati da un form ad un dominio diverso. PHP 3
D [PHP] [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe PHP 0
R [PHP] Problema stampa array bidimensionali con formula $html.=<<<myHtml... PHP 2
M [wordpress-galleria immagini]Inserire classe php in html PHP 0
F [PHP] [HTML] Redirect Complicato PHP 5
V Passare a PHP pagina bootstrap creata in HTML PHP 1
Y Performance html/php vs php/html PHP 2
Shyson [HTML] Spostare a sinistra codice php PHP 6
trattorino [PHP] [HTML] problema form PHP 1
G [PHP] [HTML] Sito web URL e altro PHP 3
G Siti web URL e altro (PHP, HTML) Presentati al Forum 1

Discussioni simili