Punto informatico Network
Login Esegui login | Non sei registrato? Iscriviti ora (è gratuito!)
Username: Password:
  • Annuncio Pubblicitario

Mettere spazio ai lati un sito

Cerchi consigli per migliorare il tuo sito? Vuoi aprire un sito in poco tempo?
Discuti con altri webmaster, chiedi chiarimenti ed opinioni in tutta libertà.
Lo spam verrà cancellato.

Mettere spazio ai lati un sito

Messaggioda Simone_S1994_ASR » ven feb 10, 2012 4:12 pm

Vorrei aggiungere una pagina al mio sito e vorrei mettere dello spazio sui lati che codice dovrei mettere?
la pagina vorrei farla in html.
volevo vedere se c'era già un tutorial da qualche parte ma non sapevo cercare .-.
Avatar utente
Simone_S1994_ASR
Aficionado
Aficionado
 
Messaggi: 86
Iscritto il: gio apr 08, 2010 6:45 pm

Re: Mettere spazio ai lati un sito

Messaggioda Andy94 » ven feb 10, 2012 4:32 pm

Dipende dalla struttura della tua pagina HTML.
Generalmente sarebbe sufficiente far sì che il body abbia una larghezza definita e i margini destro e sinistro siano impostati su auto (tutto tramite i fogli di stile), tuttavia bisogna vedere come questa pagina è strutturata.
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Mettere spazio ai lati un sito

Messaggioda Simone_S1994_ASR » ven feb 10, 2012 4:45 pm

ehm.. vorrei fare una pagina semplice, per ora la pagina neanche esiste! come dovrei impostare la larghezza del body?
Avatar utente
Simone_S1994_ASR
Aficionado
Aficionado
 
Messaggi: 86
Iscritto il: gio apr 08, 2010 6:45 pm


Re: Mettere spazio ai lati un sito

Messaggioda Andy94 » ven feb 10, 2012 4:52 pm

Tramite i fogli di stile. Tu puoi inserire nella tua pagina HTML qualcosa di simile:
Codice: Seleziona tutto
<style type="text/css">
   body {
      width: 80%;
      margin: 0px auto;
   }
</style>

In questo modo il contenuto della pagina occuperà l'80% del monitor in larghezza (prima regola) e lo spazio ai lati sarà equamente distribuito (seconda direttiva).
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Mettere spazio ai lati un sito

Messaggioda Simone_S1994_ASR » ven feb 10, 2012 7:48 pm

Grazie, proverò al più presto :)
Avatar utente
Simone_S1994_ASR
Aficionado
Aficionado
 
Messaggi: 86
Iscritto il: gio apr 08, 2010 6:45 pm

Re: Mettere spazio ai lati un sito

Messaggioda Simone_S1994_ASR » sab feb 11, 2012 2:28 am

Va bene è più o meno quello che voglio.. Solo che non si protebbe fare in modo che lo spazio a destra e sinistra sia fisso? perché con questo codice me lo ridimensiona se dimunuisco la grandezza della finestra del browser
Avatar utente
Simone_S1994_ASR
Aficionado
Aficionado
 
Messaggi: 86
Iscritto il: gio apr 08, 2010 6:45 pm

Re: Mettere spazio ai lati un sito

Messaggioda Andy94 » sab feb 11, 2012 7:07 am

Basta cambiare "80%" e "auto" con dei valori stabiliti in pixel ma tieni conto che, così facendo, la pagina si vedrà correttamente solamente con la tua risoluzione.

La cosa migliore sarebbe impostare una larghezza fissa (in pixel) per il body e lasciare che i margini bianchi siano autogestiti (con "auto").
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Mettere spazio ai lati un sito

Messaggioda Simone_S1994_ASR » sab feb 11, 2012 12:48 pm

Ok grazie! Credo di esserci riuscito ^^
Avatar utente
Simone_S1994_ASR
Aficionado
Aficionado
 
Messaggi: 86
Iscritto il: gio apr 08, 2010 6:45 pm

Re: Mettere spazio ai lati un sito

Messaggioda Andy94 » sab feb 11, 2012 2:23 pm

Bene. [^]
Avatar utente
Andy94
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 9998
Iscritto il: lun apr 09, 2007 8:39 pm

Re: Mettere spazio ai lati un sito

Messaggioda Simone_S1994_ASR » mar ago 21, 2012 1:24 am

Scusate se riapro la discussione.. Ma vorrei provare a mettere due strisce colorate ai lati della pagina..
In pratica il sito al centro, con per esempio l'80% della larghezza e un certo colore, e sui lati, con il 10% e il 10%, un altro colore. Si può fare? Come?
Avatar utente
Simone_S1994_ASR
Aficionado
Aficionado
 
Messaggi: 86
Iscritto il: gio apr 08, 2010 6:45 pm

Re: Mettere spazio ai lati un sito

Messaggioda Ginho » gio ago 23, 2012 8:16 pm

Se ho capito bene, devi usare la proprietà float, che in pratica toglie dal normale flusso della pagina le tue sidebar di sinistra e di destra.

Ecco la struttura della pagina (HTML)...

Codice: Seleziona tutto
<html>
<head>
       <title>Pagina con sidebar laterali</title>
</head>
<body>
     <div id="Left_Sidebar">
            <!-- Contenuto della sidebar -->
     </div>

     <div id="Right_Sidebar">
            <!-- Contenuto della sidebar -->
     </div>
     
     <div id="main">
            <!-- Contenuto della pagina -->
     </div>
</body>
</html>


...con un po' di stile (CSS):

Codice: Seleziona tutto
#Left_Sidebar {
       float:left;
       width:10%;
      margin:auto;
}

#main {
      width: 80%;
      margin: auto; /* Così da centrare il contenuto
}

#Right_Sidebar {
       float:right;
       width:10%;
       margin:auto;
}


Però sorge un problema nel caso tu volessi inserirci il footer, infatti non verrà posizionato correttamente per il fatto che le sidebar non fanno più parte del flusso normale degli altri elementi.
Per ovviare a ciò devi usare la proprietà clear, che può avere come valore:

- none,
- left,
- right,
- both.

In questo caso si usa both, perché siamo in presenza di due contenuti "flottati", sia a destra che a sinistra.

Ecco come fare:
crei un div vuoto, esattamente dopo il contenuto principale, e gli dai (per es.) both come classe.

Codice: Seleziona tutto
<div class="both"></div>


e gli dai questo stile:

Codice: Seleziona tutto
.both {
      clear:both;
}



In questo modo il footer viene posizionato correttamente sotto #main. Infatti viene forzato grazie a clear.

[ciao]
App: https://play.google.com/store/apps/details?id=it.economiasprint
Avatar utente
Ginho
Silver Member
Silver Member
 
Messaggi: 1344
Iscritto il: gio lug 21, 2011 12:28 pm
Località: Ferrara


Torna a Sviluppo Web

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti

cron
Powered by phpBB © 2002, 2005, 2007, 2008 phpBB Group
Traduzione Italiana phpBB.it

megalab.it: testata telematica quotidiana registrata al Tribunale di Cosenza n. 22/09 del 13.08.2009, editore Master New Media S.r.l.; © Copyright 2008 Master New Media S.r.l. a socio unico - P.I. 02947530784. GRUPPO EDIZIONI MASTER Spa Tutti i diritti sono riservati. Per la pubblicità: Master Advertising