Float, margini e sbordi vari (per esperti)

**pictor** · 19-03-2007, 14:09

Ho un problema bastardissimo che non riesco a risolvere.

Ho un layout liquido con colonna centrale liquida e colonne laterali fisse.
(colonne laterali posizionate assolutamente e quella centrale con i margini uguali alla width delle due di lato)

Nel centro ho delle news (dei div larghi il 47% della colonna centrale) che si dispongono automaticamente tramite un "float:left" (ovviamente verranno 2 news affiancate).

Il problema è che le news mi si buttano tutte a sinistra, verso il bordo sinistro della colonna centrale, e non è possibile assegnargli un margine sinistro per separarle!

Impostando il margine destro questo funziona correttamente, ma col sinistro viene completamente ignorato!!

Che bug può essere?
Io non riesco ad identificarlo!

Voi avete idea?

Aiuto!

Grazie

**Mich_** · 19-03-2007, 15:51

Posta anche i codici HTML e CSS.
Serve anche la DTD (DOCTYPE) che usi e il browser (o i browser) in cui hai testato.

**pictor** · 21-03-2007, 15:08

Allora, ho messo online la pagina risultante che ottengo adesso.
Il doctype è XHTML 1.0 Strict.
Ho provato su Firefox 2.0 e IE6.0.

L'ho sistemata un pò in modo che almeno su IE6.0 si veda decentemente.

Si può vedere qua

Ci sono molti file .css ma quello che importano sono i file 'Stile.css', 'menuv-part2.css' ed eventualmente 'pagine.css'.
Gli altri sono secondari.

La pagina è scritta un pò male.... ma piuttosto i CSS sono un pò confusi.
Ma è il meglio che ho potuto fare come compromesso tra 'tempo impiegato', 'qualità' e 'integrazione con linguaggio server side'.

Come potete vedere, su FireFox le news centrali non si allineano al centro....
Questo perchè sia su Internet Explorer che Firefox non mi prendono il 'margin-left' i div delle novità (dovrebbe essere impostato su .floatNovità in stile.css).

Il mio obbiettivo è disporre su due colonne i box delle news (2 per riga) E mantenerli distanziati tra loro e dal div #content in modo che però si mantenga il "layout fluido" e che si possa garantire almeno una risoluzione di 800x600.

Ho provato di tutto ma non sono riuscito a risolvere questo strano comportamento. Sono 2 settimane che ci sto impazzendo!

Aiutatemi Vi prego!!

**Mich_** · 21-03-2007, 16:13

O hai sbagliato a linkare la pagina, o non ci capiamo.

La pagina linkata ha DTD HTML 4 transitional, e il codice HTML usato e` piuttosto disatnte da XHTML. Non mi sono messo a controllarla. Ti conviene prima passare dal validatore HTML e dal validatore CSS, altrimenti stiamo qui a correggere ad occhio cio` ceh e` piu` facile correggere con strumenti automatici.

Alla fine delle news devi anche metterci un blocco (anche bassissimo e invisibile) con il clear, altrimenti le news "escono" dalla loro cornice.

**pictor** · 21-03-2007, 17:16

Perdonami la svista.
Non sapevo che sia Firefox che Internet Explorer smanettano come gli pare sulla pagina se questa viene salvata dal browser.. .

Ora è a posto

Ora è a posto. Il link è sempre questo

Il codice è XHTML valido. Eventualmente può esserci qualche vecchio tag <font> nel contenuto delle news (ma non inficia la pagina e comunque non è richiesta la validazione completa).

I CSS non sono validabili perchè uso qualche hack, ma per il resto sono corretti.
C'è solo qualche problema di logica ma non so dove

Adesso mi sapete dare una mano?

Thank You!

**Mich_** · 21-03-2007, 17:34

Adesso la cosa e` completamente cambiata, ma ancora ci sono errori: sono quel tipo di errori che vengono rilevati solo da alcuni browser, per cui non sai mai come risponderanno:

- Hai usato il segno - (meno) nel nome di un file: non e` valido in alcuni contesti (viene interpretato come segno aritmetico). Secondo le norme potresti usare il segno _ (underscore) al suo posto, ma ad alcune versioni di IE non piace

- Hai usato le maiuscole nei selettori del CSS: anche questo e` sbagliato: il CSS e` case-sensitive sui selettori, e il tag <BODY> non esiste, quindi non esiste neppure il selettore BODY

