3 colonne liquide

[Quinn]

sto usando un layout a 3 colonne liquide trovato qui su html.it

div#container{width:100%; margin:auto; background-color:#FFFFFF}
div#wrapper{float:left;width:100%}
div#content{margin: 0 23%}
div#rightside{float:left;width:23%;margin-left:-23%;}
div#leftside{float:left;width:23%;margin-left:-100%;}
div#footer{clear:left;width:100%}

ora con firefox se inserisco un immagine nelle colonne piu piccole quando rimpicciolisco la finestra non ci sono particolare problemi, ottengo che l'immagine esce un po dal divisore che la contiene.
IE invece manda tutti e due i div laterali a capo sotto quello centrale! :master:
non lo avrei immaginato quando ho pensato di usare il layout proposto e quindi mi limita non poco...è possibile risolvere?
in ogni caso nella guida dei css 3 colonne fluidi credo questo dettaglio andrebbe inserito

ps:il layout era uno di questi
http://pro.html.it/articoli/id_682/i...pag_3/pag.html

[Quinn]

uppettino

[Mich_]

Non capisco tutti quei margini. Il float gia` fa sistemare correttamente i blocchi.

Avendo un HTML di questo tipo:

<div id="wrapper"> ... </div>
<div id="container">
  <div id="leftside"> ... </div>
  <div id="content"> ... </div>
  <div id="rightside"> ... </div>
</div>
<div id="footer" ...</div>

Il CSS per sistemare il tutto potrebbe essere:

#wrapper {
  width: 100%;
}
#container {
  width: 100%;
}
#leftside {
  width: 23%;
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
}
#content {
  width: 53%; /* anche meno se ci sono bordi o padding */
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
}
#rightside {
  width: 23%;
  float: left; /* puo` stare anche right */
  margin: 0;
  padding: 0;
  border: 0;
}
#footer {
  width: 100%;
  clear: both;
}

[Quinn]

grazie della dritta purtroppo ormai tutte le mie pagine hanno quella logica per i div
pensi sia possibile eliminare questo bug visibile qui:

http://www.terrenobili.net/rixxolo/index-bis.php

su IE?
(riducendo troppo si sovrappongono le colonne)
agendo solo sul css?

[Mich_]

E` difficile sistemare il CSS se il codice HTML e` scritto male.

Comunque nel tuo codice ci sono diversi problemi.
1.
<div id="separetor"></div>
In questo caso il browser e` legittimato a non visualizzare per nulla il <div>, dato che non contiene nulla. Quindi anche il CSS relativo viene ignorato.
In un oggetto ci deve essere almeno un carattere bianco o un'immagine

2.
<div id="separetor"></div>
Perche` id= ?
Dato che e` un oggetto comune (dato il nome ce ne possono essere piu` d'uno) e` meglio usare una classe anziche` un id.

3.


Top Ten Lyrics:</p>


All Tired Horses</p>


Alberta 1#</p>
...
Perche` usare i

per una lista? Il marcatore corretto e`[*] inserito in un <ul>

4.
Perche` usi HTML 4?
Dato che fai una cosa nuova, ti conviene usare XHTML 1 Strict: il codice sara` molto piu` robusto, e sara` visibile su molti telefonini e altri sistemi "leggeri" anche in futuro.
Non mi pare che ti manchino le conoscenze o la tecnica per realizzare con i sistemi migliori.

[av250866]

nel codice che hai trovato su HTML.it c'è un </div> di troppo (fai un controllo tra aperture e chiusure dei div).
io l'ho tolto e funziona tutto bene.

[Quinn]

Originariamente inviato da av250866
nel codice che hai trovato su HTML.it c'è un </div> di troppo (fai un controllo tra aperture e chiusure dei div).
io l'ho tolto e funziona tutto bene.

devo averlo già tolto,comunque è un altro tipo di errore credo grazie cmq

[Quinn]

Ciao grazie dei consigli e ne farò tesoro!
in dettaglio:

1.
<div id="separetor"></div>
In questo caso il browser e` legittimato a non visualizzare per nulla il <div>, dato che non contiene nulla. Quindi anche il CSS relativo viene ignorato.
In un oggetto ci deve essere almeno un carattere bianco o un'immagine

in realtà si vede comunque, perchè dici che è legittimato ad ignorarlo? comunque per carattere bianco intendi uno spazio?

3.


Top Ten Lyrics:</p>


All Tired Horses</p>


Alberta 1#</p>
...
Perche` usare i

