Menu texto al medio y 100% de la pagina

martines · #1 (**permalink**) 22/07/2010, 03:25

Buenas,

Lo que me gustaria es que en el menu este, los botones que solo tienen una linia como Inici, que aparezcan al medio del cuadro, igual que salen los de dos linias. Aqui dejo el codigo que tengo.

Y tambien que me ocupe el 100% de la pagina.

Gracias

Este es la parte del menu. Que esta en el archivo style.css

Código PHP:

  /* -- Menu Main Settings -- */

#imMnMn {padding-top: -6px; }

#imMnMn ul, #imMnMn ul li {margin: 0; padding: 0; list-style: none; z-index: 1000; cursor: pointer; text-align: center; }

#imMnMn ul li {position: relative; float: left; margin-bottom: -3px; padding-bottom: 10px; }

#imMnMn ul a {display: block; text-decoration: none; width: 111.5px; padding: 13px 3px 13px 3px; height: 40px !important; height: 1%; font: bold 15px Verdana; background-color: #0D69D0; color: #FFFFFF; border: 3px solid #FF8000; }

http://img810.imageshack.us/img810/7999/menumb.jpg

Y este todo el archivo que se llama style.css

Código PHP:

  /* -- General Style -- */

#imHeader {position: relative; }

#imHeader div {position: absolute; cursor: pointer; }

body {font-size: 8px; vertical-align: baseline; }

p {margin: 0; padding: 0; } 

.fb {font-weight: bold; } .fi {font-style: italic; } .fu {text-decoration: underline; } 

ul.imBullet {margin: 0 0 0 20px; padding: 0; text-align: left; } ul.imBullet li {vertical-align: middle; }

.imAlign_left {text-align: left; }

.imAlign_center {text-align: center; }

.imAlign_right {text-align: right; }

.imAlign_justify {text-align: justify; }

img.imImage {border: 0px; vertical-align: baseline; }

.imInvisible, h1 {position: absolute; top: -10000px; left: -10000px; }

.imHidden {display: none; }

.imClear {clear: left; }

