problema con menus y css

Citar

Escrito el 08 Oct 2008 10:07 am

hola chicos, este es mi priemr mensaje, no sabia si preguntar ene sta seccion o donde pero aca voy, estoy modificando un foro y tengo problema con los menu, en si los dos usan css y uno en especial se ve afectado por el otro, lo que hice es modificar el html de base del foro, en la cabecera del mismo para introducir una imagen y un menu, luego he colocado otro menu del cual les hablo, las imagenes del mismo se han movido de lugar , en si se ha corrido todo, yo pienso que es porque el otro menu se acomoda del lado izqquierdo y poe rso este tambien se corre, se que se debe poner cs1 y cs2 para invocar al css indicado pero no se dodne exactamente, aca les dejo los codigos, si me ayudan me harina un gran favor ya que estoy aprendiendo y capaz es una tontera pero no me doy cuenta donde esta el problema, se que en el html de la cabecera del foro, se repiten unos codigos, pero para no hacerme mas lios los deje, nose si estar bien, pero bue, saludos y espero que alguien caiga del cielo y me ayude jeje, saludos

cabecera del foro:
[spolier]

Código :

<center><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">

<!--
 _________________________________________________________
|                                                         |
|    DESIGN + http://fullahead.org                        |
|      DATE + 2005.05.12                                  |
| _Copyright + free use if this notice is kept in place    |
|_________________________________________________________|

-->

<head>

   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <TITLE>Patagonia Argentina</TITLE>

    <style>
   /* 
 _________________________________________________________
|                                                         |
|    DESIGN + http://fullahead.org                        |
|      DATE + 2005.05.12                                  |
| _Copyright + free use if this notice is kept in place    | 
|_________________________________________________________|

*/



/* -- Main layout styles -- */

body {
  margin:  1em 1em 1em1em;
  padding: 0px;
  font-family: verdana, sans-serif;
  font-size: 1.0em;
  background-color: #ffffff;  
}

#siteBox {
  float:center;
  width: 80%;
  color: #FFF;
}





/* -- Header layout/display styles -- */

#header {
  float:center;
  width:100%;
  height: 4em;
  background: #333 url(http://i49.servimg.com/u/f49/13/09/35/15/pata10.jpg) no-repeat bottom left;
}

#header a {
  float: right;
  width: 8em;
  padding: 5px 10px 5px 10px;
  font-size: 0.6em;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background-color: #666666;
  border-bottom: 2px solid #333;
  border-right: 1px solid #333;
  border-left: 1px solid #333;
}

#header a:hover, #header a.active {
  padding-top: 10px;
  background-color: #333;
}

#header a.lastMenuItem {
  background-image: url(images/corner_tr.gif);
  background-repeat: no-repeat;
  background-position: top right;
  border-right: 0px;
}

a .desc {
  display: none;
  color: #FC0;  
}

a:hover .desc, .active .desc {
  display: block;
}




/* -- Header title and subTitle layout/display styles -- */


.title {
  float: left;
  padding: 20px 0px;
  font-size: 1.4em;
  font-weight: bold;
  
  line-height: 0.75em;
  
  color: #FC0;
}

.subTitle {
  display: block;
  font-size: 0.4em;
  line-height: 1.2em;  
  
}





/* -- Content layout/display styles -- */

#content {
  float: left;
  width: 100%;
  padding: 1em 0 1em 0;
  background-color: #ffffff;
}

#contentLeft {
  float: left;
  width: 23.3%;
  margin-bottom: 1em;
  background: #ffffff url(images/corner_sub_tr.gif) no-repeat top right;  
}

#contentRight {
  float: right;
  width: 70%;
  background: #ffffff url(images/corner_sub_tl.gif) no-repeat top left;
  padding: 0px 10px;
  letter-spacing:normal;
}

#content p {  
  margin: 1.2em 1.2em 2em 1.2em;
  font-size: 0.8em;
  line-height: 1.8em;
}

#content a {  
  text-decoration: none;
  color: #FC0;
  border-bottom: 1px solid #AAA;
}

#content a:hover {
  color: #DDD;
  background-color: #888;
  border-bottom: 1px solid #EEEEEE;
}

.header, .subHeader {
  display: block;
  clear: both;  
  font-weight: bold;
  font-size: 0.8em;
  color: #FC0;
  border-bottom: 1px solid #AAA;    
}

.subHeader {
  border: 0px;
}





/* -- Content left site links (large plus icon) -- */

#content a.menuItem {
  display: block;  
  padding: 5px 0 5px 54px;
  background: url(images/icn_plus.gif) no-repeat center left;
  border: 0px;
}

