Menu e logo responsive problema centramento

mattex94

Utente Attivo
10 Ago 2009
41
0
0
Ciao a tutti, ho un problema nel centrare nella stessa riga il menu con il logo.
Vi posto l'html e il relativo css del menu e del div in cui sono inseriti.
Questo è il risultato che ottengo, invece che essere tutto nella stessa riga:
Senza-titolo-1.jpg

Aspetto una vostra risposta, grazie!


HTML
Codice:
 <div id="header">    <div id="logo"><img src="logo.jpg"></img></div><div class='rmm' data-menu-style = "minimal">
            <ul>
                
                <li><a href='#home'>Home</a></li>
                <li><a href='#about-me'>Natale</a></li>
                <li><a href='#gallery'>Pasqua</a></li>
                <li><a href='#blog'>Contatti</a></li>
                
            </ul>
</div>
 </div>

CSS
Codice:
#header{width: 100%;
background-color: #02468d;
}

*DA QUI PARTE IL CSS DEL MENU*
.rmm {
    position:relative;
    width:100%;
    padding:0px;
    text-align: center;
    line-height:40px !important;
    background-color: #02462d;
}
.rmm * {
    -webkit-tap-highlight-color:transparent !important;
    font-family:Arial;
}
.rmm a {
    color:#ebebeb;
    text-decoration:none;
    
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
    margin:0px;
    padding:0px;
}
.rmm ul {
    display:block;
    width:auto !important;
    margin:0 auto !important;
    overflow:hidden;
    list-style:none;
}




/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
    display:none !important;
    height:0px !important;
    width:0px !important;
}
/* */




.rmm .rmm-main-list li {
    
    float: left;
    margin:0px !important;
}
.rmm-toggled {
    display:none;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
.rmm-button:hover {
    cursor:pointer;
    
}
.rmm .rmm-toggled ul {
    display:none;
    margin:0px !important;
    padding:0px !important;
}
.rmm .rmm-toggled ul li {
    display:block;
    margin:0 auto !important;
}




/* MINIMAL STYLE */


.rmm.minimal a {
    color:#ffffff;
}
.rmm.minimal a:hover {
    opacity:0.7;
    
}
.rmm.minimal .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
}
.rmm.minimal .rmm-toggled {
    width:100%;
    min-height:50px;
}
.rmm.minimal .rmm-toggled-controls {
    display:block;
    height:36px;
    color:#ffffff;
    text-align:left;
    position:relative;
}
.rmm.minimal .rmm-toggled-title {
    position:relative;
    top:9
    7px;
    left:9px;
    font-size:16px;
    color:#ffffff;
}
.rmm.minimal .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
}


.rmm.minimal .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:#ffffff;
    width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
    display:block;
    width:100%;
    text-align:center;
    padding:0px 0px 0px 0px;
    border-bottom:1px solid #dedede;
    color:#ffffff;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
    border-top:1px solid #dedede;
}
 

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
se vuoi logo e menu sulla stessa riga devi impostare ad entrambi il float left altrimenti finiranno sempre uno sotto l'altro. deve però esserci sufficiente spazio orizzontale altrimenti il menu va a capo ovviamente.
se poi vuoi che entrambi siano sulla stessa riga e centrati nella pagina devi far si che siano contenuti in un div che abbia una larghezza stabilita (non 100%) e con margini destro e sinistro impostati ad auto, in questo modo si centra nella pagina.
 

mattex94

Utente Attivo
10 Ago 2009
41
0
0
Ci sono riuscito, però il div mi occupa solo lo spazio del menu, quindi i contenuti di sotto si affiancano al menu. Mettendo nel div header position: absolute, il menu occupa tutto lo schermo, ma i contenuti adesso lo sovrappongono. Come posso fare per far si che i contenuti di sotto si accorgano che c'è il menu?
 

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
allora prova così, scopri quanto è largo il menu e quanto è largo il logo e poi imposti la larghezza del div che li contiene alla somma delle loro larghezza. in pratica se il logo è largo 100px e il menu 300px fai il div largo 400px. in questo modo mettendo sia logo che menu in float left dovrebbero starci
 

mattex94

Utente Attivo
10 Ago 2009
41
0
0
sono già impostati cosi! solo che ho messo direttamente 100%. Ti copio il resto del css che ti può servire a verificare. Nel contenitore sono inseriti tutti i contenuti che si sovrappongono (rimanendo in ordine) al menu. Nell header il menu e il logo.
Il foglio di stile che ho pubblicato prima riguarda tutto il menu. Grazie mille per l'assistenza

Codice:
@charset "utf-8";
/* CSS Document */
body {
background-color: #dbdbdb;
image-opacity: 0.1;
margin: 0px;
  padding: 0px; 
background-size: cover;
background-opacity:3.0;
font-size =1em;            
}

#header{
position: absolute;
width: 100%;
background-color: #02468d;
margin: auto;
}

#contenitore{
max-width: 120em; 
margin: auto;}

#logo {
float:left;
}
 

MikiProgrammer

Utente Attivo
9 Mag 2015
63
2
8
Scusa, basta che fai:
HTML:
<center><div id="...">Ci metti quello che vuoi</div></center><br>

Così ti viene al centro quello che metti nel div
 
Discussioni simili
Autore Titolo Forum Risposte Data
T problemi con dati menu a tendina HTML e CSS 2
A menu a tendina php PHP 1
M Accordion menu e posizione div HTML e CSS 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
U [Javascript] Menu responsive non scompare col click sui link Javascript 0
A [Javascript] Problemi menu bootstrap Javascript 1
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Menu a fisarmonica che non funziona in chrome HTML e CSS 2
M [Javascript] far scomparire il menu al click Javascript 0
Kolop [HTML] Menu a colonne stessa lunghezza HTML e CSS 7

Discussioni simili