Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Problema di visualizzazione: elemento css non allineato correttamente
Forum - HTML / CSS - Problema di visualizzazione: elemento css non allineato correttamente

Avatar
Milmor94 (Normal User)
Rookie


Messaggi: 43
Iscritto: 10/07/2011

Segnala al moderatore
Postato alle 19:56
Giovedì, 27/10/2011
Salve a tutti.
Il problema che voglio sottoporVi è relativo al menù orizzontale centrale del sito http://comunesampe.altervista.org/ (url provvisorio per una PA).
Come potrete notare, il menù orizzontale che compare al passaggio del mouse non è correttamente allineato con quello superiore, ma risulta spostato verso destra di qualche pixel.

Consigli per risolverlo? :d

Qui il codice css:
Codice sorgente - presumibilmente HTML / CSS
  1. /* (NUOVO) MENU' ORIZZONTALE (Hor Item) */
  2.  
  3. ul#topnav {
  4.         margin: 0; padding: 0;
  5.         float: left;
  6.         width: 100%;
  7.         list-style: none;
  8.         position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
  9.         font-size: 16px;
  10.         background: url(http://newwpthemes.com/livedemo/wp-content/themes/goBusiness/images/nav-hover.png) repeat-x;
  11.         font-family: Tahoma;
  12. }
  13. ul#topnav li {
  14.         list-style: none;
  15.         float: left;
  16.         margin: 0; padding: 0;
  17. }
  18. ul#topnav li a {
  19.         padding: 10px 15px;
  20.         display: block;
  21.         color: #ffffff;
  22.         text-transform:uppercase;
  23.         font-weight: bold;
  24.         text-decoration: none;
  25. }
  26.  
  27. ul#topnav li:hover {
  28.         color: #000000;
  29. }
  30.  
  31. ul#topnav ul {
  32.         list-style-type:none;
  33.         padding: 5px 0;
  34.         position: absolute;
  35.         left:0px;
  36.         top:30px;
  37.         display: none; /*--Hide by default--*/
  38.         width: 100%;
  39.         font-size: 14px;
  40.         background: #0557af;
  41.         color: #fff;
  42.         z-index:999;
  43. }
  44. ul#topnav :hover ul { display: block; } /*--Show subnav on hover--*/
  45. ul#topnav ul a {
  46.         color: #ffffff;
  47.         display: inline;
  48.         text-transform:none;
  49. }

Qui il richiamo dal file 'header.php' (premetto che uso wordpress)
Codice sorgente - presumibilmente HTML / CSS
  1. <div class="span-24">  
  2. <?php wp_nav_menu(array('theme_location' => 'menu_2',
  3.         'menu_id' => 'topnav',
  4.         'container_class' => 'topnav'));  ?>
  5.                         </div>

Codice sorgente - presumibilmente VB.NET
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.  
  4.         $("ul#topnav li").hover(function() { //Hover over event on list item
  5.                 $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
  6.                 $(this).find("span").show(); //Show the subnav
  7.         } , function() { //on hover out...
  8.                 $(this).css({ 'background' : 'none'}); //Ditch the background
  9.                 $(this).find("span").hide(); //Hide the subnav
  10.         });
  11.  
  12. });
  13. </script>

PM
Avatar
Bonny (Member)
Expert


Messaggi: 437
Iscritto: 24/04/2009

Up
1
Down
V
Segnala al moderatore
Postato alle 20:24
Giovedì, 27/10/2011
su l'elemento ul#topnav ul prova a impostare la proprietà left con un valore negativo..
tipo left : -10px

| Home | Chi ci governa | ecc.. | .. |

visto che il sub menu scende a partire dal secondo elemento(tag li) (Chi ci governa) devi tenere conto del padding fra "home" e "chi ci gov" che è doppio rispetto allo spazio che c'è tra il padding sinistro di Home credo sia qusto il motivo

Ultima modifica effettuata da Bonny il 27/10/2011 alle 21:26
GRAZIE MILLE!!! Ho risolto mettendo left: -21px; :) Ancora grazie per la tua disponibilità e rapidità di risposta!! - Milmor94 - 28/10/11 19:01
Di niente:) - Bonny - 28/10/11 19:49
PM