Poi ci sono anche errori semantici, tipo l'uso dello stesso titolo (<h1> per titoli diversi: i titoli hanno una loro gerarchia, che va rispettata, pena la non comprensione della struttura in browser non grafici, o se il CSS non viene interpretato).

**pictor** · 21-03-2007, 18:07

Ok... il css era stato manipolato anch'esso e non me n'ero accorto

Ora ho rimesso direttamente gli originali con i selettori in minuscolo o comunque corretti.

Per il nome del file con il trattino non ho riscontrato nessun problema su nessun browser che ho provato fino ad adesso (IE5.x/6.0/7.0, FF1.x/2.x, Opera 8.x/9.x, NS 6.0).
Per me basta e avanza

Comunque lo terrò a mente per il futuro.

Comunque eccetto altri eventuali problemi minori, il tutto funziona. Poi non pretendo di raggiungere l'accessibilità completa, ma semplicemente un livello decente.
Anche per i titoli ho 'soprasseduto'.
Purtroppo posso dedicare meno tempo ad alcune cose per limiti lavorativi (fosse per me sarei perfezionista) e faccio meglio che posso.

Ora, apparte la sintassi, cosa c'è di sbagliato?

Come mai c'è questo strano comportamento con il margin-left e i float della colonna centrale?

Tnx

**Mich_** · 21-03-2007, 18:30

Adesso pero` ha cambiato aspetto (FF 1.5 linux): non piu` tutto schiacciato a sin, ma le due colone centrate in modo gradevole.
Ed anche l'ultima news (quella di prova in basso) sta dentro allo sfondo bianco-sporco.

Non so se era quello il problema, ma sembrerebbe corretto (almeno nel mio browser).

Se poi in IE la cosa non funziona, e` un problema diverso, che probabilmente devi correggere tramite un CSS specifico per IE inserito in commenti condizionali.

**pictor** · 21-03-2007, 19:35

Mmmm sì... devo aver fatto qualcosa in giornata che ha corretto il problema su FF.

Ad ogni modo NON deve funzionare così.
Se redimensioni la finestra fino a 800x600/640x480 vedrai che i margini laterali tra #content e news non sono uguali a sinistra e a destra.

Questo perchè, temporaneamente, ho usato un barbatrucco e vedrai che ho aggiunto un padding sinistro al #content (per spostare tutto a destra) e ho aggiunto dei div fittizi fra le news per tenerle separate.

Tutto questo però dovrebbe essere molto più semplice e non ci dovrebbe essere robaccia inutile a livello di contenuti.
Dovrebbe esserci un float left delle news, un margin left delle news in percentuale di 1/3 del #content (in modo che rimanga 1/3 a sinistra [tra news e bordo sinistro #content], 1/3 tra news e news, e automaticamente che resti 1/3 a destra della news [tra bordo destro di #content e la news di destra]).

Solo che, appunto, i margini sinistri non sortiscono effetto.... quelli destri delle news funzionano perfettamente, mentre quelli sinistri vengono tranquillamente ignorati.

Il fenomeno si inverte se metto le news a float:right e provo ad aggiungere un margine destro.

Io non so più che fare... non trovo il problema!

**Mich_** · 22-03-2007, 10:03

Il codice e` molto complesso, e trovo difficile seguire tutto.
Dentro il #wrapper ci sono una serie di blocchi innestati prima di arrivare al contenuto visibile:

codice:

<div id="wrapper">
	<div id="content">
		<div class="zonaNovita">
			<div class="DivAree">
			
		 		<div class="spazio"></div>
		 		<div class="notizia floatNovita area">
	 				<h1 class="areaNome">Area informativa</h1>

Addirittura un blocco segue le regole di tre classi diverse, e che in qualche caso sono state usate le classi al posto degli id (non e` sbagliato, ma complica la vita di chi deve intervenire.
Aggiungi che l'indentazione non e` corretta (per lo meno come arriva al browser), e mancano i commenti.

Tieni presente che non e` un mio progetto, e in pochi minuti devo entrare non solo nel progetto ma anche nella testa di chi ha progettato. E da quanto vedo le teste sembrano piu` di una (in serie o in parallelo o combinazione di serie-parallelo), per cui capire il tutto diventa improbo.
Credo sarebbe piu` semplice riscrivere la marcatura daccapo, usando meno della meta` dei blocchi.

Discussione: Float, margini e sbordi vari (per esperti)

Strumenti discussione

Ricerca discussione

Visualizza

Float, margini e sbordi vari (per esperti)

Permessi di invio