Maquetación falla en Iexplore y Chrome

Legolas_Bilbao · #1 (**permalink**) 02/01/2012, 01:31

Ando enredando en crear una plantilla para mi página web per ono me funciona correctamente ni en chrome ni en iexplorer.

La estructura es la siguiente
- header
- cuerpo
- footer

Las dos primeras "funcionan" bien en los 3 navegadores pero el footer solo se muestra en Firefox.

La página de ejemplo es la siguiente

http://www.clubnorteñodegolf.es/xcxl...ndex_nuevo.php

¿cómo puedo solventar el problema del pie de página para que se muestre, los demas errores los ire corrigiendo poco a poco.

gracias por vuestra ayuda

inghard · #2 (**permalink**) 02/01/2012, 02:16

te falta un clear:both; en el html despues del contenido

EJ:

Código HTML:

Ver original<div id="head">
</div>
<br class="limpia"/>
<div id="contenido">
</div>
<br class="limpia"/>
<div id="pie">
</div>

css

Código CSS:

Ver original.limpia{
clear:both;
}

prueba con eso

IsaBelM · #3 (**permalink**) 02/01/2012, 08:20

el footer no se ve en ningún explorador ya que el body tiene overflow:hidden

emprear · #4 (**permalink**) 02/01/2012, 11:37

Antes de arreglar tu css, va a ser conveniente que arregles tu html
cosas como

Código HTML:

Ver original<a href="colaboradores.php" style="text-decoration:none; color:#000;">
                            <span style="display:block;text-align:center;"><img src="./img/acuerdos/dberzal.png" style="margin-top:10px;" /></span>
                                <br />
                            <span style="font-size:12px; text-align:center; margin-left:22%; font-weight:bold">Dominio Berzal   </a> </span>

Están incorrectas. al igual que usar solo valores numéricos (tampoco deberían comenzar por uno) para identifcar tus "id".
Y creo haber visto también algún div mal anidado

Saludos

Legolas_Bilbao · #5 (**permalink**) 04/01/2012, 13:32

GRacias, a todos,

Ya he corregido algunos de los errores de los que me comentais.

Ya consigo ver el tema del footer que buscaba, luego subo la nueva página.

Ahora me surgen dos problemas.

1º quiero la imagen de fondo no permita scroll hacia la derecha ¿como ajusto la imagen para evitar eso?

El menu en Firefox se ve bien pero en iexplorer se me mueve iunos 15 px arriba cual puede ser la causa.

IsaBelM · #6 (**permalink**) 05/01/2012, 14:59

si no quieres scroll horizontal, en body{overflow-x:hidden;}. pero si lo que quieres es que la imagen se adapte al ancho de pantalla

Cita:

<!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 content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
html {
display: block;
}

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#fondo {
position: fixed;
left: 0;
top: 0;
width: 100%;
min-width: 700px;
z-index: -1;
}
</style>
</head>
<body>

<img id="fondo" src="fondo.png" alt="" />

</body>
</html>

lo del menú no lo sé, no tengo ie en esta maquina

Legolas_Bilbao · #7 (**permalink**) 07/01/2012, 11:51

he actualizado el código y sigue sin salir bien el tema de la imagen.

Voy a seguir enredando con el tema del menu que es lo siguiente que me preocupa.

luego subo el código

IsaBelM · #8 (**permalink**) 08/01/2012, 08:33

has usado ese código en un archivo aparte?? si ninguna de esas dos opciones te viene bien, tu dirás que es lo que quieres.

pd: a qué viene tanta posición relative y absolute?? dónde se ha quedado usar margin y paddin??

Legolas_Bilbao · #9 (**permalink**) 15/01/2012, 03:34

Buenos Días Isabel,

Primero disculpas por tardar en contestar ya que está pagina web la estoy haciendo por hobby y tengo bastantes lagunas con este tema.

1º he limpiado todos los position absolute y relative salvo los del menu

El problema que surge entre diferentes navegadores es el siguiente:

En firefox y Chrome

En Iexplore

En firefox y chrome me pone un salto de linea que no consigo quitar, mientras que en iexplore me coloca bien el menu pero me lo mueve a la izquierda.

El codigo global de la pagina es el siguiente

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
body{
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, Sans-Serif;
      width:100%;
      height:100%;
      overflow-x:hidden;
      -ms-overflow-x:hidden;
    
    }
 
#main{
  left: 0;
  top: 0;
  cursor:default;
  height:100%
}
 
#cab_aux{
    width:100%;
    height:40px;
    background-color:#060;
    }
    
#pie_aux{
        width:100%;
        height:40px;
        background-color:#060;
    }   
#logo{
    
    margin-left:18%;
    width:860px;
    height:150px;
    }
    
#logo_cab{
    
    padding:1;
    }   
    
#cuerpo{
    background:#FFF;
    margin-left:18%;
    width:860px;
    font-size:12px;
    height:100%;
    padding:0;
    }   
 
#cuerpo_noticias{
        width:840px;
        background-color:#FFFFFF;
        margin:4px 0px 28px 8px;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
 
}
    
.boton{
    background:url(../img/noticia.gif)  no-repeat center;
    text-align:center;
    font-weight:bold;
    color:#fff;
    height:40px;
    width:40px;
 
    }   
    
.boton:hover{
    background:url(../img/noticia_2.gif)  no-repeat center;  text-align:center;
    }   
    
.enlaces{
    color:#FFF;
    text-decoration:none;
}
 
#menu{
    width:860px;
    height:40px;
    background-color:#fff;
    margin-left:18%;
 
}
    
    
#cuerpo_pat{
        width:840px;
        background-color:#FFFFFF;
        height:200px;
        padding:2;
        margin:4px 8px 28px 8px;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
}
    
