[HTML] [PHP] dividere lo schermo in tre colonne
- Creatore Discussione paperinik4
- Data di inizio
Grazie a voiSalve 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
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
No! È stata ottenuta con border
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.
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
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;
Codice:
padding: 30px 30px 0 30px;
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.
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
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.
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
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.
Allora ho modificato un pò le cose e posso mostrare quello che ho fatto. Questo è il codice:
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.
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
Ah ok scusa domani posto tutto. Purtroppo non ho un link. Pensavo che bastasse dolo il CSS. Perdono. Appena sto al pc invio. A domani. Buona notte e grazie.
Ciao Max1,
Come promesso t'invio l'intero codice.
Questo è tutto. Grazie anticipatamente.
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.
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
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
