¿Cómo colocar el menú del theme descargado con CSS?

terrimon · 26 Sep 2012

Hola betas, busco a ver si me podeís echar una mano para colocar un poco mas abajo el menú de este theme que me descargué. TEMA. El menú es el que viene en la foto del link que dejé, es decir, a la izquierda viene el logo (270 x 50 pixels) seguido del menú. Lo que quiero es dejar la primera fila para solo el logo (cambiar el tamaño de 270 x 50 pixels a 1000x50 o lo que sea), que ocupe hasta el final de la pantalla y el menú bajarlo una línea y que ocupe la totalidad de la pantalla también. Quedaría la primera fila el logo en una linea, en la segunda línea en menú y abajo el blog en sí.

Aquó el código(no esta entero):

Insertar CODE, HTML o PHP:

/* =Reset CSS

-------------------------------------------------------------- */


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td {

margin: 0;

padding: 0;

}


fieldset,img,abbr {

border: 0;

}


address,caption,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,th,var {

font-style: normal;

font-weight: 400;

}


caption,th {

text-align: left;

}


q:before,q:after {

content: '';

}


a {

text-decoration: none;

}



/* =Common styles

-------------------------------------------------------------- */


body {

background: #F7F7F1 url(../images/bg.png) 0 0 repeat;

color: #516064;

font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;

font-size: 88%;

font-weight: 300;

line-height: 23px;

text-align: center;

}


a,

a:link, 

a:visited {

background: transparent;

color: #999999;

cursor: pointer;

outline: none;

text-decoration: underline;

}


a:hover, 

a:active {

color: #252525;

text-decoration: underline;

}


h1, 

h2, 

h3, 

h4, 

h5, 

h6 {

font-family: Helvetica, Arial, Geneva, sans-serif;

font-weight: bold;

margin: 5px 0;

}


input.text,

textarea,

.comment-form-author input,

.comment-form-email input,

.comment-form-url input {

border: 1px solid #cccccc;

border-top-color: #888888;

outline: 0;

padding: 3px 5px 3px 5px;

}


input.button,

#button-submit-comment {

background-color: #333333;

background-image: -moz-linear-gradient(center top, #525252, #333333);

background-image: -webkit-gradient(linear, left top, left bottom, from(#525252), to(#333333));

border: none;

color: #ffffff;

cursor: pointer;

padding: 3px 5px 3px 5px;

}



/* =WordPress standart styles

-------------------------------------------------------------- */


.aligncenter {

display: block;

margin-left: auto;

margin-right: auto;

}


.alignleft {

float: left;

}


.alignright {

float: right;

}


/* =Structure

-------------------------------------------------------------- */


#container {

margin: 0 auto;

width: 100%;

}


#page {

margin: 0 auto;

text-align: left;

width: 960px;

}


.layout-both #page {

width: 990px;

}


.menu {

clear: left;

height: 35px;

list-style: none;

position: relative;

z-index: 50;

}


#header {

clear: both;

height: 100px;

}


#content-box {

background: #F7F7F7;

box-shadow: 0 0 3px #dddddd;

-moz-box-shadow: 0 0 3px #dddddd;

-webkit-box-shadow: 0 0 3px #dddddd;

clear: both;

overflow: hidden;

zoom: 1;

}


#content {

background: #ffffff;

float: left;

width: 680px;

}


.layout-left #content {

float: right;

width: 680px;

}


.layout-both #content {

margin: 0 200px;

width: 590px;

}


.error404 #content {

min-height: 400px;

width: 100%;

height: 400px;

}


.page-template-page-no-sidebar-php #content {

width: 100%;

}


.sidebar {

float: right;

overflow: hidden;

width: 270px;

}


.layout-left .sidebar {

float: left;

}


.layout-both .sidebar {

float: left;

width: 180px;

}


.layout-both #sidebar-1 {

margin: 0 0 0 -100%;

}


* html .layout-both div#sidebar-1 {

left: 20px;

position: relative;

}


.layout-right #sidebar-2 {

clear: right;

}


.layout-left #sidebar-2 {

clear: left;

}


.layout-both #sidebar-2 {

margin: 0 0 0 -180px;

}


#footer {

border-top: 1px solid #B5D5E8;

clear: left;

margin: 20px 0 20px 0;

overflow: hidden;

}



/* =Navigation menu

-------------------------------------------------------------- */


#navigation-top {

background-color: #ffffff;