#cuerpo_post{
    
        width:840px;
        background-color:#FFFFFF;
        height:140px;
        padding:2;
        margin:4px 8px 28px 8px;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
    
        -webkit-border-radius: 15px;    
        -moz-border-radius: 15px;   
        border-radius: 15px;
    
}   
 
.titulo_post{
    font-weight:bold; font-size:16px; background-color:#033; color:#FFF; height:30px; 
    background:-webkit-linear-gradient(#033,#036D2E); 
    background: -moz-linear-gradient(#033,#036D2E);
    background: -o-linear-gradient(#033,#036D2E);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#036D2E');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#36D2E')";
    -webkit-border-top-left-radius: 15px;
        -webkit-border-top-right-radius: 15px;
        -moz-border-radius-top-left: 15px;
        -moz-border-radius-top-right: 15px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
 
.pie_titulo{
    background:-webkit-linear-gradient(#036D2E,#033); 
    background: -moz-linear-gradient(#036D2E,#033);
    background: -o-linear-gradient(#036D2E,#033);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#036D2E', endColorstr='#036D2E');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#036D2E', endColorstr='#003300')";
    -webkit-border-bottom-left-radius: 15px;
        -webkit-border-bottom-right-radius: 15px;
        -moz-border-radius-bottom-left: 15px;
        -moz-border-radius-bottom-right: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    
    }
 
a {
    color:#fff;
    text-decoration:none;
 
}
 
#menus{
    
    color:#FFF; font-weight:bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url(border-radius.htc);
    border: 1px solid #030;
    cursor : pointer;
    padding:5px 19px 0px;
    background:-webkit-linear-gradient(#033,#036D2E);
    background: -moz-linear-gradient(#033,#036D2E);
    background: -o-linear-gradient(#033,#036D2E);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#036D2E');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#36D2E')";
    font-size:14px;
 
    }
 
#menus li{
    float:left;
    position:relative;
    list-style:none;
    margin:0 10px;
    padding:0 0 8px;
    }
 
#menus a{
    
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  0px 5px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
 
    
    }
 
#menus .current a, #menus li:hover > a {
 
    background: #090; /* for non-css3 browsers */
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    
}
 
#menus ul li:hover a, #menus li:hover li a {
    border: none;
    color: #FFF;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
 
#menus ul a:hover {
    
 
  color: #fff !important;
 
    background: #090;
    -webkit-border-radius: 1.0em;
    -moz-border-radius: 1.0em;
 
}
/* level 2 list */
#menus ul {
    top: 25px;
    z-index: 1000;
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    left: 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color:#036D2E;
    
}
/* dropdown */
#menus li:hover > ul {
    display: block;
}
 
#menus ul li {
  float: none;
  margin: 0;
  padding: 4px;
}
#menus ul a {
  font-weight: bold;
  color:#FFF;
  
}
 
/* las definiciones de los submenues internos */
#menus ul ul {
  left: 181px;
  top: -3px;
}
 
/* rounded corners for first and last child */
#menus ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#menus ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}
 
#menus { display: inline-block; } 
html[xmlns] #menus { display: block; }
* html #menus { height: 1%; }
 
#fondo{
    left:0;
    top:0;
    height:100%;
    width:100%; 
    z-index:-1;
    position:fixed;
    min-width:600px;
    }

y el de la página es

Código PHP:

  <!-- logo --> 
 
<div id="logo"> 
 
        <img src="./img/cabecera/cab1.gif" title="Logo Club Norte&ntilde;o" alt="logo" id="logo_cab"/> 
 
</div> 
 
<!-- fin logo --> 
 
 
 
<!-- menu --> 
 
<div id="menu"> 
 
 <ul id="menus" > 
 
  <li> 
 
    <a href="index_nuevo.php" class="enlaces" title="inicio">Inicio</a> 
 
  </li> 
 
  <li> 
 
      <a href="#">Club Norte&ntilde;o</a> 
 
    <ul> 
 
        <li><a href="origenClubNortenyo.php" title="Origen CNG">Origen</a></li> 
 
        <li><a href="colaboradores.php" title="Acuerdos y Colaboradores">Colaboradores</a></li> 
 
        <li><a href="./foro" title="Foro">Foro</a></li> 
 
        <li><a href="./noticias" title="Noticias">Noticias</a></li> 
 
    </ul>     
 
  </li>   
 
  <li> 
 
    <a href="#">Liga Norte&ntilde;a</a> 
 
  </li>   
 
  <li> 
 
      <a href="#">Eventos</a> 
 
  </li>  
 
 </ul>   
 
 </div> 
 
  
 
<!-- fin menu --> 
 
 
 
<!-- cuerpo --> 
 
<div id="cuerpo">

¿porque puede ser ese error?

mucha sgracias

javiandgo · #10 (**permalink**) 15/01/2012, 09:04

Te falta hacer un reset a los estilos el agente stylesheet te pone un padding inicial de 40px, has lo siguiente:

Código CSS:

Ver originalul, menu, dir {padding:0; margin:0;}

Por otro lado define el background sobre el #menu y no sobre el ul para que tome el relleno completo, tambien deberias agregar un display:block a ese estilo.

Legolas_Bilbao · #11 (**permalink**) 26/01/2012, 11:50

GRacias por las respuestas , ya he conseguido corregir alguna cosilla

Espero tener un poco mas de tiempo este fin de semana para dedicarle y quitar el dichoso salto de linea existente entre el menu y el cuerpo

muchas gracias por todo

Legolas_Bilbao · #12 (**permalink**) 27/01/2012, 11:50

Solventado con h1 {padding:0; margin:0}