Repository 32bit  Forum
Repository 64bit  Wiki

[RISOLTO] strano problema css - menu con voci sovrapposte...

Forum dedicato alla programmazione.

Moderatore: Staff

Regole del forum
1) Citare in modo preciso il linguaggio di programmazione usato.
2) Se possibile portare un esempio del risultato atteso.
3) Leggere attentamente le risposte ricevute.
4) Scrivere i messaggi con il colore di default, evitare altri colori.
5) Scrivere in Italiano o in Inglese, se possibile grammaticalmente corretto, evitate stili di scrittura poco chiari, quindi nessuna abbreviazione tipo telegramma o scrittura stile SMS o CHAT.
6) Appena registrati è consigliato presentarsi nel forum dedicato.

La non osservanza delle regole porta a provvedimenti di vari tipo da parte dello staff, in particolare la non osservanza della regola 5 porta alla cancellazione del post e alla segnalazione dell'utente. In caso di recidività l'utente rischia il ban temporaneo.

[RISOLTO] strano problema css - menu con voci sovrapposte...

Messaggioda danix » gio set 25, 2008 14:18

Ciao a tutti...
sto avendo uno strano problema con un menù orizzontale nelle mie pagine web. Il menù conta 5 voci ed è stilizzato tramite foglio di stile. Il problema sta nel fatto che a volte gli ultimi 2 "bottoni" si mettono sotto ai primi 2 invece di stare sulla stessa riga.
Ho scritto a volte perchè non sono riuscito a capire come fa a presentarsi l'inconveniente e non sono nemmeno in grado di riprodurlo... apparentemente avviene in maniera random... Un altra cosa che mi ha incuriosito è il fatto che basta fare il refresh della pagina perchè tutto torni alla normalità...

Non voglio fare spamming ne promuovere il sito, però se qualcuno volesse dare un'occhiata l'indirizzo delle pagine incriminate è http://www.studioprimopiano.net.


Spero mi saprete aiutare...
Ciau
Ultima modifica di danix il sab set 27, 2008 13:12, modificato 1 volta in totale.
Avatar utente
danix
Staff
Staff
 
Messaggi: 3280
Iscritto il: ven ott 27, 2006 18:32
Località: Siderno (RC)
Nome Cognome: Danilo M.
Slackware: 64 14.0
Kernel: 3.2.29
Desktop: fluxbox

Re: strano problema css - menu con voci sovrapposte...

Messaggioda conraid » gio set 25, 2008 14:30

a me ha sempre funzionato normalmente.
nel senso che ho ricaricato varie volte e sempre ok

ma vedo che mescoli display:table, display:block, float:left
farla sembrare una tabella non ti serve a niente e nemmeno usare il float

Questo è quello che ho usato io per slackers.it (tieni presente che il position:relative c'è per il form di ricerca, altrimenti non serviva)
Codice: Seleziona tutto
#menu {
   position: relative;
   margin: 0;
   padding: 0;
   text-align: left;
   background: #535353 url('images/menubg.gif') repeat-x bottom;
   width: 100%;
   font-size: smaller;
}

#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   padding: 10px 0;
   margin-right: 20px;
}
#menu ul li {
   display:inline;
   letter-spacing: 1px;
   text-align: center;
}
#menu ul li a {
   margin: 0px;
   padding: 10px;
   color: #eee;
   text-decoration:none;
   font-weight: bold;
}

#menu ul li a:hover {
   background-image : url('images/background2.jpg');
   background-color: #e4e4e4;
   color: #333;

}


Se vuoi usare due immagini, falla diventare una sola e poi fai qualcosa tipo, così eviti l'attesa del caricamento
Codice: Seleziona tutto
#menu ul li a {
   background : url('images/background2.jpg') top;
}

#menu ul li a:hover {
   background : url('images/background2.jpg') bottom;

}
Avatar utente
conraid
Staff
Staff
 
Messaggi: 12023
Iscritto il: mer lug 13, 2005 23:00
Località: Livorno
Nome Cognome: Corrado Franco
Slackware: current

Re: strano problema css - menu con voci sovrapposte...

Messaggioda danix » gio set 25, 2008 15:12

non ci capisco nulla neanche quì... non riesco a replicarlo, a volte mi succede nella pagina del form di contatto, a volte nella home, a volte nella galleria... poi un refresh e tutto torna normale... :(

in locale non mi è mai successo...
Avatar utente
danix
Staff
Staff
 
Messaggi: 3280
Iscritto il: ven ott 27, 2006 18:32
Località: Siderno (RC)
Nome Cognome: Danilo M.
Slackware: 64 14.0
Kernel: 3.2.29
Desktop: fluxbox

Re: strano problema css - menu con voci sovrapposte...

Messaggioda danix » ven set 26, 2008 19:42

IE non presenta questo problema, e nemmeno konqueror... Opera e FF si invece... :(

@conraid:
sto provando a semplificare il css del menu in alto, ma se tolgo il display:table il menu se ne va sulla sinistra... non riesco a farlo stare al centro correttamente...


grazie dell'aiuto...

[EDIT]
dovrei aver risolto... :)
ho alleggerito non poco il css riguardante quel menu... ho seguito in parte quello che mi hai consigliato tu, e in parte sono andato di testa mia... ;)
Il problema era il display:block che spostava tutto sulla sinistra dandogli il float:left...
Ho tolto quelle proprietà e ho lavorato con il padding per rendere i link grandi abbastanza da mostrare lo sfondo del pulsante per intero, display:inline e il gioco è fatto... :D


