Foros del Web » Creando para Internet » CSS »

error en la posición del menu del encabezado

Estas en el tema de error en la posición del menu del encabezado en el foro de CSS en Foros del Web. Estoy teniendo dificultar para situar el menu del encabezado totalmente a la izquierda.No se porqué razón mantiene un margen a este lado y necesitaría ayuda ...
  #1 (permalink)  
Antiguo 05/01/2009, 04:34
 
Fecha de Ingreso: septiembre-2008
Mensajes: 185
Antigüedad: 15 años, 6 meses
Puntos: 1
error en la posición del menu del encabezado

Estoy teniendo dificultar para situar el menu del encabezado totalmente a la
izquierda.No se porqué razón mantiene un margen a este lado y necesitaría
ayuda para solucionarlo de una vez.

Agradecería la ayuda

anexo:Dejo el código tanto del menu del encabezado como del fichero de dreamweaver
sprymenubarhorizontal



------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Documento sin t&iacute;tulo</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../httpdocs/ibbcv.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/menu_superior.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/Menuizquierda.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Estilo1 {
font-size: 12px
}
.Estilo2 {
color: #00FF99;
font-weight: bold;
}
.Estilo3 {
font-size: 12%;
font-weight: bold;
}
.Estilo4 {font-family: Verdana, Arial, Helvetica, sans-serif}
.Estilo5 {
font-size: 150%
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" class="twoColLiqLtHdr">
<div id="container">
<div id="header">
<h1>&nbsp;</h1>
<h1 align="center" class="Estilo5"> INSTITUTO</h1>
<p>&nbsp;</p>
<div id="menuencabezado">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="http://www.ibbcv.es">Inicio</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Noticias</a>
<ul>
<li><a href="#">Instituto</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Generales</a>
<ul>
<li><a href="#">Psicoterapia Psicoanal&iacute;tica</a></li>
<li><a href="#">Peri&oacute;dicos, Revista, Webs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Gestor Web</a></li>
<li><a href="#">Foro</a> </li>
<li><a href="#">Registrarse</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Ingresar</a>
<ul>
<li><a href="#">Requisitos</a></li>
<li><a href="#">Formulario de ingreso</a></li>
</ul>
</li>
</ul>
</div>
<div id="menuencabezado">
---------------------------------------------------------------------------------------------------
@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/************************************************** *****************************

LAYOUT INFORMATION: describes box model, positioning, z-order

************************************************** *****************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */


ul.MenuBarHorizontal
{
list-style-type: none;
font-size: 100%;
cursor: default;
margin-top: 0;
margin-right: 0;
height: 35px;
padding-top: 0;
padding-right: 0;
background-image: url(../imagenes/degra2.gif);
width:100%;
float: left;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
background-image: url(../imagenes/degra2.gif);
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
background-image: url(../imagenes/degra2.gif);
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FFFFFF;
padding: 0.5em 0.75em;
color: #333333;
text-decoration: none;
background-image: url(../imagenes/degra2.gif);
font-size: 14px;
font-weight: bold;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
font-size: 12px;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(../imagenes/degra2.gif);
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(../imagenes/degra2.gif);
background-repeat: repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/************************************************** *****************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
  #2 (permalink)  
Antiguo 05/01/2009, 05:38
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: error en la posición del menu del encabezado

pon esto al principio del css..
body{
margin:0;
padding:0;
}

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 05/01/2009, 06:01
 
Fecha de Ingreso: septiembre-2008
Mensajes: 185
Antigüedad: 15 años, 6 meses
Puntos: 1
Si teniendo el mismo error

He añadido al css tus instrucciones pero el menu se sigue saliendo por la
derecha de div contenedor. Te mano el css de la página general.


@charset "utf-8";


background: #666666;
margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
padding: 0;
text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColLiqLtHdr #container {
width: 100%; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
border: 1px solid #000000;
text-align: left; /* esto anula text-align: center en el elemento body. */
margin-top: 0;
margin-bottom: 0;
background-color: #FFFFFF;
}
.twoColLiqLtHdr #header {





height::150px; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
height: 206px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #32A599;
width: 100%;
float: left;
clear: both;
}
.twoColLiqLtHdr #header h1 {
margin: 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
padding-top: 22px;
padding-right: 0;
padding-bottom: 14px;
padding-left: 0;
}

/* Sugerencias para sidebar1:
1. dado que está trabajando en porcentajes, es conveniente no utilizar relleno en la barra lateral. Se añadirá al ancho en el caso de navegadores que cumplen los estándares, creando un ancho real desconocido.
2. El espacio entre el lado del div y los elementos que contiene puede crearse colocando un margen izquierdo y derecho en dichos elementos, como se observa en la regla ".twoColLiqLtHdr #sidebar1 p".
3. Dado que Explorer calcula los anchos después de mostrarse el elemento padre, puede que ocasionalmente encuentre errores inexplicables con columnas basadas en porcentajes. Si necesita resultados más predecibles, puede optar por cambiar a columnas con tamaño en píxeles.
*/
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 24%;
padding-top: 16px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
background-color: #C0C0C0;
margin-top:0;
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
margin-left: 10px; /* deben asignarse los márgenes izquierdo y derecho de cada elemento que vaya a colocarse en las columnas laterales */
margin-right: 10px;
}

/* Sugerencias para mainContent:
1. el espacio entre el mainContent y sidebar1 se crea con el margen izquierdo del div mainContent. Con independencia de la cantidad de contenido que incluya el div sidebar1, permanecerá el espacio de la columna. Puede quitar el margen izquierdo si desea que el texto del div #mainContent llene el espacio de #sidebar1 cuando termine el contenido de #sidebar1.
2. para evitar la caída de un elemento flotante con una resolución mínima admitida de 800 x 600, los elementos situados dentro del div mainContent deben tener un tamaño de 430px o inferior (incluidas las imágenes).
3. en el siguiente comentario condicional de Internet Explorer, la propiedad zoom se utiliza para asignar a mainContent "hasLayout." Esto evita diversos problemas específicos de IE.
*/
.twoColLiqLtHdr #mainContent {
margin-top: 0;
margin-right: 20px;
margin-bottom: 0;
margin-left: 26%;
}
.twoColLiqLtHdr #footer {
padding-top: 16px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 12px;
clear: both;
margin-top: 1px;
background-color: #C0C0C0;
}
.twoColLiqLtHdr #footer p {
margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
}

/* Varias clases diversas para su reutilización */
.fltrt { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
float: right;
margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. */
float: left;
margin-right: 8px;
}
.clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el último elemento antes del cierre de un contenedor que incluya completamente a un elemento flotante */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColLiqLtHdr #container #header #menuhorizontal {
clear: both;
}
.twoColLiqLtHdr #container #header #menusuperior {
clear: both;
}
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




La zona horaria es GMT -6. Ahora son las 17:10.