.header
{
text-align: center;
}
Para separarlo más de la parte superior (por ejemplo), puedes incluir la etiqueta padding-top y los píxeles que quieras separar tu título. Quedaría así:
.header
{
text-align: center;
padding-top: 20px;
}
.header
{
text-align: center;
}
.header
{
text-align: center;
padding-top: 20px;
}
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
<div id='menuWrapper'>La longitud de este gadget dependerá de las pestañas y subpestañas que queramos añadir. Aquí tenemos mil y media, pero si no necesitamos tantas, las quitaremos y punto. Donde pone URL, ese es el lugar donde tendremos que pegar el enlace que sea para que nos lleve a nuestras páginas.
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>
/* Menu molón
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú: si lo dejamos en 100% ocupará todo el ancho y listo. Si queremos modificarlo, con poner el valor en píxeles que más se adapte a nuestra plantilla, vale */
height:35px; /* Alto del menú. Si lo queremos más estrechito, reducimos */
padding-left:14px;
background:#000000; /* Color del menú */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px; /* Si cambiamos el alto del menú, tendremos que cambiarlo de nuevo cada vez que veamos height */
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc; /* Color de las letras del menú */
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif; /* Fuente del menú, podemos poner la que mejor vaya con nuestro diseño, pero siempre entre comillas y después del nombre de la fuente, es importante poner una coma y dejar sans-serif; */
font-size:13px; /* Tamaño de la fuente */
font-weight:normal; /* Si queremos que esté en negrita, cambiamos normal por bold, si lo queremos en cursiva, lo cambiamos por italic */
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#000000; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px; /* Ancho de las pestañas desplegables */
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo de las segundas pestañas desplegables (justo aquí abajo) */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el ratón */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el ratón */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #1AAC00; /* Color de fondo de las pestañas que se despliegan de las sub pestañas (sí, lo sé, Inception total, pero si miramos el menú de mi cabecera vemos que son las pestañas verdes, las 2.1.1.) */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
<a style="display:scroll;position:fixed;bottom:20px;right:20px;" href="#" title="Subir"><img src="url de la imagen" /></a>Y eso es todo, todito, todo.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/><script>$(function () {$('.go-to-top').click(function () {$('html,body').animate({scrollTop: 0}, 500);return false;});});</script>
<a style="display:scroll;position:fixed;bottom:10px;right:40px;" href="#wrap" title="Subir arriba" class="go-to-top"><img src="url de la imagen" /></a>
.post-body blockquote {
border-left: 15px solid; border-color: #bf0000
border-right: 1px solid; border-color: #bf0000;
border-top: 1px solid; border-color: #bf0000;
border-bottom: 1px solid; border-color: #bf0000;
background: #ffffff;
padding: 25px;
font-size: 15px;
color: #323232;
font-family: 'Hanuman', serif;
font-style:italic;
border.radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
background-image: url('url de la imagen');
Nulla quis metus sed purus sodales ornare in id magna. Donec blandit neque vitae scelerisque ultrices. Quisque molestie tellus placerat accumsan tempor. Phasellus dignissim orci nec mauris bibendum, luctus mattis ipsum malesuada. Morbi ornare sed nisl ac scelerisque. Phasellus lobortis turpis urna, vitae sodales dui congue a. Praesent ornare ac odio id mattis. Maecenas suscipit dapibus erat. Suspendisse in mollis lacus, ullamcorper rhoncus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum dolor quis imperdiet viverra. Cras urna odio, gravida non leo ac, vulputate lobortis justo. Integer erat urna, suscipit sed posuere consequat, dictum vel orci. Integer magna dui, blandit malesuada egestas eu, efficitur facilisis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer sed turpis urna.