Luca1996Olov ha detto:

Salve,
Vi scrivo perchè sto impazzendo per un codice probabilmente molto semplice, ma che non riesco a trovare.
http://paginaprovaolo.altervista.org/index2.html
Questa è la pagina che sto creando. Ho implementato un menu mobile. Credo che il float da sinistra mi impedisca di centrare il logo "immagine jpg chiamata gl". Come posso centrare l'immagine alla riga, se il menu è inserito nella riga stessa? Il logo è un'immagine prova. Come potete vedere il logo non è centrato, ma leggermente a destra rispetto al centro della riga.
Source:

Codice:

<table width="100%" align="center" border="1" bordercolor="white">
<tbody>
<tr>
<td bgcolor="red"><div id="contentmenu"> <!-- Inizio menu -->
 
      <div id="out" style="display: none;"> <!-- Menu aperto -->
          <ul>
              <a href=""><li><font color="black">Prova</font></li></a>
              <a href="mailto:[email protected]"><li><font color="black">Contattaci</font></li></a>
              <a href="tel:371"><li><font color="black">Chiamaci</font></li></a>
          </ul>
      </div>

      <div id="menu"> <!-- Menu -->
      <span class="entypo-menu"></span>
      </div>
     
        <script> <!-- Script Open/Close -->
          $( "#menu" ).click(function() {
            $( "#out" ).toggle( "slow" );
          });
        </script>


      </div><img src="gl.jpg" class="ridim" style="margin:auto; display:block" alt="Logo" title="Logo"></td>
</tr>

Grazie in anticipo.

Clicca per espandere...

Luca1996Olov ha detto:

Infinite grazie, risolto!

EDIT: Ora torna un problema, però:
Ho attributo al contentmenu il position:absolute, ovvero:

Codice:

#contentmenu {
position: absolute;
}

Il logo è quindi centrato, ed è ok, ma all'apertura del menu, il button menu scrolla insieme al menu aperto, ma con questo il resto del sito non viene scrollato verso destra.
Mi spiego in parole semplici: Apro il menu (situato a sinistra, che scrolla verso destra), ma il resto della pagina resta lì dov'è, senza scrollare verso destra, seguendo il menu. Come posso risolvere?

Clicca per espandere...

TheSeeker ha detto:

A prescindere dal JavaScript, quando si apre il menu, per il CSS dovresti dare una larghezza di N% al menu e 100-N% al box principale, e applicare float: left al menu.

Codice:

#menu, #content {
     padding: 0;
     margin: 0;
}

#menu {
    width: 60%;
    float: left;
}

#content {
    width: 40%;
}

Non ho provato ma dovrebbe andare @Rendernos che dici?



Ti consiglio altamente di riscrivere il sito senza usare le tabelle.

Clicca per espandere...

#menu, #content {
     display: inline-table;
     padding: 0;
     margin: 0;

      vertical-align: middle
}

#menu {
    width: 60%;
}

#content {
    width: 35%;
}

Rendernos ha detto:

Io sconsiglio l'utilizzo della proprietà float.

Codice:

#menu, #content {
     display: inline-table;
     padding: 0;
     margin: 0;

      vertical-align: middle
}

#menu {
    width: 60%;
}

#content {
    width: 35%;
}

Resterà un margine di 5% quindi per centrarlo, aggiungi un altro coteniotre, per #menu & #content
assegnali il valore table alla proprietà display ed il valore center alla proprietà text-align

Clicca per espandere...

TheSeeker ha detto:

Perché sconsigli float? E perché usi display: inline-table?

Clicca per espandere...

Rendernos ha detto:

1. Perché usando la proprietà float il padre non terrà conto dell'altezza dei figli che la usano, sembra quasi che gli elementi che ne facciano uso vengono mandati fuori dal flusso del documento esattamente come fa la proprietà position con valori absolute o fixed

2. Perché utilizzando le tabelle (in CSS) io creo ottime grid system centrate anche verticalmente (vertical-align funziona solo con i display table-cell e inline-table);

uso inline-table e non table-cell perché a differenza dell'ultimo mi va a capo da solo e quindi la maggior parte delle volte io ho già tutto responsive, non uso quasi mai le media query e puoi creare quante colonne ti pare

nel esempio prima ho fatto 35% e 60%, per farlo andare a capo a certe risoluzioni, basta aggiungere un po di margine non servono nemmeno qui le media query

e possibile impostare anche la width su auto e si adatta da solo.

Clicca per espandere...

Rendernos ha detto:

1. Perché usando la proprietà float il padre non terrà conto dell'altezza dei figli che la usano, sembra quasi che gli elementi che ne facciano uso vengono mandati fuori dal flusso del documento esattamente come fa la proprietà position con valori absolute o fixed

Clicca per espandere...

Luca1996Olov ha detto:

Ringrazio molto per l'aiuto, ma purtroppo nemmeno così funziona. il contentmenu viene visualizzato come se fosse fuori dalla riga, quindi esternato al body
Vi lascio il mio index, e l'index modificato come appena fatto, spero possiate aiutarmi

Clicca per espandere...