Il modo migliore per implementare un sito Web a 3 colonne utilizzando i tag <DIV>?[Chiuso]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

Domanda

Sto sviluppando un sito Web a 3 colonne utilizzando un layout come questo:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

Ma, considerando la proprietà "position" CSS predefinita di <DIV>'s è 'statico', mio <DIV>'s sono stati mostrati uno sotto l'altro, come previsto.

Quindi ho impostato la proprietà CSS "position" su "relative" e ho modificato la proprietà "top" di "middle" e "right" <DIV>'s a -(meno) l'altezza del precedente <DIV>.Ha funzionato bene, ma questo approccio mi ha portato due problemi:

1) Anche se Internet Explorer 7 mostra correttamente tre colonne, mantiene comunque la barra di scorrimento verticale come se fosse <DIV>'s sono stati posizionati uno sotto l'altro e al termine del contenuto rimane molto spazio bianco.Mi piacerebbe averlo.

2) L'altezza di questi elementi è variabile, quindi non so davvero quale valore impostare per ciascuno <DIV>la proprietà "superiore" di;e non vorrei codificarlo.

Quindi la mia domanda è: quale sarebbe il modo migliore (semplice + elegante) per implementare questo layout?Vorrei evitare il posizionamento assoluto e mantenere il mio design senza tabella.

È stato utile?

Soluzione

Se non hai già effettuato il check-out Una lista a parte dovresti, poiché contiene alcuni tutorial e linee guida eccellenti per la progettazione di siti Web.

Questo articolo in particolare dovrebbe aiutarti.

Altri suggerimenti

Dare BluePrint CSS un tentativo.È davvero semplice iniziare, ma abbastanza potente per la maggior parte delle applicazioni.

Tutorial ed esempi di facile comprensione.Ha una libreria tipografica che produce risultati decenti immediatamente.

Di gran lunga il modo più semplice che ho trovato per fare 3 colonne (o qualsiasi altro numero di colonne divise nello spazio disponibile in modi strani) è Griglie YUI.C'è un Costruttore di griglie YUI per darti il ​​layout di base.Quanto segue ti fornirà un layout di base a 3 colonne largo 750 px (diviso in 1/3 1/3 1/3) con una barra laterale sinistra di 160 px.Cambiarlo in altre larghezze, configurazioni della barra laterale e suddivisioni delle colonne è davvero semplice.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

Ci sono un certo numero di esempi e librerie là fuori in cui puoi cercare: un paio sono già elencati (A List Apart è assolutamente da leggere).

Ho usato il Libreria dell'interfaccia utente di Yahoo (YUI) sui miei ultimi due siti e mi piace molto.Yahoo lo supporta completamente ed è veloce da comprendere e utilizzare.Ecco lì CSS per le griglie, che ti consente di formattare la tua pagina in tutte le colonne e sezioni che desideri.

YUI è utile perché non devi reinventare la ruota per le fondamenta del tuo sito e fanno tutto il lavoro per assicurarsi che le loro basi funzionino su tutti i browser.E soprattutto, è gratuito.

mi piace Sistema a griglia 960.È un CSS leggero e facile da usare che divide lo schermo in 12 (o 16) colonne.Puoi usarlo per un design a 3 colonne e allineare di conseguenza il resto dei tuoi contenuti.

Prova a far fluttuare i div a sinistra, questo li manterrà tutti sulla stessa linea, supponendo che ci sia abbastanza spazio.

Per le colonne fisse, basta impostare l'altezza:xxxpx per renderle uguali.

Usa questo Generatore di layout a 3 colonne provare.

Questo codice funziona sul mio computer con IE 8, Chrome, Firefox. 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

Innanzitutto, il posizionamento relativo fa ciò che hai descritto:riserva spazio nella posizione originale ma visualizza l'offset DIV di un certo importo.

Se si spostano i DIV, questi verranno impilati da sinistra a destra, ma ciò può causare problemi.

Un layout a tre colonne che utilizza i CSS è piuttosto difficile.Dai un'occhiata a [http://www.glish.com/css/7.asp]

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top