problemi di posizionamento menù navaigazione

**Brum** · 21-04-2011, 11:49

Sto muovendo i miei primissimi passi quindi vi anticipo la banalità di quello che andrete a vedere

Ho questo problema, sto scrivendo il codice con Fraise per Mac e per testare che tutto procedesse per il meglio utilizzavo l'opzione anteprima presente nel programma. Una volta testato, ho inserito il tutto a questo indirizzo: http://www.tanadellebirbe.altervista.org. Ora il problema è questo, quando vado sulla pagina con i browser, al posto della simulazione con Fraise, il menù è disposto a lato della pagina, completamente fuori dal corpo della pagina, e se seleziono i link, a volte torna nella posizione in cui dovrebbe stare ed altre ritorna fuori pagina. Non capisco il motivo. Ho notato che con alcuni browser tipo chrome la voce home scompare, mentre in safari è presente. Non so come uscirne.

codice:

<body>
    <div id="wrapper">
        
        <div id="container">
            
            <div id="right">
            
                
                
                <h1>[img]images/home.gif[/img]</h1>
                
                

...
                
                </p>
                    
     		</div>
            
            <div id="left">
            
            	
            	<ul id="nav">
            		<li id="home">home
            		<li id="gestione">gestione
            		<li id="contatti">contatti
            	[/list]
            	
            
            </div>
            
            <div id="clearer"></div>
            
        </div>
        
    </div>

codice:

/* Navigazione */
ul#nav {list-style-type:none;margin:293px 0 0 264px;padding:0;}
ul#nav li a {padding:0;margin:0;float:right;text-indent:-9999px;}
li#home a, li#gestione a, li#contatti a {height:83px;}
li#home a {width:200px;background:url('../images/nav/home.gif') no-repeat;}
li#gestione a {width:216px;background:url('../images/nav/gestione.gif') no-repeat;}
li#contatti a {width:216px;background:url('../images/nav/contatti.gif') no-repeat;}

/* Hover Navigazione */
li#home a:hover,li#home a:focus,li#gestione a:hover,li#gestione a:focus,li#contatti a:hover, li#contatti a focus {background-position:0px -83px;}

**Brum** · 21-04-2011, 16:45

Alla fine sono riuscito...ho impostato #left con position:absolute ed ho notato mettendo un bordo al box, che le mie voci del menù uscivano, in parte, dal box sul lato destro.
Non ho dovuto far altro che allargare le dimensioni del box ed impostare un padding sinistro per allineare le voci con lo sfondo.

Mi ero incasinato da solo, non so come ho fatto a creare un box così piccolo...

Ora però ho un altro problema...

ovvero la voce Home del menu si vede solo con Safari mentre con chrome, ie ecc. non compare!!

**Prill** · 21-04-2011, 18:13

Invece che usare i posizionamenti assoluti, il tuo codice potrebbe essere rivisto così:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title> 
 
<style type="text/css">

* {margin:0;padding:0;border:0;}

body {font-size:70%;color:#222;background:#ffffff;font-family:Verdana,Arial,Helvetica,sans-serif;}

#wrapper {width:1440px; margin:0 auto; background-image:url(pattern.jpg); background-repeat:repeat-y;}
#container {height:auto!important; height:686px; min-height:686px; 

background-image:url(wrapper.jpg);background-repeat:no-repeat;}
#left {float:left;width:560px;}
#right {margin-left:560px;width:515px;text-align:center;}
#right p {padding:1em;}
#footer {height:304px;background-image:url(footer.jpg);background-repeat:no-repeat;clear:both}
#validator {text-align:center}

h1 {padding:55px 0 55px;}

ul#nav {list-style-type:none;width:216px;margin:312px 0 0 307px;}
ul#nav li {display:block;height:83px;}
ul#nav a {display:block;float:left;text-indent:-9999px;width:216px;height:83px; 

background-repeat:no-repeat;background-position:0 0;}
ul#nav a:hover,ul#nav a:focus {background-position:0px -83px;}
ul#nav a#home {width:200px;background-image:url(home.gif);}
ul#nav a#gestione {background-image:url(gestione.gif);}
ul#nav a#contatti {background-image:url(contatti.gif);}
 
</style>
</head>
<body>
    <div id="wrapper">     
        <div id="container">         
            <div id="left">
            	<ul id="nav">
            		[*]home
            		[*]gestione
            		[*]contatti
            	[/list]
            </div>

            <div id="right">
                <h1>[img]home.gif[/img]</h1>    
                

testo</p>	
                

testo</p>
        	

testo</p>
    		

testo</p>
    		

Apprendimento e divertimento in azione.</p>          
     	   </div>          
            
        </div>
    <div id="footer">  
    </div>
    
    <div id="validator"> 
    	[img]valid-xhtml11.gif[/img]   	
    </div>
        
    </div>
 
</body>
</html>

