[HTML] piccolo problema di impaginazione

Angelo Russo

Nuovo Utente
8 Mag 2018
23
0
1
44
ciao,
ho un piccolo problema con l'impaginazione di un menu orizzontale.
vorrei centrarlo ma non mi riesce.
se scrivo il codice potreste dirmi dove sbaglio??
Codice:
<!doctype html>
<html>

<head>

<style>
    body {
    background-color: #e4edfc;
 
        align: center;
      
}
    .center {
    margin:0 auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

 
}
</style>
</head>
 
<body>
<table width="0" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><img src="images/index2_01.jpg" width="916" height="132" alt=""/></td>
    </tr>
  </tbody>
    </table>
    <table width="0" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
      </tbody>
    </table>
<button class="dropbtn">Home</button>
</body>
 
        <head>
<style>
.dropbtn {border-radius: 3px;
    background-color: #183e7d;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #183e7d;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #183e7d}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #183e7d;
}
</style>
</head>
<body>



<div class="dropdown">
  <button class="dropbtn">Linea Pediatrica</button>
  <div class="dropdown-content">
    <a href="#">Megastar Junior</a>
    <a href="#">Megastar ABD</a>
    <a href="#">Megastar K</a>
       <a href="#">Megastar Plus</a>
       <a href="#">Megafolic</a>
       <a href="#">Lenispass</a>
       <a href="#">Leutrofin</a>
       <a href="#">Plasigen B6</a>
       <a href="#">Zincospray</a>
  </div>
</div>

</body>
    <head>
<style>
.dropbtn {border-radius: 3px;
    background-color: #183e7d;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color:#183e7d;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #183e7d; color:white;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #183e7d;
}
</style>
</head>
<body>



<div class="dropdown">
  <button class="dropbtn">Linea Adulti</button>
  <div class="dropdown-content">
    <a href="#">Afrovir</a>
    <a href="#">Glutaliver</a>
    <a href="#">Megaflor 50</a>
       <a href="#">Megastar Complex</a>
       <a href="#">Neuroclar</a>
           <a href="#">Plasigen B6</a>
       <a href="#">Venil Plus schiuma</a>
       <a href="#">Venil Plus cpr</a>
  </div>
</div>

</body>
        <head>
<style>
.dropbtn {border-radius: 3px;
    background-color: #183e7d;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color:#183e7d;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #183e7d; color:white;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #183e7d;
}
</style>
</head>
<body>



<div class="dropdown">
  <button class="dropbtn">Dispositivi Medici</button>
  <div class="dropdown-content">
    <a href="#">Cicatrix crema</a>
    <a href="#">Cicatrix gel</a>
    <a href="#">Cicatrix spray</a>
 
  </div>
</div>
<body>

</table>
    <button class="dropbtn">Contatti</button>
</body>

</html>
grazie amici..
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.274
328
83
Per prima cosa quando posti del codice come tutti noi per regolamento devi usare il tag
code.gif
oppure la funzione codice dalla barra degli strumenti :
box inserisci 2.png.JPG

Inoltre deve essere postato in modo comprensibile non tutto mischiato come hai gatto qui, perche se così è veramente la tua pagina, non va bene assolutamente!
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.274
328
83
Nel codice che hai postato hai aperto e chiuso piò volte il tag <head>, <body>, <style>, ecc. ecc., cosa che in una pagina è inconcepibile, quindi non saprei neanche come prenderla. Quindi metti ordine al codice accorpando in una sola struttura:
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
qui e solo qui tutto il css
</style>
</head>

<body>
qui solo e esclusivamente html
</body>
</html>
e posta di nuovo rispettando le regole
 

Angelo Russo

Nuovo Utente
8 Mag 2018
23
0
1
44
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
<style>
.dropbtn {border-radius: 3px;
    background-color: #183e7d;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #183e7d;color:white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: white; color:#183e7d }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #183e7d;color white;
}
</style>
</head>

<body>
    </table>
    <button class="dropbtn">Home</button>
    <div class="dropdown">
 
  </div>