.imError {padding: 5px; margin: 10px; border: 1px solid #000000; background-color: #FFFFFF; font: 11px Tahoma; text-align: center; line-height: 16pt; }

#imToolTip {position:absolute; visibility: hidden; padding: 3px; z-index: 1001; }

#imMailLink {padding-left: 20px; background: url('imemail.gif') no-repeat; }

#imZIBackg {display: none; position: absolute; text-align: center; width: 100%; background-image: url('imzibackg.png') !important; background-image: url('imblank.gif'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="res/imzibackg.png", sizingMethod="scale"); cursor: pointer; }

#imZIImage {background: #EEEEEE url('imziload.gif') no-repeat center center; border: 1px solid #333333; margin: 0 auto; }

#imZIImage img {margin: 7px; }

#imZICaption {font: 11px Tahoma; color: #000000; padding: 0 7px 7px 7px; }

#imLockTxt {margin-left: 10px; font: 11px Tahoma; color: #000000; min-height: 300px; height: auto !important; height: 300px; }

#imLockForm {margin: 5px auto; text-align: left; padding: 5px; width: 200px; }

#imLockAlert {background-color: red; color: white; padding: 0 5px 0 5px; }

.imLockLabel {display: block; margin-top: 6px; }

.imLockBtn {font: 11px Tahoma; color: #000000; background-color: #C0C0C0; border: 1px solid #222222; margin: 5px; }

.imLockFld {font: 11px Tahoma; color: #000000; border: 1px solid #222222; margin: 4px 0; vertical-align: middle; }

 
/* -- Menu Main Settings -- */

#imMnMn {padding-top: -6px; }

#imMnMn ul, #imMnMn ul li {margin: 0; padding: 0; list-style: none; z-index: 1000; cursor: pointer; text-align: center; }

#imMnMn ul li {position: relative; float: left; margin-bottom: -3px; padding-bottom: 10px; }

#imMnMn ul a {display: block; text-decoration: none; width: 111.5px; padding: 13px 3px 13px 3px; height: 40px !important; height: 1%; font: bold 15px Verdana; background-color: #0D69D0; color: #FFFFFF; border: 3px solid #FF8000; }

 
/* -- Menu Main Hover Settings -- */

#imMnMn ul a:hover, #imMnMn ul li:hover a, #imMnMn ul li.iehover a {background-color: #FFFFFF; color: #007DCD; }

 
/* -- Menu Main Images -- */

#imMnMn a.imMnLv {background-image: url('imiconmenu.gif'); background-position: center right; background-repeat: no-repeat; }

 
/* -- Menu Level -- */

#imMnMn ul ul {display: none; position: absolute; top: 0px; left: 122px; }

#imMnMn ul ul ul {top: 0; left: 145px;}

#imMnMn ul li:hover li a, #imMnMn ul li.iehover li a, #imMnMn ul li:hover li:hover li a, #imMnMn ul li.iehover li.iehover li a, #imMnMn ul li:hover li:hover li:hover li a, #imMnMn ul li.iehover li.iehover li.iehover li a {padding: 3px; height: auto !important; height: 1%; font: 11px Tahoma; background-color: #FFFFFF; color: #000000; border: 5px solid #000000; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); width: 134px; text-align: left; }

#imMnMn ul li li {padding-bottom: 0; margin-bottom: -5px; }

#imMnMn ul li:hover li a:hover, #imMnMn ul li:hover li:hover a, #imMnMn ul li.iehover li a:hover, #imMnMn ul li.iehover li.iehover a, #imMnMn ul li:hover li:hover li a:hover, #imMnMn ul li:hover li:hover li:hover a, #imMnMn ul li.iehover li.iehover li a:hover, #imMnMn ul li.iehover li.iehover li.iehover a, #imMnMn ul li:hover li:hover li:hover li a:hover, #imMnMn ul li.iehover li.iehover li.iehover li a:hover {background-color: #000000; color: #FFFFFF; }

#imMnMn ul li:hover ul ul, #imMnMn ul li:hover ul ul ul, #imMnMn ul li.iehover ul ul, #imMnMn ul li.iehover ul ul ul {display: none;}

#imMnMn ul li:hover ul, #imMnMn ul ul li:hover ul, #imMnMn ul ul ul li:hover ul, #imMnMn ul li.iehover ul, #imMnMn ul ul li.iehover ul, #imMnMn ul ul ul li.iehover ul {display: block;}

 
/* -- Menu Sub -- */

#imPageSub {width: 716px; padding-left: 4px; float: right; background: url('imsubmnuline.gif') repeat-y 2px; }

#imMenuSub {width: 116px; float: left; padding-top: 10px; }

#imMenuSub ul {list-style: none; margin: 0; padding: 0; border: none; }

#imMenuSub li.imMenuSubCur, #imMenuSub ul a {height: auto !important; height: 0%; padding: 4px 3px 4px 3px; font: 11px Tahoma; color: #000000; border-bottom: 1px solid #C0C0C0; }

#imMenuSub li.imMenuSubCur {font-weight: bold; }

#imMenuSub ul a:link, #imMenuSub ul a:active, #imMenuSub ul a:visited {display: block; text-decoration: none; }

#imMenuSub ul a:hover, #imMenuSub ul a:focus {background-color: #000000; color: #FFFFFF; }

 
/* -- Texts Style -- */

h2 {margin: 0px 0px 4px 10px; padding: 2px 0 0 0; font: bold 19px Tahoma; color: #000000; text-align: left; height: 23px; }

#imPathTitle {margin: 0px 0px 8px 10px; padding: 2px 0 0 0; font: 9px Tahoma; color: #808080; text-align: left; height: 13px; }

.imDefText {padding: 2px 0 0 0; font: 13px Tahoma; color: #000000; text-align: left; height: 17px; }

.fc0 {color: #000000; }

#imFooterSiteMap {margin: 8px 0px 0px 10px; padding: 2px 0 0 0; font: 11px Tahoma; color: #000000; text-align: center; height: 15px; }

#imFooterSiteMap a:link, #imFooterSiteMap a:active, #imFooterSiteMap a:visited, #imFooterSiteMap a:hover {color: #000000; text-decoration: none; }

#imFooterSiteMap a:hover {color: #000000; text-decoration: underline; }

#imFooter_L, #imFooter_R {padding: 2px 0 0 0; font: 11px Tahoma; color: #000000; text-align: left; height: 15px; }

#imFooter a:link, #imFooter a:visited, #imFooter a:hover, #imFooter a:active {color: #000000; text-decoration: none;}

/* -- Links Style -- */

a.ImLink  {text-decoration:underline; }

a.ImLink:link {color: #0000FF; }

a.ImLink:visited {color: #C000C0; }

a.ImLink:hover {color: #0000FF; }

martines · #2 (**permalink**) 23/07/2010, 16:36

Nadie me puede ayudar?

Gracias

exxqizofrenicoo · #3 (**permalink**) 23/07/2010, 20:58

no entendi muy bien lo que estas haciendo pero si es la botonera al 100% con los textos alineados quizas te sirva esto:

*{margin:0;padding:0;}
#imMnMn {padding:10px 0 0 .5%;width:99.5%;}
#imMnMn ul{list-style:none;}
#imMnMn ul li{float:left;width:19.6%;padding-left:.5%;}
#imMnMn ul .primero{padding:0;}
#imMnMn ul a {display:block;text-decoration:none;text-align:center;padding:10px 0 10px 0;font:bold 15px Verdana;background-color:#0D69D0;color:#FFFFFF;overflow:hidden;}

19.6% (es la cuenta de 98/5) son 5 botones los que use.
al primero le aplicas una class="primero"

Saludos

martines · #4 (**permalink**) 28/07/2010, 10:15

exxqizofrenicoo muchas gracias por su ayuda, ma ido muy bien el codigo que me has dado porque me queda al 100% de la pagina como queria. Aora el el unico problema que tengo es que algunos botones me quedan mas gordos i otros mas delgados. Aver si me puedes ayudar. Aqui te e dejado el codigo tuyo con dos canvios pequeños.

Gracias por todo.

Aqui te dejo de la imagen de como esta aora.

http://img514.imageshack.us/img514/9481/sinttulo3dbs.jpg

Aqui el codigo modificado.

Código PHP:

  *{margin:0;padding:0;}

#imMnMn {padding:0px 0 0 0;width:100%;}

#imMnMn ul{list-style:none;}

#imMnMn ul li{float:left;width:12.5%;padding-left:0%;}

#imMnMn ul .primero{padding:0;}

#imMnMn ul a {display:block;text-decoration:none;text-align:center;padding:10px 0 10px 0;font:bold 15px Verdana;background-color:#0D69D0;color:#FFFFFF;overflow:hidden;border: 3px solid #FF8000; }

emal011 · #5 (**permalink**) 29/07/2010, 03:37

width: auto;
width: 100% !important;
display: inline-block;