posizionamento oggetti con CSS ed errori di visualizzazione

[FreeManX]

ciao,
sto ridisegnando il mio sito e finalmento mi sono deciso ad usare i CSS per la disposizione degli oggetti. Probabilmente data la mia scarsa preparazione in merito (e il primo sito che faccio in questo modo), si presentano dei problemi.
il sito creato con Dreamweaver in Opera 7.52 e' perfetto come io l'ho creato (opera per windows), invece in:
Internet Explorer 5.5, due immagini risultano spostate di 6 pixel verso l'alto (ma solo quei due oggetti non si trovano dove dovrebbero!!
In Mozilla 1.7, si ripresenta lo stesso probleman, ora invece e una serie di layer contenente del testo che invece e piu' basso di quello che dovrebbe (andando a coprire una linea presente), ma tutto l'altro e giusto.

perche' fa cosi?
Come fo?

grazie ciao!

[Marcolino's]

Un linketto al sito se è possibile?
Grazie

[FreeManX]

http://utenti.lycos.it/alfredopelle/new/

ovviamente non e tutto il sito

[teorema55]

Ho dato un'occhiata al sito linkato (con i vari browsers che hai nominato) e ho scaricato il CSS recuperandone l'url dal codice.

Nonostante tutta la buona volontà però non è facile provare a darti una mano, spiega almeno quali sono gli oggetti in questione........

[teorema55]

.... comunque, districandosi tra gli invadenti spot pubblicitari, mi sembra di capire che il problema riguardi i tre link che compongono il menu orizzontale di navigazione, i quali dovrebbero stare appena sopra la linea punteggiata (e così accade con Opera e IE6, non ho potuto verificare con IE5.5...) ma non con Netscape e Mozilla, dove invece sono più bassi e parzialmente sovrapposti alla linea.

Ebbene, il problema si risolve eliminando i tag

e </p> che "wrappano" l'immagine della freccina e i links nel menu orizzontale (div llink1, llink2 e llink3). Cambierà un po' la posizione dei link in senso orizzontale, ma questa la puoi controllare settando a tuo piacimento la proprietà "left: Npx;" in "#llink1, 2 e 3" nel CSS.

Il problema più serio invece mi sembra che l'header (logo e slogan) non arrivano a coprire tutta la larghezza della pagina in Mozilla e Netscape e quindi risultano molto più stretti del body.

Io trovo utile, in genere, settare la larghezza con un valore percentuale, in modo che non venga influenzata né dalla dimensione reale dell'immagine né dalla risoluzione del video.

La correzione da fare (se vuoi) è nel CSS, precisamente in
#lSfondoLogo, dove puoi settare la larghezza così:

#lSfondoLogo {
		width: 100%;
		
}

anzichè così

#lSfondoLogo {
		width: auto;
}

Un esempio del risultato delle due modifiche lo puoi vedere all'indirizzo

http://www.larianaweb.com/alfredo/alfredo.html

(non ho inserito il frame verticale Lycos)

Rimane da aggiustare la posizione del logo rispetto all'immagine di sfondo, nella quale alcuni browser conservano un pixel bianco vicino alla base, altri lo tagliano, questo dipende dai gusti.....

[FreeManX]

Originariamente inviato da teorema55
.... comunque, districandosi tra gli invadenti spot pubblicitari, mi sembra di capire che il problema riguardi i tre link che compongono il menu orizzontale di navigazione, i quali dovrebbero stare appena sopra la linea punteggiata (e così accade con Opera e IE6, non ho potuto verificare con IE5.5...) ma non con Netscape e Mozilla, dove invece sono più bassi e parzialmente sovrapposti alla linea.

Ebbene, il problema si risolve eliminando i tag

e </p> che "wrappano" l'immagine della freccina e i links nel menu orizzontale (div llink1, llink2 e llink3). Cambierà un po' la posizione dei link in senso orizzontale, ma questa la puoi controllare settando a tuo piacimento la proprietà "left: Npx;" in "#llink1, 2 e 3" nel CSS.

