codice per 3 colonne non mi funziona

**Dave1979** · 16-09-2016, 22:40

Sto studiando i css e come fare i layout con 3 colonne.
Ho copiato questo codice da un esempio che ho trovato su un sito

codice:

<head>
    <title> Pagina di prova </title>
</head>

<style> type=css
#primary {
    float: left:;
    width:25%;
}


#content {
    float:left;
    width:50%;
}


#secondary {
    float:left;
    width:25%;
}


#footer {
    clear:both;
}


</style>




<body>
<div id="header">
    <p>Header</p>
</div>


<div id="primary">
    <p>Primary Sidebar</p>
</div>
    
<div id="content">
    <p>Main content</p>
</div>
    
<div id="secondary">
    <p>Seconday Sidebar</p>
</div>
    
<div id="footer">
    <p>Footer</p>
</div>

</body>

Dovrebbero comparire 3 colonne,ma mi compaiono 2 colonne,e la seconda colonna non è nemmeno allineata.

Il mio browser è chrome.L'esempio è a 3 colonne ma non riesco ad allinearne nemmeno 2.

**KillerWorm** · 16-09-2016, 23:51

Ci sono alcuni errori di sintassi su quel codice. Correggendoli dovrebbe funzionare. Per il momento voglio giusto consigliarti di ricontrollare meglio il tutto, dovresti poterli individuare tu stesso. Potrebbe esserti d'aiuto un validatore (vedi qui).

Ti consiglio inoltre di dare uno sguardo tra i link utili (post in evidenza). Puoi trovare diverse guide e riferimenti per realizzare dei layout (vedi capitolo 9) e molto altro materiale e strumenti per poter lavorare col CSS.

[Mod]
Quando si posta del codice sul forum è opportuno utilizzare gli appositi tag di formattazione [CODE] (vedi regolamento di sezione), Grazie. Per ora ho sistemato io.

**Dave1979** · 17-09-2016, 16:08

Grazie per i tag code.

Adesso il validatore non mi da errori,solo un warning riguardo lang,
ma le due liste rimangono non allineate,sono si una destra e una sinistra,ma una sopra e l'altra sotto quando finisce la prima.

Se la pagina corretta doveva funzionare,continuo ad avere il dubbio che sia il browser.
Non riesco a capire dove sia l'errore,ho applicato quello che ho capito nel modo piu' semplice possibile.

Il codice adesso è questo

codice:

<!DOCTYPE html>
<html>
<head>
    <title> Pagina di prova </title>

<style> type=css
.sinistra{ float: left; width: 33%; }
.destra{ float: right; width: 33%; }
</style>


</head>


<body>
<div id=1 class=sinistra>
    <ul>
        <li>elemento lista </li>
        <li>elemento lista </li>    
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
    </ul>
</div>


<div id=2 class=destra>    
    <ul>
        <li>elemento lista </li>
        <li>elemento lista </li>    
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
        <li>elemento lista </li>
    </ul>
</div>


</body>
</html>

**KillerWorm** · 17-09-2016, 18:02

Ho visto, c'è ancora qualche errore anche se il validatore non lo segnala. Anzi, in particolare ci sono diversi errori e omissioni che, incastrandosi assieme, innescano il malfunzionamento. Insomma è un groviglio di cose.

Cerchiamo di sbrogliare la situazione.
Prima di tutto, sebbene sia permesso definire il valore degli attributi senza usare gli apici (o doppi apici) è sempre meglio usarli. Questo è uno di quei casi particolari per cui, per un incastro di cose, questa omissione fa saltare la regolare interpretazione del codice.

Errore 1.a:

Oltre ad aver omesso gli apici, hai mancato il bersaglio nel definire l'attributo type. Chiaramente va messo all'interno della definizione del tag stesso, non dopo.
Questo particolare errore innesca un secondo errore di sintassi del CSS-
Prova a passare il codice (tutto ciò che hai scritto all'interno del tag <style>) nel validatore per CSS

codice:

type=css
.sinistra{ float: left; width: 33%; }
.destra{ float: right; width: 33%; }

In questo caso salta fuori l'errore che viene segnalato dal validatore. Di fatto è come se tu avessi definito questa regola CSS

codice:

type=css .sinistra{ float: left; width: 33%; }

che ovviamente non viene interpretata dal browser, ma viene letteralmente saltata.
Quel float quindi non viene letto.

Errore 1.b:
Come appena indicato, dovrai definire correttamente l'attributo type. Se leggi la pagina linkata puoi notare che il valore che hai inserito è comunque sbagliato. La definizione corretta è questa:

codice:

<style type="text/css">

Puoi leggere inoltre che per HTML 5 è possibile anche omettere questo attributo che prenderà comunque quel valore di default.

Per cui, anche se tu definissi quell'attributo all'interno del tag ma usando quel valore sbagliato, il browser non riuscirebbe ad interpretare e, credo, salterebbe l'intero blocco <style>.

Errore 2:

codice:

<div id=1 class=sinistra>

<div id=2 class=destra>

I nomi degli attributi id e class, non possono iniziare con valori numerici. Ora, in questo caso tu non hai usato quegli id sul CSS, cioè non hai definito #1 o #2 come selettori per quegli elementi, ma nel caso lo avessi fatto, non avrebbe funzionato, proprio per il motivo appena detto. Se proprio ti serve usare dei valori numerici per definire id o classi, questi devono essere preceduti da una lettera (id="a1", id="div1", id="elemento2") o un underscore (id="_1", id="_1_2").

Prova a correggere queste cose, la situazione dovrebbe migliorare.

**Dave1979** · 18-09-2016, 01:35

grazie molte adesso funziona.Sono saltati fuori altri problemi ma indaghero' da solo prima di richiedere.

Discussione: codice per 3 colonne non mi funziona

Strumenti discussione

Ricerca discussione

Visualizza

codice per 3 colonne non mi funziona

Permessi di invio