[HTML] piccolo problema di impaginazione

Angelo Russo

Angelo Russo

Nuovo Utente
8 Mag 2018
23
0
1
48
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:
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!
 
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
 
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
 
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
 
Ti allego uno zip con i file per un esempio di come potrebbe essere
DEMO
 

Allegati

Ultima modifica:
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!!!
 
Che significa niente da fare? Se guardi la mia demo unziona benissimo ed è centrata come la volevi tu!
Clicca su demo
 
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
 
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:
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
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

S
Creare un bollettino postale in html o altro linguaggio
Risposte
3
Visite
2K
HTML e CSS
Fra_23
F
M
variabile javascript su link html
Risposte
5
Visite
2K
Javascript
mizar1966
M
G
Pagina html in stringa
Risposte
2
Visite
2K
PHP
Fra_23
F
E
Sostituzione Elemento Html
Risposte
3
Visite
2K
PHP
WmbertSea
WmbertSea
G
Elementi HTML
Risposte
1
Visite
1K
HTML e CSS
Alex Mercer
A
K
Visualizzare del html responsive in una Webview
Risposte
0
Visite
2K
Sviluppo app per Android
klomax
K
T
Domanda valutazione html LinkedIn 2022 pt3
Risposte
7
Visite
1K
HTML e CSS
tonyparco22
T
T
Domanda valutazione html LinkedIn 2023 pt2
Risposte
16
Visite
2K
HTML e CSS
tenusiajob
T
T
Domanda valutazione html LinkedIn 2023 pt1
Risposte
1
Visite
581
HTML e CSS
WmbertSea
WmbertSea
MarcoGrazia
Salvataggio HTML in database
Risposte
2
Visite
951
PHP
MarcoGrazia
MarcoGrazia
K
posizionare variabile da pagina html all'iframe.
Risposte
1
Visite
1K
Javascript
WmbertSea
WmbertSea
peppe0703
Come Estrarre dati da db wordpress e richiamarli in html esterno
Risposte
0
Visite
2K
HTML e CSS
peppe0703
peppe0703
L
problema collegamento file css con html
Risposte
1
Visite
2K
HTML e CSS
WEBLEADERS
W
D
Informazioni da XAMPP su HTML
Risposte
0
Visite
892
PHP
dalianaa
D
R
Immagini html
Risposte
2
Visite
2K
HTML e CSS
GraphicBoy
G
K
File audio in html, chi mi può aiutare?
Risposte
0
Visite
2K
HTML e CSS
K5$
K
K
  • Bloccata
Aiuto con file audio in html
Risposte
1
Visite
1K
HTML e CSS
Max 1
Max 1
Antonio67
Lanciare file shell bash da html
Risposte
2
Visite
2K
HTML e CSS
linoma
L
M
Riportare in tabella HTML dati estratti con query SQL
Risposte
0
Visite
2K
MySQL
Marcello_php
M
G
Codice html
Risposte
1
Visite
2K
Javascript
iTonto
I
Alto Basso