background-image: -moz-linear-gradient(center top, #3183B5, #2F749E);

background-image: -webkit-gradient(linear, left top, left bottom, from(#3183B5), to(#2F749E));

border-radius: 2px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

box-shadow: 0 0 3px #255F82;

-moz-box-shadow: 0 0 3px #255F82;

-webkit-box-shadow: 0 0 3px #255F82;

left: 310px;

position: relative;

top: 30px;

width: 650px;

height: 50px;

z-index: 597;

}


#navigation-top .menu {

float: left;

margin: 0 0 0 10px;

position: absolute;

width: 400px;

} 


.menu li {

float: left;

position: relative;

vertical-align: middle;

zoom: 1;

}


.menu li.hover, 

.menu li:hover {

cursor: default;

position: relative;

z-index: 599;

}


.menu ul {

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

left: 0;

list-style: none;

position: absolute;

top: 100%;

visibility: hidden;

z-index: 598;

}


.menu ul li {

float: none;

}


.menu ul ul {

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

left: 99%;

position: absolute;

top: 0;

}


.menu li:hover > ul {

visibility: visible;

}


.menu a, 

.menu a:link, 

.menu a:visited {

color: #ffffff;

display: block;

font-size: 15px;

line-height: 50px;

padding: 0 10px 0 10px;

text-decoration: none;

text-shadow: -1px 1px 1px #333333;

}


.menu a:hover, 

.menu a:active, 

.menu .current_page_item a {

background: #378CBF;

color: #FFFFCC;

text-decoration: none;

text-shadow: none;

}


.menu ul a, 

.menu ul a:link, 

.menu ul a:visited {

background: #2F749E;

border: none;

border-bottom: 1px solid #2F749E;

border-right: 1px solid #2F749E;

display: block;

line-height: 30px;

width: 200px;

}


.menu ul a:hover, 

.menu ul a:active {

background: #378CBF;

}



/* =Header

-------------------------------------------------------------- */


#logo {

float: left;

position: absolute;

top: 20px;

z-index: 599;

}


#logo a {

color: #2E72A1;

font-weight: bold;

font-family: Helvetica Neue,Arial,sans-serif;

font-size: 2.4em;

font-weight: 300;

letter-spacing: -2px;

line-height: 70px;

padding-top: 60px;

text-decoration: none;

text-shadow: 1px 1px 1px #ffffff;

}


#header-top-links {

font-size: .8em;

line-height: 1em;

position: absolute;

text-align: right;

top: 5px;

width: 960px;

z-index: 596;

}


#header-top-links ul,

#header-top-links li {

list-style: none;

}


#header-top-links li {

display: inline;

}


#header-top-links a {

color: #007FB0;

margin: 0 0 0 20px;

text-decoration: none;

}


#header-top-links a:hover {

color: #0088CC;

text-decoration: underline;

}


#search-box-top {

float: right;

height: 50px;

width: 220px;

}


#search-box-top input.text {

background-color: #E1E8ED;

background-image: -moz-linear-gradient(center top, #E1E8ED, #ffffff);

background-image: -webkit-gradient(linear, left top, left bottom, from(#E1E8ED), to(#ffffff));

border-top: 1px solid #525252;

border-right: none;

border-bottom: 1px solid #333333;

border-left: 1px solid #525252;

border-radius: 3px 0 0 3px;

-moz-border-radius: 3px 0 0 3px;

-webkit-border-radius: 3px 0 0 3px;

display: block;

float: left;

margin: 10px 0 0;

outline: none;

padding: 0 5px;

width: 155px;

height: 25px;

}


#search-box-top input.button {

background: #333333 url("../images/sprite.gif") 0 0 no-repeat;

border: none;

border-radius: 0 3px 3px 0;

-moz-border-radius: 0 3px 3px 0;

-webkit-border-radius: 0 3px 3px 0;

cursor: pointer;

font-size: 0;

line-height: 0;

margin: 10px 0 0;

overflow: hidden;

text-indent: -9999px;

width: 33px;

height: 27px;

}



/* =Entry

-------------------------------------------------------------- */

Si alguno me pudiera echar una mano le estaría agradecido. Gracias!!😕😕

Cristianqc · 13 Oct 2012

Hola Terrimon! Mirá intentá con estos estilos:

Primero en #header dejalo de esta forma:

Insertar CODE, HTML o PHP:

#header {
   clear: both;
}

Segundo en #logo dejalo de esta forma:

Insertar CODE, HTML o PHP:

#logo {
   z-index: 599;
}

Tercero en #navigation-top dejalo de esta form:

Insertar CODE, HTML o PHP:

#navigation-top {
   background-color: #ffffff;
   background-image: -moz-linear-gradient(center top, #3183B5, #2F749E);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#3183B5), to(#2F749E));
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   box-shadow: 0 0 3px #255F82;
   -moz-box-shadow: 0 0 3px #255F82;
   -webkit-box-shadow: 0 0 3px #255F82;
   height: 50px;
   z-index: 597;
}

Espero te sirva!.

¿Cómo colocar el menú del theme descargado con CSS?

terrimon

Cristianqc

Temas similares