#content a:hover.menuItem { 
  color: #DDD;
  background: #888 url(images/icn_plus_on.gif) no-repeat center left;
  border: 0px;
}





/* -- Footer layout/display styles -- */

#footer {
  float: left;
  width: 100%;
  height: 3em;
  font-size: 0.6em;
  line-height: 2.6em;
  color: #0AD;
  background: #25509F url(images/hdr.jpg) repeat-y top left;
}

#footerLeft {
  float: left;
  width: 60%;
  height: 3em;
  text-align: left;
  background: url(images/corner_bl.gif) no-repeat bottom left;
}

#footerRight {
  float: right;
  width: 35%;
  height: 3em;
  text-align: right;
  background: url(images/corner_br.gif) no-repeat bottom right;
}

#footer a {
  color: #0AD;
}

#footer a:hover {
  color: #666666;
}




/* -- Display formatting styles -- */

.grey {
  font-size: 0.9em;
  color: #AAA;
}

.white {
  color: #FFF;
}

acronym {
  cursor: help;
  border-bottom: 1px dotted #AAA;
}






/* -- <ul> tag styles -- */

ul{
  font-size: 0.8em;
  padding-top: 5px;
  padding-bottom: 5px;
  list-style-image: url(../images/li_bullet.gif);
}

li {
  margin-left: 50px;
}






/* -- Image alignment classes -- */

.imgLeft, .imgRight {
  margin: 5px;
}

.imgLeft {
  float: left;
  margin-left: 0px;
}

.imgRight {
  float: right;
  margin-right: 0px;
}






/* -- Utility classes to create the bottom rounded corners -- */

.bottomCorner {
  text-align: right;
}

.vBottom {
  vertical-align: bottom;
}

   </style>

<link href="cms_style.css" rel="stylesheet" type="text/css" />
<!--DHTML menu-->


<link href="editor_images/menu.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="index.php?supermode=chrome_js&move=LTArMF8tMCswXw==&dc=2"></script>

 
</head>

<body>

<!-- Main site container -->

<div id="siteBox">

  <!-- Main site header : holds the img, title and top tabbed menu -->
  <div id="header">

    <!-- top rounded corner -->
    <img src="images/corner_tl.gif" alt="" style="float:left;" />


    <!-- Site title and subTitle -->
    <span class="title">

      <span class="white">~Argentina~</span>
      <span class="subTitle">
       
      </span>
    </span>

    <!-- Menu is displayed in reverse order from how you define it (caused by float: right) -->
    <a href="1_0_Products.html">Especies<span class="desc">click it!</span></a>

<a href="1_2_Products.html">Lagos<span class="desc">click it!</span></a>
<a href="1_3_Contact.html">Rios<span class="desc">click it!</span></a>
<a href="1_4_About.html">Santa cruz<span class="desc">click it!</span></a>
<a href="Contact.html">Nudos<span class="desc">click it!</span></a>
<a href="http://patagoniasteelhead.superforo.net/portal.htm">Inicio<span class="desc">click it!</span></a>

<a href="1_8_Sitemap.html">Mapas<span class="desc">click it!</span></a>
<a href="1_9_Support.html">Modalidades<span class="desc">click it!</span></a>
<a href="1_10_FAQ.html">videos<span class="desc">click it!</span></a>
</div>
<!-- Content begins -->
  <div id="content">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   {META_FAVICO}
   {META}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <!-- BEGIN switch_enable_pm_popup -->
   <script type="text/javascript"><!--
      pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
      pm.focus();
   //-->
   </script>
   <!-- END switch_enable_pm_popup -->
   <!-- BEGIN switch_report_popup -->
   <script type="text/javascript"><!--
      report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
      report.focus();
   //-->
   </script>
   <!-- END switch_report_popup -->
   {GREETING_POPUP}
   <script src="/{JS_DIR}/{L_LANG}.js" type="text/javascript"></script>
   <!-- BEGIN hitskin_preview -->
   <style type="text/css">
   #hitskin_preview {
   margin: 0; padding: 0;
   position: fixed;
   top: 0; left: 0;
   width: 100%;
   height: 65px;
   background: url('http://illiweb.com/fa/hitskin/hitskin_bar.png') repeat-x left -15px;
   color: #fff;
   }

   * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */
      position: absolute;
      top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
      z-index: 2;
      background: transparent url('http://illiweb.com/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px;
   }

   * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */
    background: #fff url(foo) fixed;
    }

   #hitskin_preview h1 {
      float: left;
      margin: 3px 0 0 0;
      padding: 0 0 0 10px;
      font: italic normal 25px Arial,sans serif;
      color: #fff;
   }
   #hitskin_preview h1 img {
      vertical-align: middle;
   }
   #hitskin_preview em {
      color: #7CBA2C;
      font-weight: bold;
   }
   #hitskin_preview a {
   color: #fff;
   }
   #hitskin_preview a:hover {
   text-decoration: underline;
   }

   #hitskin_preview .content {
      text-align: right;
   }

   #hitskin_preview .content p {
      margin: 4px 1em 0px 1em;
      font-size: 13px;
      line-height: 1.8em;
      color: #fff;
      font-weight: bold;
   }
   #hitskin_preview .content p span {
      font-weight: normal;
      font-size: 0.8em;
   }
   body {
      margin-top: 40px !important;
   }
   {hitskin_preview.HITSKIN_RTL_CSS}
   </style>
   <!-- END hitskin_preview -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
   <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
   <div class="content">
      <p>
         {hitskin_preview.L_THEME_SITE_PREVIEW}
         <br />
         <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>
   </div>