Il problema più serio invece mi sembra che l'header (logo e slogan) non arrivano a coprire tutta la larghezza della pagina in Mozilla e Netscape e quindi risultano molto più stretti del body.

Io trovo utile, in genere, settare la larghezza con un valore percentuale, in modo che non venga influenzata né dalla dimensione reale dell'immagine né dalla risoluzione del video.

La correzione da fare (se vuoi) è nel CSS, precisamente in
#lSfondoLogo, dove puoi settare la larghezza così:

#lSfondoLogo {
		width: 100%;
		
}

anzichè così

#lSfondoLogo {
		width: auto;
}

Un esempio del risultato delle due modifiche lo puoi vedere all'indirizzo

http://www.larianaweb.com/alfredo/alfredo.html

(non ho inserito il frame verticale Lycos)

Rimane da aggiustare la posizione del logo rispetto all'immagine di sfondo, nella quale alcuni browser conservano un pixel bianco vicino alla base, altri lo tagliano, questo dipende dai gusti.....

In primis, Grazie di tutto!!!!
Esatto uno dei problemi e quello dei menu, adesso correggo come indicato da te.
L'altro e quello del logo con lo sfondo, io il px (io ho misurato sono 3 per l'esattezza) bianco vicino alla base non ce lo voglio!!! Il discorso e che lo inserisce solo IE (nella versione 5.5 quella che ho!!!)

Per la larghezza non mi preoccupo anche perche ho intenzione di metterlo in una finestra delle giuste dimensioni!
La differenza tra 100% e auto e che il primo occupa tutto e il secondo solo il necessario?

Grazie ciao

[teorema55]

Per la larghezza non mi preoccupo anche perche ho intenzione di metterlo in una finestra delle giuste dimensioni!

uhm.....okkio perchè oltre ai vari browsers ci sono anche le varie risoluzioni dello schermo, se correggi la larghezza dell'header come indicato le dimensioni saranno sempre comunque quelle giuste....

Quanto allo sfondo del logo, visto che è di un colore uniforme, potresti usare la proprietà (che già esiste)

background-color: #273793;

anzichè una immagine.

L'unica modifica da fare è eliminare l'immagine "spacer.gif" dal codice, e lasciare il tag <div id="sfondologo"> dove si trova, spostandone la chiusura (</div>) appena sotto la chiusura del tag <div id="llogo">.

In questo modo il div "sfondologo" farà da padre ai div "linfo" e "llogo", avvolgendoli nelle sue proprietà di altezza, larghezza e colore di sfondo.

Già testato (vedi link sopra) e mi sembra che vada bene con tutti i browser.

[teorema55]

Anche per gli altri elementi non uso mai le misure in pixel, se non è indispensabile, è rischioso . . .

Il corpo, per esempio, lo farei così:

#lCorpo {
		position:absolute;
		left:0px;
		top:195px;
		right: 0px;
		z-index:11;
		margin:15px;
	}

e questa modifica diventa quasi indispensabile se usi

width: 100%;

per l'header.

ma........de gustibus

[teorema55]

Ultimissima cosa: una volta che hai deciso per le misure in percentuale, OGNI elemento dovrà essere settato di conseguenza, non appena un elemento avrà una dimensione fissa quello forzerà la pagina a un comportamento non corretto.

Il mio parere è che gli elementi debbano occupare lo spazio il più "morbidamente" possibile, senza forzature.........insomma, la tua pagina io la vedo così come risulta sul mio link.

Essendo una pagina statica, il codice e il foglio di stile sono visibili, se c'è qualche aspetto che ti interessa prendilo e usalo.

[FreeManX]

questo modo di costruire per me e' nuovo, procedo a piccoli passi

grazie di tutto!

se voglio che un <div> si centrato rispetto alla pagina come fo? il tag align allinea il contenuto.

grazie ciao