Entrar

Como centrar el menu horizontal

JUNNIOR_77 · · Solicitar retirada
Mira les cuento mi problema en un monitor de 15' se ve centrado el sub_ menu, pero al verla en un notebook(pc portatil) el sub_menu se desconfigura (se carga hacia la derecha de la vision)...
Alguna ayuda para que se vea bien ant cualquir tamaño de monitor...

Desde ya gracias...

Aqui adjunto el codigo HTML y CSS (estan en una solo pagina)


Esta es la pagina ejemplo(Adjunto)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body {
font-family: arial, helvetica, serif;
font-size: 100%;
background: white url(ddbg3.gif) no-repeat 6000px 6000px; /*total del fondo blanco*/
padding: 2em;
margin: 0;

}

#content {
width: 100em;
background-color: #FFFFFF; /* para cambiar el color de fondo*/
padding: 1em 0;
border: 6px double #000080; /* cambia el color de las lineas*/
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 56em; /*largo de la cuerpo*/

}
html>body #content {
width: 100em;
}

a {
text-decoration: none;

}

a:link {
color: #FFFFFF;

}

a:visited {
color: #790;

}

a:active {
color: red;
}

a:hover {
text-decoration: underline;
background: #d6ccff; /*paa cambiar el fondo del menu */
}

h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}

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

#nav a {
font-weight: bold;
/*color: green;*/
color: #000080; /*color de letra del menu*/


}

#nav a {
text-decoration: none;
/*hay que revisar nav a*/
text-align: center;
}

#nav li li a {
display: block;
font-weight: normal;
color: #000080;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #6A6AFF;
border-width: 0 5px;
}

li {
float: left;
position: relative;
width: 9em;
text-align: center;
cursor: default;
background-color: white;
/*border: 1px solid #7d6340;*/ /*cora las rayitas del menu*/
border: 1px solid #6A6AFF;

border-width: 1px 0;
}

li#first {
border-left-width: 1em;
}

li#last {
border-right-width: 1em;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;

font-weight: normal;
background: url(ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #6A6AFF;/*define las lineas del submenu*/

}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

li:hover ul, li.over ul {
display: block;
}

hr {
display: none;
}

p {
clear: left;
background: url(p {
clear: left;
background: url() center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}

p.image {
float: center;
font-size: 0.8em;
text-align: center;
color: #6A6AFF;
padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
display: block;
border: 1px solid #6A6AFF;
}



</style>



</head>
<script type="text/javascript"><![CDATA[//><!--

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>
<body>
<div id="content">

<h1>[contenido no disponible]</h1>

<hr />

<ul id="nav">

<li id="first">
<div><span></span>Agencia</div>
<ul>
  • Quienes Somos
  • Misión
  • Objetivo





  • <div>Servicios</div>
    <ul>

  • Data Bas Marketing
  • Marketing Directo
  • Campañas de Correo Didecto
  • Campañas de e-mailing
  • Telemarketing / Call Center
  • Otros Servicios






  • <div>Contacto</div>
    <ul>
  • On Line
  • Telefonico





  • <div>Mantagua</div>
    <ul>
  • link1
  • link2
  • link3





  • <div>Marketing Social</div>
    <ul>
  • link1
  • link2
  • link3






    <li id="last">
    <div>Salir</div>
    <ul>
  • Chao







    <hr />



    texto texto.</p>

    <p class="image" align="center">[contenido no disponible]total</p>



    </p>

    <p class="image">[contenido no disponible]texto</p>




    texto
    texto
    texto
    texto
    texto
    texto
    texto</p>



    texto</p>

    </div>
    </body>
    </html>