Foros del Web » Creando para Internet » CSS »

mi header se "corta" cuando hago chica la pantalla

 Estas en el tema de mi header se "corta" cuando hago chica la pantalla en el foro de CSS en Foros del Web. Hola todos, espero me puedan ayudar, tengo un problema con mi pagina, el header se corta al momento que hago la pantalla más chica y ...
  #1 (permalink)  
Antiguo 11/12/2013, 17:53
 
Fecha de Ingreso: diciembre-2013
Mensajes: 3
Antigüedad: 10 años, 4 meses
Puntos: 0
Mensaje mi header se "corta" cuando hago chica la pantalla
Hola todos, espero me puedan ayudar, tengo un problema con mi pagina, el header se corta al momento que hago la pantalla más chica y no se ve bien mi menú.

espero me puedan ayudar les dejo aquí una captura de pantalla para que vean mi problema y los códigos.

espero me puedan ayudar.

Este es mi css

Código: 
header{position:relative;
	magin:0 auto;
	display:block;
	padding:0 0 0 0; 
	background-image:url(images/index/barra_menu.png);
	height:92px;
	width:100%;
	}


footer{padding:0 0 0 0; width:100%;}
body,div,ul,ol,li{ margin:0; padding:0;}
html,body { margin:0; padding:0; width:100%; height::100%}
			
			/* Contenido */
#contenido {
position: relative;
width: 100%;
min-width:200px;
max-width:1024px;
height: 100%;
z-index: 50;
top: 0px;
margin: 0 auto;}
			

			/* Menu */

#menu_top{
	height: 92px;
	width: 980px;
	position: relative;
	left: 0px;
	top: 0px;
	margin: 0 auto;
	padding: 0 0 0 0;
}

#menu_desplegable{ height: 91px;
width: 752px;
position: absolute;
left: 225px;
top: 0px;}


#logo {
position: absolute;
width: 210px;
height: 64px;
top: 20px;
background-image: url(images/index/logotipo.png);
left: 6px;
}
y este es mi html:

Código: 
<body>

<!--inicia header-->        
<header>
    <!--inicia menu principal-->
        <div id="menu_top">
            <a href="index.html"> <div id="logo"></div></a>
            <div id="menu_desplegable">
                <ul id="nav">
                    <li><a href="espanol/La_empresa.html">NOSOTROS</a></li>
                    <li><a class="hsubs" href="espanol/La_villa_instalaciones.html"> RAFTING Y ACTIVIDADES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/villaecoturistica_instalaciones.html">INSTALACIONES</a></li>
                            <li><a class="sub" href="espanol/programas_rafting_rios.html">PROGRAMAS</a></li>
                            <li><a class="sub" href="espanol/villaecoturistica_actividades.html">ACTIVIDADES</a></li>
                            <li><a class="sub" href="espanol/villaecoturistica_mapa.html">MAPA DE UBICACI&Oacute;N</a></li>
                        </ul>
                    </li>
                    <li><a class="hsubs" href="espanol/servicios_viajes_escolares.html">VIAJES ESCOLARES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/campamento_escolar.html">CAMPAMENTO ESCOLAR</a></li>
                            <li><a class="sub" href="espanol/dinosaurios.html">DINOSAURIOS</a></li>
                            <li><a class="sub"href="espanol/selva_lacandona.html">SELVA LA CANDONA</a></li>
                            <li><a class="sub" href="espanol/cuetzalan.html">CUETZALAN</a></li>
                            <li><a class="sub" href="espanol/cofre_de_perote.html">COFRE DE PEROTE</a></li>
                            <li><a class="sub" href="espanol/catemaco.html">CATEMACO</a></li>
                            <li><a class="sub" href="espanol/campamento_integracion.html">INTEGRACI&Oacute;N PARA PROFESORES Y EGRESADOS</a></li>
                            <li><a class="sub" href="espanol/diplomado_turismo.html">DIPLOMADO "TURISMO DE AVENTURA"</a></li>
                        </ul>
                    </li>
                    <li><a class="hsubs" href="espanol/servicios_empresariales_servicios.html">VIAJES EMPRESARIALES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/campamento_integracion.html">TEAM BUILDING</a></li>
                            <li><a class="sub" href="espanol/mi_desafio.html">MI DESAF&Iacute;O</a></li>
                        </ul>
                    </li>
                    <li><a class="hsubs"  href="espanol/servicios_viajes_expediciones.html">VIAJES Y EXPEDICIONES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/programas_rafting_rios.html">RAFTING</a></li>
                            <li><a class="sub" href="espanol/Programas_enduro.html">ENDURO</a></li><li><a class="sub" href="espanol/Expediciones_mtbike.html">MTBIKE</a></li>
                            <li><a class="sub" href="espanol/bolivia.html">BOLIVIA</a></li>
                            <li><a class="sub" href="espanol/india.html">INDIA</a></li>
                            <li><a class="sub" href="espanol/marruecos.html">MARRUECOS</a></li>
                            <li><a class="sub" href="espanol/selva_lacandona.html">SELVA LA CANDONA</a></li>
                        </ul>
                    </li>
                    <li><a href="espanol/promociones.html">PROMOCIONES</a></li>
                    <li><a  href="espanol/contacto.html"> CONTACTO</a></li>
                </ul>
            </div>
        </div>
    <!--termina menu principal-->        
</header>
<!--termina header-->  
 


</body>
y se ve de esta forma
  #2 (permalink)  
Antiguo 12/12/2013, 01:52
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: mi header se "corta" cuando hago chica la pantalla
Bienvenido al foro.

Falta que publiques el código suficiente para reproducir el problema ya que con el que das no se puede: http://jsfiddle.net/8HKDQ
  #3 (permalink)  
Antiguo 12/12/2013, 02:02
 
Fecha de Ingreso: diciembre-2013
Mensajes: 3
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: mi header se "corta" cuando hago chica la pantalla
esto es todo
CSS
Código: 
/* Links */
a {	font-family: 'Merriweather Sans', sans-serif;
font-size:13px;
color:#fff;
text-align:center;
font-weight:400;
text-decoration:none;
alignment-baseline:central;
alignment-adjust:central;}

a:hover {
font-family: 'Merriweather Sans', sans-serif;
font-size:13px;
color:#fff; text-align:center;
font-weight:400;alignment-baseline:central; alignment-adjust:central;}
		
header{position:relative;
	magin:0 auto;
	display:block;
	padding:0 0 0 0; 
	background-image:url(espanol/images/index/barra_menu.png);
	height:92px;
	width:100%;
	z-index:5;
	}


footer{padding:0 0 0 0; 
width:100%;
margin: 0 auto;
background-image:url(espanol/images/index/barra_inferior_02.png);
position:relative;
height:59px;
bottom:0px;
}

body,div,ul,ol,li{ margin:0; padding:0;}
html,body { margin:0; padding:0; width:100%; height::100%}
			
			/* Contenido */
#contenido {
position: relative;
width: 980px;
height: 100%;
z-index: 50;
margin: 0 auto;;
padding:0 0 0 0}
			

			/* Menu */

#menu_top{
	height: 92px;
	width: 980px;
	position: relative;
	left: 0px;
	top: 0px;
	margin: 0 auto;
	padding: 0 0 0 0;
}

#menu_desplegable{ height: 91px;
width: 752px;
position: absolute;
left: 225px;
top: 0px;}


#logo {
position: absolute;
width: 210px;
height: 64px;
top: 20px;
background-image:url(espanol/images/index/logotipo.png);
left: 6px;
}


#footer {
					position: relative;
					height: 59px;
					width: 980px;
					bottom: 0px;
					margin: 0 auto;
				}
				
				#aviso {
	position: absolute;
	height: 40px;
	width: 598px;
	top: 10px;
	left: 16px;
				}
				
				#redes {
	position: absolute;
	height: 46px;
	width: 309px;
	left: 640px;
	top: 9px;
				}
			
			/* Estilo de tabla footer */
				td.footer{
					font-family: 'Merriweather Sans', sans-serif;
					font-size:13px;
					color:#fff; text-align:center;
					font-weight:400;
					alignment-adjust:central;
					line-height:16px;}


			/* Fondo */
				#page{ position:static; z-index:1;}
			
			
			/* Banner */
				#banner{
	height: 80px;
	width: 900px;
	position: relative;
	background-image: url(images/index/banner.gif);
	bottom:20px;
	margin:0 auto;}
HTML

Código: 
<!--inicia header-->        
<header>
    <!--inicia menu principal-->
        <div id="menu_top">
            <a href="index.html"> <div id="logo"></div></a>
            <div id="menu_desplegable">
                <ul id="nav">
                    <li><a href="espanol/La_empresa.html">NOSOTROS</a></li>
                    <li><a class="hsubs" href="espanol/La_villa_instalaciones.html"> RAFTING Y ACTIVIDADES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/villaecoturistica_instalaciones.html">INSTALACIONES</a></li>
                            <li><a class="sub" href="espanol/programas_rafting_rios.html">PROGRAMAS</a></li>
                            <li><a class="sub" href="espanol/villaecoturistica_actividades.html">ACTIVIDADES</a></li>
                            <li><a class="sub" href="espanol/villaecoturistica_mapa.html">MAPA DE UBICACI&Oacute;N</a></li>
                        </ul>
                    </li>
                    <li><a class="hsubs" href="espanol/servicios_viajes_escolares.html">VIAJES ESCOLARES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/campamento_escolar.html">CAMPAMENTO ESCOLAR</a></li>
                            <li><a class="sub" href="espanol/dinosaurios.html">DINOSAURIOS</a></li>
                            <li><a class="sub"href="espanol/selva_lacandona.html">SELVA LA CANDONA</a></li>
                            <li><a class="sub" href="espanol/cuetzalan.html">CUETZALAN</a></li>
                            <li><a class="sub" href="espanol/cofre_de_perote.html">COFRE DE PEROTE</a></li>
                            <li><a class="sub" href="espanol/catemaco.html">CATEMACO</a></li>
                            <li><a class="sub" href="espanol/campamento_integracion.html">INTEGRACI&Oacute;N PARA PROFESORES Y EGRESADOS</a></li>
                            <li><a class="sub" href="espanol/diplomado_turismo.html">DIPLOMADO "TURISMO DE AVENTURA"</a></li>
                        </ul>
                    </li>
                    <li><a class="hsubs" href="espanol/servicios_empresariales_servicios.html">VIAJES EMPRESARIALES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/campamento_integracion.html">TEAM BUILDING</a></li>
                            <li><a class="sub" href="espanol/mi_desafio.html">MI DESAF&Iacute;O</a></li>
                        </ul>
                    </li>
                    <li><a class="hsubs"  href="espanol/servicios_viajes_expediciones.html">VIAJES Y EXPEDICIONES</a>
                        <ul class="subs">
                            <li><a class="sub" href="espanol/programas_rafting_rios.html">RAFTING</a></li>
                            <li><a class="sub" href="espanol/Programas_enduro.html">ENDURO</a></li><li><a class="sub" href="espanol/Expediciones_mtbike.html">MTBIKE</a></li>
                            <li><a class="sub" href="espanol/bolivia.html">BOLIVIA</a></li>
                            <li><a class="sub" href="espanol/india.html">INDIA</a></li>
                            <li><a class="sub" href="espanol/marruecos.html">MARRUECOS</a></li>
                            <li><a class="sub" href="espanol/selva_lacandona.html">SELVA LA CANDONA</a></li>
                        </ul>
                    </li>
                    <li><a href="espanol/promociones.html">PROMOCIONES</a></li>
                    <li><a  href="espanol/contacto.html"> CONTACTO</a></li>
                </ul>
            </div>
        </div>
    <!--termina menu principal-->        