per una lista? Il marcatore corretto e`[*] inserito in un <ul>

VVoVe: cado proprio dalle nuvole!
li ho usati spesso e qui non mi sono nemmeno posto il problema!, ora correggo subito anche se dovrò lavorarmi un sacco di pagine

4.
Perche` usi HTML 4?
Dato che fai una cosa nuova, ti conviene usare XHTML 1 Strict: il codice sara` molto piu` robusto, e sara` visibile su molti telefonini e altri sistemi "leggeri" anche in futuro.
Non mi pare che ti manchino le conoscenze o la tecnica per realizzare con i sistemi migliori.

in realtà avevo già pensato di validarlo, ma non era tra le mie priorità e ho inserito quella di default del mio editor.
Provvederò dopo avere completato tutta la gestione server,alla fine. Ora che me lo fai notare comunque vedo che ho pochissimi errori di validazione.
La mia grammatica è a un buon livello quindi

pser quanto riguarda l'errore nel code, come dicevo è un esempio di html.it, pensavo fosse un buon esempio
pps:se avrò tempo modificherò anche quello, visto che il mio obbiettivo è creare una piattaforma elaborata ma molto stabile.(ma non è che il tuo metodo fa la stessa cosa del mio su IE? ovvero che se cè un immagine o una lunghezza settata nelle colonne se resizzi piu dell'immagine va a capo?
se hai anche altri consigli sono tutti strabene accetti

[Quinn]

uppettino
e nuovo link:
www.soundandfreedom.com

[Mich_]

Originariamente inviato da Quinn
Ciao grazie dei consigli e ne farò tesoro!

Vedo che sei gia` passato a XHTML Strict. Complimenti.

Non vale la pena scrivere in modo "approssimato": e poi correggere: in qualche caso ti trovi a dover rifare il lavoro piu` volte.
Ti consiglio di fare le validazioni (HTML, CSS, accessibilita`, ...) mano a mano.

in realtà si vede comunque, perchè dici che è legittimato ad ignorarlo? comunque per carattere bianco intendi uno spazio?

Anche uno spazio e` sufficiente. Carattere bianco puo` essere uno spazio, un tab, un acapo, ...

Il fatto che nel tuo browser specifico una cosa funzioni (per caso o per errore), non vuol dire che funziona dappertutto.
Nel caso del tuo separitore <div id="separetor"> </div> magari quel separitore contiene un clear; quindi saltare il separatore, ti fa sballare tutto l'allinemanento.

VVoVe: cado proprio dalle nuvole!
li ho usati spesso e qui non mi sono nemmeno posto il problema!, ora correggo subito anche se dovrò lavorarmi un sacco di pagine

I tag HTML hanno un loro significato semantico: cioe` il tag stesso descrive il tipo di contenuto. Se per un utente "normale" questo non ha un grande effetto, lo puo` avere per un utente che non vede la pagina allo stesso modo: un cieco (che si fa leggere la pagina da uno screen-reader) o comunque una persona che accede con uno strumento diverso dal solito browser deve sapere in anticipo se la cosa gli interessa o se puo` ignorarla.
Il caso piu` eclatante e` la tabella: deve essere usata per intabellare dei dati, non per formattare la pagina: non e` molto utile sentisi leggere: "tabella di una riga e tre colonne. Colonna uno: (niente). Colonna due: tabella di una riga e una colonna. Colonna uno: link: ecc."

in realtà avevo già pensato di validarlo, ma non era tra le mie priorità e ho inserito quella di default del mio editor.
Provvederò dopo avere completato tutta la gestione server,alla fine. Ora che me lo fai notare comunque vedo che ho pochissimi errori di validazione.
La mia grammatica è a un buon livello quindi

E` per quello che ti ho consigliato di passare a XHTML: avevo notato che non eri molto lontano. Quando si vedono codici "spaghetti" (come li chiamano gli americani) non ha senso dare certi consigli.

pser quanto riguarda l'errore nel code, come dicevo è un esempio di html.it, pensavo fosse un buon esempio

Purtroppo HTML ha delle parti un po' vecchie. Cose che erano buone tre anni fa, non lo sono piu`, alla luce dei nuovi sviluppi del linguaggio.
Sarebbe bello poter aggiornare tutto subito, ma la cosa costerebbe un mucchio di lavoro, e non credo che gli editori possano investire molto in questo.
Noi forumisti facciamo il possibile; cerchiamo di educare alle nuove tecnologie (specie in forum come questo), ogni tanto segnaliamo qualcosa, ma non possiamo sostituirci agli editori (siamo tutti volontari).