Dividere lo schermo in tre colonne

paperinik4

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

Avrei bisogno i dun piccolo aiuto. Non sono molto pratico coni css enon sono riuscito a trova u esempio buono su internet. Quindi mi rivolgo a voi, sperando che mi sappiate aiutare. Vorrei dividere lo schermo in tre colonne in questa maniera qua:

1) Una riga in verticale a sinistra

2) Una parte di schermo vuoto

3) Una riga al margine destro del monitor

Avete presente più o meno com'è strutturato fb ?? Ecco diviso in quella maniera. Ovviamente non credo di violare i diritti di autore (copywirete spero...). per quanto riguarda la riga orizzontale sono riuscito a metterla da solo. Ma il resto nada. Mi potete per favore aiutare ?? Vi mostro uno spezzone di codice della riga orizzontale che ho fatto e vi mando uno screenshots per avere le idee più chiare. Grazie.

PHP:
 <style type="text/css">
    li
{
    display: Inline;
    }
    </style>
    <div align ="center">
 <div id="menu">
     <ul> <h1>
  <li><a href="index.php" id="evidenziato">HomePage</a></li>
<li><a href="info.php">Info</a></li>
<li><a href="iscriviti.php">Iscriviti</a></li>
<li><a href="regolamento.php">Regolamento</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="contatti.php">Contatti</a></li>
</div> </div> <hr> </ul></h1></hr>

E questa è l'immagine che mi appare.

Come vedete c'è un menu orizzontale con una riga orizzontale, mi servirebbe da piazare una una riga in verticale che parte dall'alto dello schermo fino in basso sul lato sx e stessa cosa per il lato dx., Ovviamente se mi potete dire anche dove devo modificare l'eventuale partenza della riga, ossia se la volessi spostare verso il basso partendo dalla rica in verticale chegià c'è. Dovrei vedere come sta. Spero in una vostra risposta. Grazie.
 
Perché non usi un framework CSS come Bootstrap? Semplifica notevolmente la vita. Per creare un layout a tre colonne basterebbe scrivere:

HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout a 3 colonne</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>

  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span4">
          <p>Colonna 1.</p>
        </div>

        <div class="span4">
          <p>Colonna 2.</p>
        </div>

        <div class="span4">
          <p>Colonna 3.</p>
        </div>
      </div>
    </div>
  </body>
</html>

Usando un framework hai delle fondamenta stabili per costruire il tuo layout.
 
ciao ale

Domanda da ingorante,

Cos'è un framework, dove lo potrei procurare e quale mi consiglieresti ????

perdonami alessandro,


Innanzi tutto solo ora ho visto che mi avevi segnalato il nome di un framework. ma ame serviva visualizzare le righe. Non le scritte.. ossia una riga in verticale partedo da quella che ho fatto orizzontale. Non so se hai visto la foto che ho inviato.
 
Ultima modifica:
Un framework è una libreria di stili CSS che ti permettono di costruire più rapidamente il tuo layout. Forniscono stili di default sia per elementi dell'interfaccia utente (campi di testo, bottoni etc.) che per la griglia. Inoltre spesso mettono a disposizione plugin Javascript che ti consentono di risolvere rapidamente problemi ricorrenti (menù dropdown, gallerie di immagini e così via).

Poiché i framework vengono solitamente sviluppati e distribuiti da grandi start-up o designer professionisti, puoi utilizzarli per creare un sito Web moderno e che segua le pratiche raccomandate.

Io ho sempre lavorato principalmente con Bootstrap, sviluppato da Twitter. È molto completo e fornisce assolutamente tutto quello che ti serve. A te non resta che personalizzarlo secondo le tue necessità. Puoi scaricarlo da qui: http://twitter.github.io/bootstrap/.
 

Discussioni simili