Como colocar o menu do theme baixado com CSS?

terrimon · 26/09/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):

Inserir CODE, HTML ou 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/10/2012

Hola Terrimon! Mirá intentá con estos estilos:

Primero en #header dejalo de esta forma:

Inserir CODE, HTML ou PHP:

#header {
   clear: both;
}

Segundo en #logo dejalo de esta forma:

Inserir CODE, HTML ou PHP:

#logo {
   z-index: 599;
}

Tercero en #navigation-top dejalo de esta form:

Inserir CODE, HTML ou 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!.

Como colocar o menu do theme baixado com CSS?

terrimon

Cristianqc

Tópicos similares