[AYUDA] HTML + CSS (Imitando Barra Google)

Archivado
Hola me ha dado por practicar un poco con HTML y CSS que hace tiempo que los tengo aparcados y me ha dado por probar a imitar/copiar la barra superior de google (La actual).

La parte del html es bien simple una lista numerada dentro de un <header>: <header> <ol> <li>+YOU</li> <li>Web</li> </ol> </header>

HTML

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>My Personal WebSite</title>
      <meta name="description" content="This is My personal Website blablablabla...">
      <link rel="stylesheet" href="css\template.css">
   </head>

   <body>
   
      <header>
         <ol class="Gtab">
            <li>   <a href="http://plus.google.com">+You</a>      </li>
            <li>   <a href="#">Busqueda</a>      </li>
            <li>   <a href="#">Imagenes</a>      </li>
            <li>   <a href="#">Maps</a>         </li>
            <li>   <a href="#">Play</a>         </li>
            <li>   <a href="#">YouTube</a>         </li>
            <li>   <a href="#">Noticias</a>      </li>
            <li>   <a href="#">Gmail</a>         </li>
            <li>   <a href="#">Drive</a>         </li>
            <li>   <a href="#">Calendar</a>      </li>
            <li>   <a href="#">Mas</a>          </li>
         </ol>
      </header>
            
   </body>

</html>


La parte del CSS he conseguido que se comparte casi 1:1 como la barra de gogle tanto en tamños como colores etc..
(Excepto el desplegable del "Mas" pero no es algo que me interese en estos momentos)

CSS
body
{
   background-color: rgb(241, 241, 241);   
}

header
{
   position:    absolute;
   left:       0pt;
   top:        0pt;
   width:      100%;
   min-width:   980px;
   
   border-color:       rgb(0,    0,    0);
   background-color:    rgb(45,  45,   45);   
   color:             rgb(187, 187, 187);
   
   font: 13px/27px Arial,sans-serif;
   font-weight: bold;
}


/*
   =======================================
   ============== TOP TAB ================
   =======================================
*/

   ol.Gtab         
   {
      list-style:   none outside none;
      display:    block;
      width:      720px;
      height:    30px;
      margin:      0pt;
      padding:    0pt;
      margin-left:19pt;
      overflow:    hidden;
   }

   ol.Gtab li
   {
      position:       relative;
      display:       inline-block;
      line-height:    27px;
      padding-left:     6pt;
      padding-right:    6pt;
      padding-top:   2pt;
      vertical-align:   top;
   }

   .Gtab a
   {
      text-decoration:none;
      color:    rgb(187, 187, 187);
   }

   .Gtab a:hover
   {
      color:    rgb(255, 255, 255);
   }


Veamos el resultado:

Imagen



¿CUAL ES LA DUDA ENTONCES?
Pues que desconozco el motivo, y no se como solucionarlo por tanto, que si selecciono el texto de la barra que he creado yo se me crean microespacios entre cada item de la lista.

Imagen

Me he dado cuenta que si junto el final de un item con el principio de otro: <li> ALGO 1 </li><li> ALGO 2 </li>
Se solucionan los microespacios pero me niego a meter todo en una linea ilegible (en el HTML) busco alguna solucion por CSS.

Espero sus respuestas [fumando]
puedes usar la propiedad list_tyle_type: none; para que no muestre el puntito de las ol.
Mañana lo probare a ver si soluciona mi problema pero en principio "los círculos" ya los he quitado con otra propiedad aunque desconozco si eso sera el problema de los micro espacios.

Mañana os cuento =D
Al ol.Gtab, agregale un display:table;

Es increíble, tanto querer dejar las tablas atrás, para que muchos de los problemas con CSS se tengan que solucionar haciendo que interprete las demás etiquetas como tablas. :-|
Azsche escribió:puedes usar la propiedad list_tyle_type: none; para que no muestre el puntito de las ol.


Probado y solo funciona para quitar el puntito (como bien dices), pero dicha cosa ya lo estaba haciendo con esta otra propiedad CSS --> list-style: none outside none;

Y no es el problema de los microespacios :(

dnL7up escribió:Al ol.Gtab, agregale un display:table;

Es increíble, tanto querer dejar las tablas atrás, para que muchos de los problemas con CSS se tengan que solucionar haciendo que interprete las demás etiquetas como tablas. :-|


He probado a cambiar el valor del display (del ol.Gtab) de block a table, incluso el de li de un inline-block a inline-table, y no soluciona nada :(
El problema sigue sucediendo, no es problema de que sean "bloques", los bloques dan el mismo resultados que las tablas.


Gracias de todas maneras chicos ;)
Aunque aun siguen sucediendo dichos microespacios [mad] [mad]
Además del display table en el ol.Gtab, al ol.Gtab li cambiale el inline-block, por inline.
dnL7up escribió:Además del display table en el ol.Gtab, al ol.Gtab li cambiale el inline-block, por inline.

Increible... Gracias a ti he descubierto el fallo.

El fallo ocurre cuando usas inline-table o inline-block si usas solamente "inline" desaparece [tadoramo] [tadoramo] [tadoramo]
No hace falta siquiera poner el ol.Gtab en display:table con display:block tambien funciona la cosa es en el li poner solamente "inline" :p :p
6 respuestas
Archivado
Volver a General