[SOLUCIONADO] Posición correcta de menú

[carlosuc99]

Buenas,

En primer lugar no sé si esto debería estar aquí o en HTML.

Tengo un menú, a la altura de este, pero un poco antes está el logo de la web. El problema es que la imagen carga un poco más tarde que el menú por lo que el menú ocupa el hueco de la imagen y cuando esta carga va a su verdadero sitio.

Cómo puedo hacer para que el menú ya arranque desde su sitio??
index.php con menús:

Código HTML:

<div class="row-2">
                    <nav>
                        <ul class="menu">
                          <li><img class="logo" src="xxx/logo1.png"><li>
                          <li><a href="index.php">Home Page</a></li>
                          <li><a href="./index_public.php?page=about_us">Sobre nosotros</a></li>
                          <li><a href="./index_public.php?page=pilots_public">Pilotos</a></li>
                          <li><a href="./index_public.php?page=fleet_public">Flota</a></li>
                          <li><a href="./index_public.php?page=contacts_form">Contacta</a></li>
                        </ul>
                    </nav>
                </div>
 

y el css

Código CSS:

.menu {width:100%}
.menu li {float:left; margin-right:1px}
.menu2 li {float:left;position:left;margin-left:2%; margin-right:1px}
.menu li.last-item {margin:0}
.menu li a {display:inline-block;width:100%;font-size:20px;padding:1px 15px 4px;margin-top:40px;color:#0078D2;background:#FFF;text-align:center;}
.menu li a.active, .menu li a:hover {color:#4db4fa;background:#FFF;padding:1px 15px 4px;margin-top:40px}
.logo {display:block;text-indent:-5000px;margin:2px 0 30px 50px}
.row-2 {width:100%;min-height:85px;position:relative;z-index:1}
 

[pzin]

Siendo un tema relativo al diseño, si, está bien publicado en CSS.

Simplemente indica el tamaño de la imagen:

Código CSS:

.logo {
  width: 200px;
}
 

Con eso en principio deberías de solucionar ese pequeño problema.

Desde el punto de vista de la semántica, no es correcto poner el logotipo dentro de la lista, ya que realmente el logo no forma parte de esa lista de enlaces.

Lo que deberías de hacer es sacarlo de ahí, ponerlo antes del elemento ul y realmente con flotarlo te bastaría:

Código CSS:

<nav>
  <img class="logo" src="xxx/logo1.png">
  <ul class="menu">
    <li><a href="index.php">Home Page</a></li>
    /* Etc.. */
 

Luego en tu CSS:

Código CSS:

nav .logo {
  float: left;
}
 

[carlosuc99]

Perfecto, va de perlas!!