</div>
    <div class="dropdown">
  <button class="dropbtn">Linea Pediatrica</button>
  <div class="dropdown-content">
    <a href="#">Megastar Junior</a>
    <a href="#">Megastar ABD</a>
    <a href="#">Megastar K</a>
       <a href="#">Megastar Plus</a>
       <a href="#">Megafolic</a>
       <a href="#">Lenispass</a>
       <a href="#">Leutrofin</a>
       <a href="#">Plasigen B6</a>
       <a href="#">Zincospray</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">Linea Adulti</button>
  <div class="dropdown-content">
    <a href="#">Megaflor50</a>
    <a href="#">Megastar complex</a>
    <a href="#">Neuroclar</a>
      
      </div>
      </div>
    <div class="dropdown"> 
    <button class="dropbtn">Medical Devices</button>
  <div class="dropdown-content">
    <a href="#">Cicatrix crema</a>
    <a href="#">Cicatrix gel</a>
    <a href="#">Cicatrix spray</a></div>
    
    
  </div>
</div>
    </table>
    <button class="dropbtn">Contatti</button>
</body>
</html>

ho cercato di fare ordine ma non riesco a centrare il menu... pleaseeee
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.274
328
83
Questo menu è difficile da centrare così come è fatto, perchè:
  1. c'è dei tag </table> chiusi ma mai aperti
  2. hai definito delle posizioni assolute quindi non si spostano
  3. hai diviso le varie voci in vari tag quindi si contrastano
Il menu vuole fatto tutto in un pezzo e non frammentato pertanto bisognerebbe fare tutto da capo
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.274
328
83
Ti allego uno zip con i file per un esempio di come potrebbe essere
DEMO
 

Allegati

Ultima modifica:

Angelo Russo

Nuovo Utente
8 Mag 2018
23
0
1
44
grazie mille Max 1...
ho provato a togliere il superfluo ed ordinare il tutto, niente di fatto!
ho provato a prendere spunto dal tuo file, di cui ti ringrazio, niente..
non so che pesci pigliare... help!!!
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.274
328
83
Che significa niente da fare? Se guardi la mia demo unziona benissimo ed è centrata come la volevi tu!
Clicca su demo
 

Angelo Russo

Nuovo Utente
8 Mag 2018
23
0
1
44
si lo so.. potresti indirizzarmi ad un corso di html e css, visto che sono all'inizio.. altrimenti ti faccio solo perdere tempo.. grazie Max1
 

Angelo Russo

Nuovo Utente
8 Mag 2018
23
0
1
44
ho ordinato tutto ma guarda come viene!!! mi sembra tutto corretto!!! uffi!!!
vorrei centrarlo e che rimanesse sempre al centro del sito sotto la testata!

Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home333</title>
<style>

.dropbtn {border-radius: 3px;
    background-color: #183e7d;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #183e7d;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: white; color: #183e7d}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color:#183e7d;
}
</style>
</head>

<body>

        <button class="dropbtn">Home</button>
    <div class="dropdown">
  <button class="dropbtn">Linea Pediatrica</button>
  <div class="dropdown-content">
    <a href="#">Megastar Junior</a>
    <a href="#">Megastar ABD</a>
    <a href="#">Megastar K</a>
       <a href="#">Megastar Plus</a>
       <a href="#">Megafolic</a>
       <a href="#">Lenispass</a>
       <a href="#">Leutrofin</a>
       <a href="#">Plasigen B6</a>
       <a href="#">Zincospray</a>
  </div>
</div>
 
    <div class="dropdown">
  <button class="dropbtn">Linea Adulti</button>
  <div class="dropdown-content">
    <a href="#">Megastar Complex</a>
       <a href="#">Megaflor 50</a>
       <a href="#">Glutaliver</a>
       <a href="#">Neuroclar</a>
        <a href="#">Afrovir</a>
       <a href="#">Plasigen B6</a>
       <a href="#">Venil Plus schiuma</a>
       <a href="#">Venil Plus cpr</a>
    
        </div>
</div>
    <div class="dropdown">
  <button class="dropbtn">Dispositivi Medici</button>
  <div class="dropdown-content">
    <a href="#">Cicatrix crema</a>
    <a href="#">Cicatrix gel</a>
    <a href="#">Cicatrix spray</a>


 
 </div>
