• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Problema Menu <li> in CSS

gedamial

Utente Senior
9 Giugno 2010
1.934
26
52
Napoli
www.ministryofmagic.altervista.org
Miglior risposta
0
#1 Autore del topic
Salve.​
Ho un problema con il mio sito web: menu in CSS.
Allora, il problema è questo che vedete nell'immagine:



Si vedono solo due bottoni: l'iniziale (li:first-child) e il finale (li:last-child).
I bottoni degli altri <li> non si vedono affatto... anzi, si vedono solo i button_hover di questi solo se ci passo il mouse sopra...



Ecco il codice CSS del Menu e dei <li>

HTML:
#menu {
      list-style: none;
}


#menu li {
float: left;
       background: url(/images/button.png);
       width: 111px;
       height: 41px;
      font-family: Times New Roman;
       color: #FFFFFF;
       
}


#menu li:hover {
       background: url(/images/button_hover.png);
}

#menu li:first-child  {
background: url(/images/firstbutton.png);
width: 111px;
height: 41px;
}

#menu li:first-child:hover {
background: url(/images/firstbutton_hover.png);
}

#menu li:last-child {
background: url(/images/lastbutton.png);
}

#menu li:last-child:hover {
background: url(/images/lastbutton_hover.png);
}
In più, non riesco a mettere i <li> (es: Home, Contattami...) al centro e non sopra i bottoni.

Vi prego di aiutarmi!

Grazie.
 

gedamial

Utente Senior
9 Giugno 2010
1.934
26
52
Napoli
www.ministryofmagic.altervista.org
Miglior risposta
0
#3 Autore del topic
Esiste l'immagine button.png sì? Controlla bene :emoji_relieved:

Comunque per centrarli usa text-align:center; e line-height
@Kaito

Ok, il problema è risolto... i bottoni però... non sono tutti uniformi al 100% <:S

P.S= Come faccio ad allineare il Menù al centro?
 
Ultima modifica:

gedamial

Utente Senior
9 Giugno 2010
1.934
26
52
Napoli
www.ministryofmagic.altervista.org
Miglior risposta
0
#5 Autore del topic
Con float non lo puoi allineare, dovresti metterli in display: inline-block i <li> e poi con margin:auto centri tutto.

Quella proprietà (inline-block) non viene letta da IE7, per fixarla qui c'è la soluzione: html - IE7 does not understand display: inline-block - Stack Overflow
Per quanto riguarda l'header, se vai sul mio sito: clicca qui, spero non sia spam!

Puoi ben vedere che l'immagine ha un margine a destra ma non a sinistra: perché? Ecco l'header in CSS:

HTML:
#header {
      background: url(/images/header2.png);
      width: 994px;
      height: 305px;
margin-bottom: -15px;      
}
@Kaito
 
Ultima modifica:

Ignazio96

Guru del Forum
User Legend
9 Marzo 2008
10.985
573
133
Perso nell'oblio
Miglior risposta
0
#6
Per quanto riguarda l'header, se vai sul mio sito: clicca qui, spero non sia spam!

Puoi ben vedere che l'immagine ha un margine a destra ma non a sinistra: perché? Ecco l'header in CSS:

HTML:
#header {
      background: url(/images/header2.png);
      width: 994px;
      height: 305px;
margin-bottom: -15px;      
}
@Kaito
Il margine a destra è automatico , inoltre c'è un margin-bottom che è la distanza dall'elemento più in basso , leggi qui come gestire i margini CSS Margin
 

gedamial

Utente Senior
9 Giugno 2010
1.934
26
52
Napoli
www.ministryofmagic.altervista.org
Miglior risposta
0
#7 Autore del topic
Il margine a destra è automatico , inoltre c'è un margin-bottom che è la distanza dall'elemento più in basso , leggi qui come gestire i margini CSS Margin
Si lo sapevo già quel meccanismo. Se metto un elemento con margin-top: 10px, significa che tale elemento dista 10px dal top (inizio pagina). Seguendo questa logica, ho messo l'header a margin-right: 1px; in modo che disti soli 1px dal margine destro... ma il margine destro rimane sempre quello... non cambia... ci dev'essere pure un modo! L'immagine la voglio vedere per intera, non tagliata di secco ad un certo punto!
@Ignazio96
 
Shoutbox
  1. #KiK #KiK: CAFONE
  2. #KiK #KiK: ma come parla
  3. 404NotFound 404NotFound: figa
  4. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  5. Cristoforo58 Cristoforo58: Sono vietati link esterni a Sciax2 in shoutbox, grazie.
  6. Mr_Joker Mr_Joker: vi ricordiamo che domani pomeriggio dalle 2-5pm "Sunake Hotel" apre le selezioni a diverse posizione staff.
  7. Forzaese23 Forzaese23: retro babbo
  8. #KiK #KiK: createlo amikoooo
  9. B bbhojjjj76: fake login habbo ne avete?
  10. N NeroWhite BO: Buonasera
  11. #Egzon14 #Egzon14: dunque possiamo definirli morti i retro
  12. #Egzon14 #Egzon14: habbo passerà ad unity
  13. #KiK #KiK: ma infatti
  14. #Egzon14 #Egzon14: ancora con sti retro habbo
  15. M mikiamo2012: Qualcuno per creare retro habbo?
  16. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  17. #KiK #KiK: e poi ci sono io che vado a sorseggiare un po di kaffè su habbo inglese
  18. #Egzon14 #Egzon14: è proprio morto sciax2
  19. #KiK #KiK: Amiciii come statee
  20. #KiK #KiK: Cerco staff per la mia kaffetteriaaaa
  21. LogR LogR: Cerco tutto lo staff per il mio retroserver
  22. LogR LogR: https://www.sciax2.it/forum/threads/cerco-team-progetto-pronto.700516/
  23. A AnonymousOwna: Lubex Hotel è online vi aspetto
  24. ..Vortix.. ..Vortix..: Sì, penso ci sia la categoria adatta
  25. A Antonyblind: Qui si possono pubblicare metodi di guadagno???
Top