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.
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
24
Roma
alessandro1997.netsons.org
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.
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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:

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
24
Roma
alessandro1997.netsons.org
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
Autore Titolo Forum Risposte Data
P [HTML] [PHP] dividere lo schermo in tre colonne HTML e CSS 110
P Dividere lo schermo in tre colonne HTML e CSS 1
camilia Come posso dividere le grandi dimensioni del file PST? Windows e Software 2
gandalf1959 [PHP] Dividere un campo di testo in più campi PHP 9
L [WordPress] Dividere articoli in più pagine, problemi SEO? WordPress 2
M Dividere immagine a metà in diagonale Photoshop 1
M Dividere risultati in colonna in base al contenuto PHP 9
alankanz dividere risultati in pagine MySqli PHP 4
Z Dividere settimane PHP 3
M Dividere su piu pagine un articolo lungo prelevato da db. jQuery 0
L Dividere risultati per data e pagine diverse PHP 17
G Dividere stringa ed eseguire query PHP 3
L Dividere classe in più parti PHP 3
S Dividere una textarea PHP 1
A Dividere array multidimensionale in altri array multidimensionali PHP 9
A dividere il risultato di una Query in più pagine Classic ASP 1
redevilduil dividere la gallery in pagine con php PHP 3
C Dividere un div in due colonne Javascript 2
U E' possibile dividere un' immagine o un background in celle? jQuery 0
M Dividere Stringhe per MySQL PHP 6
E e se volessi dividere le mie pagine? PHP 2
renoir09 software dividere sql su mac Database 1
haringk Dividere ciclo in più parti PHP 12
C dividere un'immagine in più parti Webdesign e Grafica 3
L Dividere campo PHP 2
S dividere un wmv con movie maker Windows e Software 0
A dividere dato 32 bit in 4 byte Programmazione 2
B dividere Home Page in 5 sezioni con CSS HTML e CSS 1
metalgemini dividere in piu colonne il risultato di una query Classic ASP 4
G come dividere la pagina in 2 frame??!! HTML e CSS 5
M Come si fa a dividere un documento in più colonne in dreamweaver Flash 0
S Navbar fuori schermo mobile in versione desktop HTML e CSS 2
L Iframe a schermo intero HTML e CSS 0
D Lenovo Schermo nero dopo ram aggiuntiva Hardware 0
L leggere RGB di un pixel dello schermo in java Java 1
L Programma per registrare solo schermo Mac e Software 4
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
C CSS pagina a schermo intero HTML e CSS 3
felino [WordPress] Gallery a tutto schermo per i dispositivi mobile WordPress 1
B App che riconosce output schermo Sviluppo app per iOS 1
jailbait [PHP] Upload immagine e stampa a schermo PHP 0
H Schermo blu. Windows e Software 15
F img bootstrap centrata nello schermo HTML e CSS 1
F background a tutto schermo e bottoni HTML e CSS 5
M Gridview: altezza celle adattabile allo schermo Sviluppo app per Android 3
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1
T Apertura pagina a centro dello schermo e con dimensioni fisse Classic ASP 1
C Ruotazione schermo testo non si allarga HTML e CSS 0
C testo che si ingrandisce assieme allo schermo HTML e CSS 3
C Immagine che si ridimensiona assieme allo schermo HTML e CSS 1

Discussioni simili