Foros del Web » Creando para Internet » CSS »

Css: no puedo centrar un menu de css en blogger

 Estas en el tema de Css: no puedo centrar un menu de css en blogger en el foro de CSS en Foros del Web. Hola!! estoy teniendo dificultades, por no decir que estoy en guerra con este código de css! ja! necesito centrarlo y pese a todas las pruebas ...
  #1 (permalink)  
Antiguo 26/05/2012, 18:12
 
Fecha de Ingreso: mayo-2012
Mensajes: 3
Antigüedad: 11 años, 11 meses
Puntos: 0
Sonrisa Css: no puedo centrar un menu de css en blogger
Hola!! estoy teniendo dificultades, por no decir que estoy en guerra con este código de css! ja! necesito centrarlo y pese a todas las pruebas queda alineado a la izquierda. ademas cuando quiero acceder al sub menu, desaparece rapido y no llego a clickearlo....alguien me puede ayudar??
acá esta el código! Graciiaaaaasss!!!

<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 1px 1px 0px;
background-color:#8C0520;
background-repeat:repeat;
border-color:#A6A6A6;
border-width:0px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:195.3px;
}
ul.pureCssMenu li{
display:block;
margin:1px 0px 0px 1px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#8C0520;
border-width:0px;
border-color:#FCEEB0;
border-style:solid;
text-align:left;
text-decoration:none;
padding:5px;
_padding-left:0;
font:bold 13px Georgia;
color: #C69664;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#A6A6A6; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#8C0520;
border-color:#4C99AB;
border-style:solid;
font:bold 13px Georgia;
color: #630014;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#8C0520;
border-color:#4C99AB;
border-style:solid;
font:bold 13px Georgia;
color: #630014;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_blue_2.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:8px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white_2.gif)}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
  #2 (permalink)  
Antiguo 26/05/2012, 19:13
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Css: no puedo centrar un menu de css en blogger
Hola Pili, Bienvenid@ al foro.

Te falta el código html para ver donde se aplican esos estilos css.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 27/05/2012, 02:22
 
Fecha de Ingreso: mayo-2012
Mensajes: 3
Antigüedad: 11 años, 11 meses
Puntos: 0
Sonrisa Respuesta: Css: no puedo centrar un menu de css en blogger
Hola! Gracias C2am!!
el código de la plantilla es este...
traté de centrarlo directamente sobre el gadget con <div align="center">
</div> en html/java script
pero no paso nada.. así q entre a tocar el código este enorme y ya estoy muy perdida...ja!
muchas gracias cualquier dato es bienvenido!!! grax!!!

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

.content-outer {
font-size: 92%;
}

.body-fauxcolumns .cap-top {
margin-top: 30px;
background: $(body.background.overlay);
height: $(body.background.overlay.height);
}

.content-inner {
padding: 0;
}

/* Header
----------------------------------------------- */
.header .widget {
margin-top: 0px;
margin-bottom: 0px;
width: 1000px;
padding: 0px;
}
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 20px;
padding-right: 20px;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 2px 2px rgba(0, 0, 0, .1);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: 140%;
color: $(description.text.color);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section {
margin: 0 20px;
}

.tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels {
margin-left: -11px;
margin-right: -11px;

background-color: $(tabs.background.color);
border-top: $(tabs.border.size) solid #ffffff;
border-bottom: $(tabs.border.size) solid #ffffff;

-moz-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
-goog-ms-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
}

.tabs-inner .PageList .widget-content,
.tabs-inner .LinkList .widget-content,
.tabs-inner .Labels .widget-content {
margin: -3px -11px;

background: transparent $(tabs.background.outer) no-repeat scroll right;
}

.tabs-inner .widget ul {
padding: 2px 25px;
max-height: 34px;

background: transparent $(tabs.background.inner) no-repeat scroll left;
}

.tabs-inner .widget li {
border: none;
}

.tabs-inner .widget li a {
display: inline-block;

padding: .25em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);

margin: 0 0 .5em;
}

h2.date-header {
font: $(date.font);
color: $(date.text.color);
}

/* Main
----------------------------------------------- */
.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 0 5px;
}

.main-outer {
margin-top: $(main.cap.height);
background: $(main.background);
}

.main-inner {
padding-top: $(main.padding.top);
}

.main-cap-top {
position: relative;
}

.main-cap-top .cap-right {
position: absolute;

height: $(main.cap.height);
width: 100%;

bottom: 0;

background: transparent $(main.cap.image) repeat-x scroll bottom center;
}

.main-cap-top .cap-left {
position: absolute;

height: 245px;
width: 280px;
right: 0;
bottom: 0;

background: transparent $(main.cap.overlay) no-repeat scroll bottom left;
}
/* Widgets
----------------------------------------------- */
.widget ul, .widget #ArchiveList ul.flat {
padding: 0;
list-style: none;
}

.widget ul li, .widget #ArchiveList ul.flat li {
padding: .35em 0;
text-indent: 0;
border-top: dashed 1px $(widget.alternate.text.color);
}

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}

.widget .post-body ul {
list-style: disc;
}

.widget .post-body ul li {
border: none;
}

.widget .zippy {
color: $(widget.alternate.text.color);
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;

background: #fff;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

.post-body img, .post-body .tr-caption-container {
padding: 8px;
}

.post-body .tr-caption-container {
color: #333333;
}

.post-body .tr-caption-container img {
padding: 0;

background: transparent;
border: none;

-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

/* Footer
----------------------------------------------- */
.footer-outer {
color:$(footer.text.color);
background: $(footer.background);
}

.footer-outer a {
color: $(footer.link.color);
}

.footer-outer a:visited {
color: $(footer.link.visited.color);
}

.footer-outer a:hover {
color: $(footer.link.hover.color);
}

.footer-outer .widget h2 {
color: $(footer.widget.title.text.color);
}

]]></b:skin>

<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='0px'/>

<![CDATA[
body {
min-width: $(content.width);
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}

.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}

.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}

.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}

.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}

.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}

#layout {
min-width: 0;
}

#layout .content-outer {
min-width: 0;
width: 800px;
}

#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
[COLOR="rgb(255, 140, 0)"]aca pongo el css[/COLOR]
</head>

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content'>
<div class='content-fauxcolumns'>
<div class='fauxcolumn-outer content-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content-outer'>
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'/>
<div class='content-inner'>

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='APACHETA SALA/ESTUDIO (cabecera)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>



saludos!!!
  #4 (permalink)  
Antiguo 27/05/2012, 04:35
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Css: no puedo centrar un menu de css en blogger
pili_bowie

En el foro de css, cuando se solicitan códigos, el html es el generado por el navegador, nunca la programación.
Mejor ponga mejor la dirección del blog.
Mientras, mire a ver si algún caso de estos le ayuda.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 27/05/2012, 14:45
 
Fecha de Ingreso: mayo-2012
Mensajes: 3
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: Css: no puedo centrar un menu de css en blogger
Uh, mis disculpas!
me sirivó mucho la respuesta igual.
gracias!

Etiquetas: hover, fondo, bloggers
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:54.