Grazie dei suggerimenti, spero che questo problema sia chiuso, quindi metto risolto al titolo del post... domani mattina verifico da FF3 su icspi e vedo come va...


PS
se avete suggerimenti o critiche fateli pure, magari in pm per non andare ot ma io li accetto tutti e li tengo in grande considerazione... :)
Avatar utente
danix
Staff
Staff
 
Messaggi: 3280
Iscritto il: ven ott 27, 2006 18:32
Località: Siderno (RC)
Nome Cognome: Danilo M.
Slackware: 64 14.0
Kernel: 3.2.29
Desktop: fluxbox

Re: strano problema css - menu con voci sovrapposte...

Messaggioda conraid » sab set 27, 2008 9:18

danix85 ha scritto:sto provando a semplificare il css del menu in alto, ma se tolgo il display:table il menu se ne va sulla sinistra... non riesco a farlo stare al centro correttamente...


Non ho visto come hai risolto, ma un "blocco" si centra dando text-align:center al blocco superiore, e mettendo margin: 0 auto; a quello interessato.
In questo caso prende 0 come mergine verticale (puoi metterci quel che vuoi) e aggiusta da solo i mergini orizzontali per soddisfare la richiesta del blocco superiore che vuole tutto centrato.
Avatar utente
conraid
Staff
Staff
 
Messaggi: 12023
Iscritto il: mer lug 13, 2005 23:00
Località: Livorno
Nome Cognome: Corrado Franco
Slackware: current

Re: [RISOLTO] strano problema css - menu con voci sovrapposte...

Messaggioda danix » sab set 27, 2008 13:18

conraid ha scritto:Non ho visto come hai risolto,


Codice: Seleziona tutto
        <div id="topmenu">
          <ul>
              <li class="current"><a href="index.php?p=home"><strong>home</strong></a></li>
              <li><a href="index.php?p=gallerie"><strong>gallerie</strong></a></li>
              <li><a href="index.php?p=prodotti"><strong>prodotti</strong></a></li>
              <li><a href="index.php?p=contatti"><strong>contatti</strong></a></li>
              <li><a href="index.php?p=studio"><strong>studio</strong></a></li>

          </ul>
        </div>


Codice: Seleziona tutto
#topmenu {
 margin:0;
 padding:0;
 text-align:center;
 width:100%;
}

#topmenu ul {
 margin:0; padding:10px 0;
 list-style:none;
 height:35px;
 font-size:11px;
}

#topmenu ul li {
 margin:;
 height:35px;
 line-height:30px;
 display:inline;
 text-align:center;
}

#topmenu ul li a {
 margin:0;
 padding:10px;
 text-decoration:none;
 cursor:pointer;
 background:url(../images/menu/pro_six_0a.gif) no-repeat;
}

#topmenu ul li a strong {
 padding:10px 20px 10px 10px;
 background:url(../images/menu/pro_six_0b.gif) no-repeat right top;
}

#topmenu li.current a {
 color:#fff;
 background:url(../images/menu/pro_six_2a.gif) no-repeat;
}

#topmenu li.current a strong {
 background:url(../images/menu/pro_six_2b.gif) no-repeat right top;
}

#topmenu li a:hover {
 color:#fff;
 background: url(../images/menu/pro_six_1a.gif) no-repeat;
}

#topmenu li a:hover strong {
 background:url(../images/menu/pro_six_1b.gif) no-repeat right top;
}

#topmenu li.current a:hover {
 color:#fff;
 background: url(../images/menu/pro_six_2a.gif) no-repeat;
 cursor:default;
}

#topmenu li.current a:hover strong {
 background:url(../images/menu/pro_six_2b.gif) no-repeat right top;
}




conraid ha scritto: ma un "blocco" si centra dando text-align:center al blocco superiore, e mettendo margin: 0 auto; a quello interessato.
In questo caso prende 0 come mergine verticale (puoi metterci quel che vuoi) e aggiusta da solo i mergini orizzontali per soddisfare la richiesta del blocco superiore che vuole tutto centrato.

si, questo lo sapevo... :) solo che avendo dato display:block e float:left ai <li> non mi permetteva di farli stare al centro... ho parzialmente riscritto il css interessato e adesso funziona come puoi vedere... ;)


Ancora grazie mille per l'aiuto...
Avatar utente
danix
Staff
Staff
 
Messaggi: 3280
Iscritto il: ven ott 27, 2006 18:32
Località: Siderno (RC)
Nome Cognome: Danilo M.
Slackware: 64 14.0
Kernel: 3.2.29
Desktop: fluxbox


Torna a Programmazione

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite