Foros del Web » Creando para Internet » HTML »

menu se descuadra

Estas en el tema de menu se descuadra en el foro de HTML en Foros del Web. hola, a ver si algun experto me soluciona el problema que tengo con la web. modifique el logo inscrustando una imagen y centrandola y borre ...
  #1 (permalink)  
Antiguo 28/09/2013, 09:23
 
Fecha de Ingreso: abril-2005
Mensajes: 4
Antigüedad: 19 años, 6 meses
Puntos: 0
menu se descuadra

hola, a ver si algun experto me soluciona el problema que tengo con la web.
modifique el logo inscrustando una imagen y centrandola y borre el texto.
en la pag de inicio se ve perfecto como quiero que se vea, pero en el resto se descuadra y no se por que sucede eso, si mantengo el logo anterior funciona correctamente.
os estaria agradecido si alguien puede darme la solucion, gracias por adelantado.

codigo style css
Cita:
@font-face {
font-family: Jenna Sue;
src: url('../fonts/JennaSue-webfont.eot');
src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');
}

@font-face {
font-family: News Cycle;
src: url('../fonts/NewsCycle-Regular.eot');
src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');
}

html {
height: 100%;}

* {
margin: 0;
padding: 0;}

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;}

body {
font: normal .80em arial, sans-serif;}

p {
padding: 0 0 25px 0;
line-height: 1.7em;}

img {
border: 0;}

h1, h2, h3, h4, h5, h6 {
font: normal 350% 'Jenna Sue', arial, sans-serif;
margin: 0 0 5px 0;
padding: 0;}

h2 {
font: normal 250% 'Jenna Sue', arial, sans-serif;
margin: 0;
padding: 0 0 8px 0;}

h3 {
font: normal 150% arial, sans-serif;}

h4, h5, h6 {
margin: 0;
padding: 0 0 5px 0;
font: normal 110% arial, sans-serif;
line-height: 1.5em;}

h5, h6 {
font: italic 95% arial, sans-serif;
padding-bottom: 15px;}

a, a:hover {
outline: none;
text-decoration: none;}

a:hover {
text-decoration: none;}

ul {
margin: 2px 0 22px 17px;}

ul li {
list-style-type: circle;
margin: 0 0 0 0;
padding: 0 0 4px 5px;}

ol {
margin: 8px 0 22px 20px;}

ol li {
margin: 0 0 11px 0;}

#main, #header, #logo, #menubar, #site_content, #footer {

margin-left: auto;
margin-right: auto;}

#main {
width: 950px;
margin: 20px auto;}


header {
width: 950px;
height: 105px;}

#logo {
width: 950px;
float: right;
height: 120px;
background: transparent;

padding: 0;}

#logo h1 {
padding: 6px 0 0 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 250%;
font-style: normal;
font-weight: normal;
font-variant: normal;
}

#logo h1 a:hover {
text-decoration: none;}

#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;}

#left_content {
float: left;
text-align: justify;
width: 444px;
padding: 20px 0 5px 25px;
margin: 0;}

#left_content ul {
margin: 2px 0 22px 0px;}

#left_content ul li {
list-style-type: none;
margin: 0 0 0 0;
padding: 2px 0 2px 28px; /* separacion del icono al texto en lista 28px*/
line-height: 1.5em;}

#right_content {
float: right;
width: 450px;
padding: 0;
min-height: 450px;}

#right_content img {
float: left;}

footer {
height: 54px;
width: 930px;
float: right;
margin: 20px auto 20px auto;
padding: 0px 20px 0 0;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
font: 160% 'News Cycle', arial, sans-serif;
text-align: right;}

footer p {
padding: 0 0 10px 0;}

footer a, footer a:hover {
text-decoration: none;}

/* styling for the slideshow on the homepage */
ul.slideshow {
width: 950px;
height: 450px;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;}

ul.slideshow li {
position: absolute;
margin: 0;
padding: 0;
left: 0;
right: 0;
list-style: none;}

ul.slideshow li.show {
z-index: 500;}

ul img {
border: none;}

#slideshow-caption {
width: 950px;
height: 90px;
position: absolute;
bottom: 0;
left: 0;
z-index: 500;}

#slideshow-caption .slideshow-caption-container {
padding: 20px 25px 0 25px;
z-index: 1000;}

#slideshow-caption p {
padding: 0;
font: normal 130% arial, sans-serif;}

/* form styling */
.form_settings {
margin: 0;}

.form_settings p {
padding: 0 0 10px 0;}

.form_settings span {
padding: 5px 0;
float: left;
width: 170px;
text-align: left;}

.form_settings input, .form_settings textarea {
padding: 4px;
width: 252px;
font: 100% 'trebuchet ms', arial, sans-serif;
border: 0;
border-bottom: 1px solid;
background: transparent;}

.form_settings .submit {
font: 220% 'Jenna Sue', arial, sans-serif;
border: 0;
width: 100px;
margin: 0 0 0 162px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;}

.form_settings textarea, .form_settings select {
font: 100% 'trebuchet ms', arial, sans-serif;
border: 1px solid;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
width: 250px;
overflow: auto;}

.form_settings select {
width: 304px;}

.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;}

/* styling for the blog page */
#blog_container h4 {
font: normal 300% 'Jenna Sue', arial, sans-serif;
margin: 0 0 15px 0;
padding: 5px 0;}

#blog_container h4.select {
width: 475px;}

.blog {
background: url(../images/calendar.png) no-repeat;
width: 54px;
height: 46px;
float: left;
margin: 0 15px 0 0;}

.blog h2 {
font: bold 90% arial, sans-serif;
text-shadow: none;
text-align: center;
margin: 0;
padding: 4px 0 0 0;}

.blog h3 {
font: 140% arial, sans-serif;
text-shadow: none;
margin: 0;
text-align: center;
padding: -10px 0 0 0;}

#blog_text {
padding: 20px;
overflow: auto;
height: 100%;}

#blog_text h1 {
font: normal 300% 'Jenna Sue', arial, sans-serif;;
margin: 0 0 15px 0;
padding: 5px 0;}

/* stylesheet for sooperFish by www.sooperthemes.com -- author: jurriaan roelofs */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 180px;}

html body ul.sf-menu ul ul {
margin: 0 0 0 180px;}

ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;}

ul.sf-menu {
display: block;
position: relative;}

ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;}

ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */ }

ul.sf-menu a {
display: block;
position: relative;}

ul.sf-menu ul {
position: absolute;
left: 0;
width: 150px;
top: auto;
left: -999999px;}

ul.sf-menu ul a {
zoom: 1; /* IE6/7 fix */ }

ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 150px;}

ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;}

ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;}

/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size: 1px;
}

ul ul span.sf-arrow {
right: 5px;
top: 20px;
background-position: 0 100%;
}

/* LINEA FONDO DEL menu CAMBIADO: height: 44px;;
float: left*/
nav {
height: 55px;
width: 950px;
float: left;
margin: -15px auto 15px auto;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;}

/* Theming the menu */
ul#nav {
float: left;
}

ul#nav ul {
padding-bottom: 14px;
}
/* cambiar el tamaño de textos del menu */
ul#nav li a {
padding: 3px 25px 6px 25px;
font: 250% 'News Cycle', arial, sans-serif;
text-decoration: none;
margin-right: 15px;
}
codigo index.html

Cita:
<body>
<div id="main">

<!-- begin header -->
<header>
<div id="logo">
<h1><img style="display:block;margin:0 auto 0 auto;" src="images/logo.png" width="200" height="79" ></h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li class="selected"><a href="index.html">Inicio</a></li>
<li><a><img src="images/separador_menu.png" width="1" height="48"> </a></li>
<li><a href="trabajos.html">Trabajos</a></li>
<li><a><img src="images/separador_menu.png" width="1" height="48"> </a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a><img src="images/separador_menu.png" width="1" height="48"> </a></li>
<li><a href="contacto.php">Contacto</a></li>
</ul>
</nav>
</header>
para ver el error visitar [URL="http://www.figuritas.hol.es/"]www.figuritas.hol.es[/URL] y pinchar en cualquier boton del menu
  #2 (permalink)  
Antiguo 28/09/2013, 10:32
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 10 meses
Puntos: 181
Respuesta: menu se descuadra

Hola,

El problema es que tienes varios errores en el código. Puedes usar el Markup Validation Service u otro para que encuentres mas fácil los errores.


Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 30/09/2013, 02:46
 
Fecha de Ingreso: abril-2005
Mensajes: 4
Antigüedad: 19 años, 6 meses
Puntos: 0
Respuesta: menu se descuadra

muchas gracias por la contestacion lo chequee, y al final encontre el fayo , borre un div sin querer.

Etiquetas: descuadra, html5, lista, php, type
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 11:57.