Mis estilos - my styles

Styles I use in my webs and blogs.



El estilo que utilicé para ocultar la barra de navegación hay que isertarlo entre las etiquetas

El código:

<style type='text/css'>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>




EL CSS QUE USE PARA PONER UN MENU HORIZONTAL SIN IMAGENES COMO EL DE EDUCADORES EN WEB TAL COMO LO USE EN CREA TU ESPACIO BLOG


/*-- (inicia Menú superior horizontal  codigo css MENU SUPERIOR HORIZONTAL inicia) --*/

#menhorwrap{

background-color:#330099;

width: 100%;

}

#pages {

width: 100%;

margin: 0px auto;

}

#pages h2 {

display: none;

}

#pages ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#pages li {

display: inline;

}

#pages a {

padding: 0px 20px 0px 20px;

text-decoration: none;

text-transform: uppercase;

font-weight: bold;

font-size: 12px;

color: #BFFFFF;

}

#pages a:hover {

background: #FFFFBF;

color: #254360;

}


/*-- (Termina Menú superior horizontal  codigo css MENU SUPERIOR HORIZONTAL Termina) --*/


Ahora el html que inserté en la parte inferior de la plantilla:







<!--**************inicia Menu superior codigo html ************MENU SUPERIOR****-->

<div id='menhorwrap'>

<div id='pages'>

<h2>Pages</h2>

<ul>

<li class='active'><a href='http://creomiespacio.blogspot.com/' id='page1'> Inicio</a></li>

<li><a href='http://creomiespacio.blogspot.com/2009/11/hola-pagina-dem-inicio.html#comments' id='page2'>Comentarios</a></li>

<li><a href='http://educaremos.atspace.com' id='page3'>educaremos.atspace</a></li>

<li><a href='http://educa.com.mx' id='page4'>educa</a></li>

<li><a href='http://picasaweb.google.com/home' id='page5'>Picasa</a></li>

<li><a href='http://draft.blogger.com/home' id='page6'>Blogger</a></li>

</ul>

</div>

</div>

<!--termina Menu superior codigo html*********TERMINA MENU SUPERIOR************-->




/*-- (inicia MENU CON MOSAICO DE IMAGENES MENU CON MOSAICO DE IMAGENES) --*/



.boxmagazine {

padding: 10px;

border: 1px solid #330066;

margin: 0px 0px 5px;

float: left;

width: auto;

clear: both;

}





#mosaico {

margin: 0px;

padding: 0px;

}

#mosaico li {

list-style-type: none;

float: left;

width: 156px;

margin: 0px;

padding: 5px;

text-align: center;

display: block;

height: 140px;

}

#mosaico img {

width: 130px;

height:100px;

border: 1px solid #FFF;

}

#mosaico img:hover {

border: 1px solid #666;

}



/*-- (termina MENU CON MOSAICO DE IMAGENES MENU CON MOSAICO DE IMAGENES) --*/





<!--inicia tercer contenedor dentro de columna derecha (menú mosaico de imágenes) -->    

<div class='boxmagazine'>

<ul id='mosaico'>

<li><a href='http://www.educa.com.mx/'> <img alt='001. Educom' src='http://lh5.ggpht.com/_9j95CFzzpy0/TEYfrqOIYDI/AAAAAAAAAEY/BsJngGeV5nA/educa160x120.jpg' title='Educom'/></a>

001. Red educa.com.mx</li>



<li><a href='http://sallita.educa.com.mx/'><img alt='Sallita' src='http://lh5.ggpht.com/_9j95CFzzpy0/TEYaIMRmwDI/AAAAAAAAAEE/hwtlDuJiD4s/sallita.jpg' title='sallita'/></a>

002. Sallita</li>



<li><a href='http://videoeducablog.wordpress.com/'>

<img src='http://lh5.ggpht.com/_9j95CFzzpy0/TEYf2i2Q62I/AAAAAAAAAEw/jp7UceMUr2M/videoeduca160x120.jpg' title='videoeducablog'/></a>

003. Video Educa Blog</li>



<li><a href='http://blogeducatic.wordpress.com/'><img src='http://lh5.ggpht.com/_9j95CFzzpy0/TEYfqUhpR5I/AAAAAAAAAEQ/D3kvphMk7f8/blogeducatic160x120.jpg' title='blogeducatic'/></a>

004. Blog Educatic</li>



<li><a href='http://ticeducablog.blogspot.com/'><img src='http://lh5.ggpht.com/_9j95CFzzpy0/TEYf2k0kXhI/AAAAAAAAAEs/Dp-G6A1nNtM/ticeducablog160x120.jpg' title='ticeducablog'/></a>

005. Tic Educablog</li>



<li><a href='http://justlearnenglish.blogspot.com/'><img src='http://lh4.ggpht.com/_9j95CFzzpy0/TEYf2V6IQWI/AAAAAAAAAEk/IF5PaHLrCfA/s128/justlearnenglish160x120.jpg' title='justlearnenglish'/></a>

006. Just Learn English</li>



<li><a href='http://blogdesallita.blogspot.com/'><img src='http://lh6.ggpht.com/_9j95CFzzpy0/TEYfrN3H6UI/AAAAAAAAAEU/56wfZBJZlak/s128/blogsallita160x120.jpg' title='blogdesallita'/></a>

007. Blog de Sallita</li>



<li><a href='http://educaremos.atspace.com/'><img src='http://lh4.ggpht.com/_9j95CFzzpy0/TEYfsxeOtWI/AAAAAAAAAEg/vdVweOKLHTs/educaremos160x120.jpg' title='educaremos'/></a>

008. Educaremos</li>



<li><a href='http://educadorenweb.blogspot.com/'><img src='http://lh5.ggpht.com/_9j95CFzzpy0/TEZLghfU7-I/AAAAAAAAAFE/MHjNoC5Ri4s/educadores_enweb160x120.jpg' title='educadorenweb'/></a>

009. Educadores en Web</li>



<li><a href='http://comousarmiblog.blogspot.com/'><img src='http://lh6.ggpht.com/_9j95CFzzpy0/TEZCAM9_bOI/AAAAAAAAAE4/3LBgjvWWljY/s128/como_usar_miblog160x120.jpg' title='Cómo usar mi blog'/></a>

010. Cómo usar mi blog</li>



<li><a href='http://sallitaylasredesdocentes.blogspot.com/'><img src='http://lh4.ggpht.com/_9j95CFzzpy0/TEZCASAghLI/AAAAAAAAAE8/kT8HEaM8hWc/s128/sallita_redesdocentes160x120.jpgremos160x120.jpg' title='Sallita y las redes doc'/></a>

011.Sallita y las redes docentes</li>



<li><a href='http://miblogportfolio.blogspot.com/'><img src='http://lh6.ggpht.com/_9j95CFzzpy0/TEZPT3uMAFI/AAAAAAAAAFQ/EE0X4P9O0sc/miblogportfolio160x120.jpg' title='Mi Blog Portfolio'/></a>

012. Mi Blog Portfolio</li></ul>

</div>

<!--termina tercer contenedor dentro de columna derecha (menú mosaico de imágenes) -->