</div> 
 <button class="dropbtn">Contatti</button>
</body>
</html>
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.274
328
83
se tu non segui quello che ti suggerisco è inutile che io continui a scrivere!
Lascia perdere il tuo codice e adotta quello della mia demo che funziona bene!!!!!!
Oltre a averti allegato in un file zip tutto il necessario lo puoi anche copiare visualizzando il codice della mia pagina online.
Comunque te lo posto anche!
Pagina index.html:
HTML:
<!doctype html>
<html>
<head>
<title></title>
<link href="cm-style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
    background-color: #FFFFFF;
}
</style>
<meta charset="utf-8">
</head>

<body>
<div id="menu">
  <ul id="cm-nav">
    <li><a href="#" target="_self">Home</a></li>
    <li><a href="#" target="_self" class="arrow no-click">Linea Peditrica</a>
      <ul>
        <li><a href="#" target="_self">Megastar Junior</a></li>
        <li><a href="#" target="_self">Megastar ABD</a></li>
        <li><a href="#" target="_self">Megastar K</a></li>
        <li><a href="#" target="_self">Megastar Plus</a></li>
        <li><a href="#" target="_self">Mgafolic</a></li>
        <li><a href="#" target="_self">Lenispass</a></li>
        <li><a href="#" target="_self">Leutrofin</a></li>
        <li><a href="#" target="_self">Plasigen B6</a></li>
        <li><a href="#" target="_self">Zincospray</a></li>
       </ul>
     </li>
    <li><a href="#" target="_self" class="arrow no-click">Linea Adulti</a>
      <ul>
        <li><a href="#" target="_self">Megafior50</a></li>
        <li><a href="#" target="_self">Megastar Complex</a></li>
        <li><a href="#" target="_self">Neuroclar</a></li>
       </ul>
     </li>
    <li><a href="#" target="_self" class="arrow no-click">Medical Devices</a>
      <ul>
        <li><a href="#" target="_self">Cicatrix Crema</a></li>
        <li><a href="#" target="_self">Cicatrix Gel</a></li>
        <li><a href="#" target="_self">Cicatrix Spray</a></li>
       </ul>
     </li>
    <li><a href="#" target="_self">Contatti</a></li>
  </ul>
</div>
</body>
</html>
File cm-style.css
Codice:
#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

#cm-nav > li > a.arrow {background-image: url(arrow-down.gif)}

#menu {
    width: 526px;
    margin: 0 auto;
}

ul#cm-nav ,
ul#cm-nav ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li {
 list-style-type: none;
 width: auto;
 position: relative;
 float: left;
 padding: 0px;
 margin: 3px;
 list-style-image: none
}

ul#cm-nav li li {
 width: auto;
 float: none
}

#cm-nav a {
 text-decoration: none;
 border-top: black 1px solid;
 font-family: verdana;
 border-right: black 1px solid;
 background: #d6d5f0;
 white-space: nowrap;
 border-bottom: black 1px solid;
 text-align: left;
 padding: 5px;
 border-left: black 1px solid;
 display: block
}

#cm-nav a:focus {
 outline-width: medium;
 outline-style: none;
 outline-color: invert
}

#cm-nav a.no-click {cursor: default}

#cm-nav li a {margin: -1px -1px 0px 0px}

#cm-nav li li a {margin: 0px 0px -1px}

#cm-nav > li > a.arrow {padding-right: 14px}

#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 position: absolute;
 z-index: 999;
 display: none
}

#cm-nav li:hover ul {display: block}

#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}

#cm-nav li:hover ul {margin-left: 0px}

#cm-nav ul ul {
 left: -1px;
 top: 1px
}

#cm-nav li {top: -1px}

#cm-nav a {font-weight: bold}

#cm-nav a {border-color: #000000}

#cm-nav a {color: #ffffff}

#cm-nav a {background-color: #02004a}

#cm-nav li:hover > a {background-color: #fcfcfc}

#cm-nav li:hover > a {color: #020047}

#cm-nav a {font-size: 10pt}
Immagini per il menu
arrow-down.gif
arrow-right.gif