</header>
<!--termina header-->  

<!--Inicia Fondo-->
        <div id="page">
            <ul class="cb-slideshow">
                <li style="list-style:none;"><span></span></li>
                <li style="list-style:none;"><span></span></li>
                <li style="list-style:none;"><span></span></li>
                <li style="list-style:none;"><span></span></li>
                <li style="list-style:none;"><span></span></li>
                <li style="list-style:none;"><span></span></li>
            </ul>
        </div>
        <!--Termina Fondo-->
        
        <!--Inicia Contenido-->
        <div id="contenido">
           <a href="espanol/promociones.html"><div id="banner"></div></a>
            </div>
        </div>
        
        <!--Termina Contenido-->
        




<footer>
          <!--inicia footer-->	
                <div id="footer">
                
                    <div id="aviso">
                        <table width="520" height:"30" border="0">
                            <tr>
                                <td width="83" height="37" align="center"><a href="espanol/Aviso_de_privacidad.html">Aviso de Privacidad</a></td>
                                
                                <td  class="footer" width="424" align="center"> T. 01 (222) 237 48 87 / 01 (222) 620 80 45 / 044 2223 23 29 14 &nbsp; E-mail: [email protected] </td>
                            </tr>
                        </table>
                    </div>
                    
                    <div id="redes">
                    <table width="312" border="0" align="center">
                        <tr>
                            <td height="34"><a target="_blank" href="http://www.mexicorivers.com/"><img src="espanol/images/index/b_ingles.png" /></a></td>
                            <td><a target="_blank" href="http://www.mexicorivers.com/italiano/Compagnia.html"><img src="espanol/images/index/b_italiano.png" /></a></td>
                            <td><a target="_blank" href="http://www.mexicorivers.com/frances/compagnie.html"><img src="espanol/images/index/b_frances.png" /></a></td>
                            <td><a target="_blank" href="https://www.facebook.com/pages/Selvazul/176310489214791?ref=br_tf"><img src="espanol/images/index/b_face.png" /></a></td>
                            <td><a target="_blank" href="https://twitter.com/eco_turismo"><img src="espanol/images/index/b_twitter.png" /></a></td>
                            <td><a href="#"><img src="espanol/images/index/b_vimeo.png" /></a></td>
                            <td><a target="_blank" href="http://www.youtube.com/user/SelvAzul001"><img src="espanol/images/index/b_youtube.png" /></a></td>
                           
                        </tr>
                    </table>
                </div>
                </div>
            
            <!--termina footer-->
 </footer>
  #4 (permalink)  
Antiguo 12/12/2013, 02:13
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: mi header se "corta" cuando hago chica la pantalla
No por poner más código tu problema es reproducible: http://jsfiddle.net/cd7E6

Lo ideal realmente es poner el mínimo código necesario para reproducir el problema.

La otra opción es que lo subas a algún sitio y lo veamos desde ahí.
  #5 (permalink)  
Antiguo 12/12/2013, 18:37
 
Fecha de Ingreso: diciembre-2013
Mensajes: 3
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: mi header se "corta" cuando hago chica la pantalla
http://pruebalucy.mipropia.com/ ésta es la página
  #6 (permalink)  
Antiguo 13/12/2013, 01:35
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: mi header se "corta" cuando hago chica la pantalla
Tu problema es que usas posiciones absolutas en lugar de hacer una maquetación correcta. Cuando usas ese tipo de posicionamiento tu contenido sale del flujo natural del HTML y por lo tanto tiene interacción con otros elementos lo que hace que pueda ocultarse y no verse.

Suele ser un error de gente que empieza y usa Dreamweaver para hacer sus páginas.

Etiquetas: html, pantalla
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:40.