[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.397
338
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.397
338
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.397
338
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.397
338
83
Ti allego uno zip con i file per un esempio di come potrebbe essere
DEMO
 

Allegati

  • menu.zip
    1,8 KB · Visite: 273
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.397
338
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.397
338
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 2
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Shyson Meglio Javascript o HTML? Javascript 4
P inserimento icone social tramite html HTML e CSS 1
Z Mod_rewrite da HTML in PHP PHP 3
L Collegare un form html ad un database access Javascript 2
P HTML integrazione wordpress HTML e CSS 0
C [RISOLTO]Inserimento variabile php in input html PHP 20
L Eliminare estensione .html HTML e CSS 9
max1974 html in tooltip Javascript 0
C Risalire al php da html PHP 27
felino Esportare tabella HTML in PDF, quale libreria usare? Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
L [RISOLTO] Stampa a video risultato count in html PHP 13
V Servizio design pagina web e download in self contained html file Discussioni Varie 1
F [PHP] Form html PHP 2
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
R Aiuto sito html Offerte e Richieste di Lavoro e/o Collaborazione 3
M Estrarre dati da una select HTML PHP 3
G FORM HTML E PHP PHP 0
max1974 [HTML] Columns grid on modal form HTML e CSS 0
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
F [PHP] [HTML] Tabella cambia pagina responsive PHP 8
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
S [HTML] Effetto su testo da togliere HTML e CSS 0
M [PHP] Istruzione "echo" all'interno di codice html PHP 2
D [HTML] Aiutino su costruzione tabella :) HTML e CSS 3
diamantetredici13 [HTML] link e poi link... HTML e CSS 2
P [HTML] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font HTML e CSS 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
A [HTML] Testo mail non visualizzabile su IOS HTML e CSS 0
A [HTML] Creare sito web per eLearnig HTML e CSS 2
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1

Discussioni simili