</div>
<!-- END hitskin_preview -->
<a name="top"></a>
{JAVASCRIPT}
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
   <tr>
      <td class="bodyline">
         <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
            <!-- BEGIN switch_logo_left -->
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               <td align="center" width="100%" valign="middle"><div class="maintitle">{MAIN_SITENAME}</div><br /><span class="gen">{SITE_DESCRIPTION}<br />  </span></td>
            <!-- END switch_logo_left -->

            <!-- BEGIN switch_logo_center -->
               <td align="center" width="100%" valign="middle">
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br />
                  <div class="maintitle">{MAIN_SITENAME}</div><br />
                  <span class="gen">{SITE_DESCRIPTION}</span>
               </td>
            <!-- END switch_logo_center -->

            <!-- BEGIN switch_logo_right -->
               <td align="center" width="100%" valign="middle"><div class="maintitle">{MAIN_SITENAME}</div><br /><span class="gen">{SITE_DESCRIPTION}<br />  </span></td>
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
            <!-- END switch_logo_right -->
            </tr>
         </table>

         <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
            <tr>
               <td align="{MENU_POSITION}">
                  {GENERATED_NAV_BAR}
               </td>
            </tr>
         </table>

         <div style="clear: both;"></div>

         <div id="page-body">
            <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
               <table cellpadding="0" cellspacing="0" width="100%" class="three-col"><tbody>
                  <tr>
                     <td valign="top" width="{C1SIZE}">
                        <div id="{ID_LEFT}">
                           <!-- BEGIN giefmod_index1 -->
                              {giefmod_index1.MODVAR}
                              <!-- BEGIN saut -->
                                 <div style="height:{SPACE_ROW}px"></div>
                              <!-- END saut -->
                           <!-- END giefmod_index1 -->
                        </div>
                     </td>
                     <td valign="top" width="100%">


 
</center>

[/spoiler]

y este es el menu que se deforma:
html

[spoiler]

Código :