solo per comodità ed evitare di postare due blocchi di codice ho inserito il css nella pagina

**Prill** · 21-04-2011, 18:22

Aggiungo: il tuo contenitore deve avere una larghezza di 1440 pixel altrimenti l'immagine di sfondo wrapper viene tagliata. Firefox segnala un errore con l'immagine di sfondo del link home, prova a risalvarla perché potrebbe essere corrotta (sarebbe il caso di alleggerire anche l'altro sfondo che pesa un po' troppo)

**Brum** · 21-04-2011, 18:57

Urca quante informazioni!
Ti ringrazio tantissimo e metto in pratica.
Aggiornerò il post non appena fatto.

Grazie ancora...

**Brum** · 22-04-2011, 15:44

Prima di cominciare ti ringrazio ancora...ho letto attentamente il codice che mi hai scritto ed ho visto che praticamente hai rivisto tutto.
Ho cercato di entrare nella logica per capire i miei errori ma onestamente ho molti perchè da chiederti.
Prima di tutto una banalità, ho risalvato l'immagine home che ora si vede, avevi ragione.
Ed ora ho mille domande quindi preparati e spero che prima o poi tu mi possa chiarire le idee:

1- hai tolto dal body il background-image (pattern.jpg) per inserirlo nel wrapper; dal quale però hai tolto (wrapper.jpg) per inserirlo in #container. Perchè la disposizione che ho dato io è sbagliata se comunque ho ottenuto il risultato voluto?

2- da #left hai tolto position:absolute ed hai impostato una larghezza maggiore. Impostando il float a #left e spostatolo nell'ordine prima di #right.

3- nella navigazione ho visto l'inserimento di display:block.

Ho notato che hai reso molto più snello il codice corregendo delle mie stupidate, ad esempio l'hover della navigazione dove avevo impostato voce per voce l'hover e focus, quando tu semplicemente mi hai corretto con ul#nav a:hover, ul#nav a:focus.

Ho visto inoltre che hai invertito nell'ordine all'interno di index.php right e left; avendo così prima il menù di navigazione.
Io li avevo messi in quell'ordine, perchè ho letto che inserire i contenuti prima della navigazione favoriscono l'indicizzazione da parte dei motori di ricerca. E' una stupidata?

Grazie mille, spero che tu mi possa spiegare le modifiche quando ne hai la possibilità.

**Prill** · 22-04-2011, 21:32

Non ricordo nel dettaglio la tua pagina, vado un po' a memoria.
1. avevi due div a sé stanti, il wrapper con un'altezza minima che permettesse di visualizzare lo sfondo per tutta l'altezza (ma non aveva una larghezza fissa, alla mia risoluzione l'immagine era tagliata a sinistra, col testo in alto incompleto, e a destra) e il footer. Ho racchiuso tutto in un box (avrei potuto inserirne un altro lasciando i tuoi così com'erano, ma sarebbe stato aggiungere marcatura superflua). Il contenitore generale è diventato il wrapper (e lo sfondo pattern poteva essere agganciato direttamente qui), il tuo div container ha preso il posto del wrapper;

2. quando ho visto la tua pagina salvandola per provarla perché i link avevano problemi anche con Opera risultando spostati verso il centro, non avevi ancora il position absolute ma un float:right per il div. Avevo preso in considerazione insomma la prima versione che avevi postato. Ho ricalcolato margini e padding e larghezze perché tutto fosse nella posizione voluta (avrebbero potuto essere impostati anche diversamente e puoi variarli come meglio credi, tenendo presente che la larghezza di un elemento è data dalla somma di larghezza, margini, padding e, se ve ne sono, bordi);

3. il link è un elemento in linea, se vogliamo assegnargli dimensioni precise dobbiamo dargli un display:block, peraltro necessario anche perché gli si assegna un float.

Col posizionamento assoluto hai la possibilità di richiamare i contenuti nel codice in ordine di importanza, questo è vero, i motori vanno a leggere tutta la pagina e non so, altri potranno dirti al riguardo, se il disporre prima o dopo qualcosa abbia realmente conseguenze sull'indicizzazione; credo che invece un'utilità possa esservi per chi fa uso di screen reader potendo arrivare subito ai contenuti saltando il superfluo o il secondario. Ma anche qui altri potranno dirti meglio.
Ciao

**Brum** · 28-04-2011, 18:18

Ti ringrazio davvero per l'aiuto, sei stato super esaustivo... cercherò di trarne consiglio!
Chissà se arriverò mai a vedere in modo così chiaro un giorno, mi hai spiegato tutto con una semplicità pazzesca.
Per quanto riguarda il posizionamento ed i motori di ricerca mi informerò meglio. Prima forse è il caso che dia un ordinata al mio codice.

Ciao alla prossima!

Discussione: problemi di posizionamento menù navaigazione

Strumenti discussione

Ricerca discussione

Visualizza

problemi di posizionamento menù navigazione

Permessi di invio