<center><div class="nav-container-outer">   <img src="http://i49.servimg.com/u/f49/13/09/35/15/nav-bg11.jpg" alt="" class="float-left" />   <img src="http://i49.servimg.com/u/f49/13/09/35/15/nav-bg12.jpg" alt="" class="float-right" />   <ul id="nav-container" class="nav-container">      <li><a class="item-primary" href="http://steelhead.foroactivo.net/portal.htm" target="_self">INICIO</a>         <ul style="width:130px;">                       <li><a href="http://steelhead.foroactivo.net/Reglamento-General-de-Pesca-h8.html" title="   CABEZA DE ACERO" target="_self" >STEEL HEAD</a></li>            <li><a href="#" title="ARGENTINA" target="_self" >ARGENTINA</a></li>            <li><a href="#" title="   CHILE" target="_self" >CHILE</a></li>         </ul>      </li><li><span class="divider divider-vert" ></span></li>      <li><a class="item-primary" href="http://steelhead.foroactivo.net/portal.htm" target="_self">PESCA</a>         <ul style="width:130px;">         <li><a href="http://steelhead.foroactivo.net/Reglamento-General-de-Pesca-h8.html" title="   REGULATION OF FISHING" target="_self" >REGLAMENTO DE PESCA</a></li>   <li><a href="#" title="MAPS" target="_self" >MAPAS</a></li>            <li><a href="http://steelhead.foroactivo.net/nudos-h5.html" title="   KNOTS" target="_self" >NUDOS</a></li>         </ul>      </li>       <li><span class="divider divider-vert" ></span></li>      <li><a class="item-primary" href="http://steelhead.foroactivo.net/gallery/index.htm" target="_self">GALERIA DE IMAGENES</a>         <ul style="width:130px;">            <li><a href="http://steelhead.foroactivo.net/gallery/TURISMO/TURISMO-cat_c2.htm" title="   TOURISM" target="_self" >TURISMO</a></li>            <li><a href="http://steelhead.foroactivo.net/gallery/FOTOS/FOTOS-cat_c1.htm" title="FISHING" target="_self" >PESCA</a></li>            <li><a href="#" title="   SPECIES" target="_self" >ESPECIES</a></li>         </ul>      </li>       <li><span class="divider divider-vert" ></span></li>      <li><a class="item-primary" href="#" target="_self">ESPECIES</a>         <ul style="width:130px;">            <li><a href="#" title="THE RIO GALLEGOS " target="_self" >EL RIO GALLEGOS </a></li>            <li><a href="#" title="THE RIO GALLEGOS LITTLE" target="_self" >EL RIO GALLEGOS CHICO</a></li>            <li><a href="#" title="SOUTH OF THE RIO GALLEGOS" target="_self" >EL RIO CHICO DEL SUR</a></li> <li><a href="http://steelhead.foroactivo.net/Rio-Santa-Cruz-h9.html" title="RIO SANTA CRUZ" target="_self" >RIO SANTA CRUZ</a></li>         </ul>      </li>       <li><span class="divider divider-vert" ></span></li>      <li><a class="item-primary" href="http://steelhead.foroactivo.net/forum.htm" target="_self">USUARIOS</a>         <ul style="width:130px;">            <li><a href="http://steelhead.foroactivo.net/memberlist.forum" title="MEMBERS" target="_self" >MIEMBROS</a></li>            <li><a href="http://steelhead.foroactivo.net/groupcp.forum" title="GROUPS" target="_self" >GRUPOS</a></li>            <li><a href="http://steelhead.foroactivo.net/profile.forum?mode=editprofile" title="YOUR PROFILE" target="_self" >TU PERFIL</a></li><li><a href="http://steelhead.foroactivo.net/msg.forum?folder=inbox" title="MESSAGES" target="_self" >MENSAJES</a>         </ul>      </li><li><span class="divider divider-vert" ></span></li>      <li><a class="item-primary" href="http://steelhead.foroactivo.net/forum.htm" target="_self">FORO</a>         <ul style="width:130px;">            <li><a href="http://steelhead.foroactivo.net//login.forum?connexion" title="LOG IN" target="_self" >ENTRAR</a></li>            <li><a href="http://steelhead.foroactivo.net" title="LOG OUT" target="_self" >SALIR</a></ul></li><li><span class="divider divider-vert" ></span></li>      <li><a class="item-primary" href="http://steelhead.foroactivo.net/profile.forum?mode=register" target="_self">REGISTRARSE</a><ul style="width:130px;"><li><a href="http://steelhead.foroactivo.net/faq.htm" title="FAQ" target="_self" >FAQ</a></ul></li>       <li><span class="divider divider-vert" ></span></li>      <li class="clear"> </li>   </ul> </div><embed src="http://www.fileden.com/files/2008/5/10/1905885/baner.swf"  width="700 px" ;height="40 px"</embed></center>

[/spoiler]
este el css del menu que se deforma:
[spoiler]

Código :

@charset "utf-8";
/* CSS Document */

/*^'^ Navigation Structure menu1^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://i49.servimg.com/u/f49/13/09/35/15/nav-bg10.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/   
#nav-container a{   
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://i49.servimg.com/u/f49/13/09/35/15/item-p10.gif );
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(http://i49.servimg.com/u/f49/13/09/35/15/item-p10.gif );
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/   
#nav-container div, #nav-container ul{   
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://i49.servimg.com/u/f49/13/09/35/15/item-s11.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/   
#nav-container div a, #nav-container ul a{   
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://i49.servimg.com/u/f49/13/09/35/15/item-s10.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/   
#nav-container div a:hover, #nav-container ul a:hover{   
background-color: #FFFFFF;
background: url(http://i49.servimg.com/u/f49/13/09/35/15/item-s10.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/   
#nav-container .item-secondary-title{   
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(http://i49.servimg.com/u/f49/13/09/35/15/item-s12.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/   
#nav-container .divider-horiz{   
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/   
#nav-container .divider-vert{   
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

[/spoiler]

Por marinaf25

1 de clabLevel

Envíale un mensaje privado

problema con menus y css

Escribe una respuesta rapida