2

Estoy empezando a diseñar una pagina web y ya he tenido los primeros problemas. Soy bastante nuevo en esto del php así que ruego clemencia.

Mi objetivo es tener un div (PageTopWrap) centrado en la cabecera (PageTop), para que mis objetos de la cabecera, como por ejemplo el logo queden centrados dentro de este div, y que no salgan en un extremo, que es lo que me está pasando y no entiendo porque.

Este es mi código:

<!DOCTYPE html> 
<html>
<head>
<meta charset=" UTF-8">
<title> Titulo de la Pagina </title>
<style type="text/css">
    body {margin: 0px;}
#pageTop {
  background: url(style/header.png) repeat-x;
  heigh: 90px;
}
#pageTop > #PageTopWrap {
  width: 900px;
  height: 90px;
  margin: 0px auto;
}
#pageTop > #PageTopWrap > #PageTopLogo {
  height: 100px;
  width: 100px;
  margin: 0px;
}
</style>                  
</head> 
<body>
<div id="pageTop">
  <div id="pageTopWrap">
        <div id="pageTopLogo">
            <img src="images/logo.png" alt="logo"></img>
        </div>
  </div>
</div>
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
</body>
</html>

Muchas gracias de antemano.

Saludos

1 respuesta 1

1

En primer lugar tienes un problema de mayúsculas, el id del div pageTopLogo lo tienes con la p minúscula y en tu css tienes la P mayúscula.

En segundo lugar le he agregado una propiedad mas a tu estilo para el pageTopLogo

text-align: center;

Resultado;

<!DOCTYPE html> 
<html>
<head>
<meta charset=" UTF-8">
<title> Titulo de la Pagina </title>
<style type="text/css">
body {margin: 0px;}
#pageTop {
  background: url(style/header.png) repeat-x;
  height: 90px;
}
#pageTop > #PageTopWrap {
  width: 900px;
  height: 90px;
  margin: 0px auto;
  text-align: center;
}
#pageTop > #PageTopWrap > #PageTopLogo {
  height: 100px;
  width: 100px;
  margin: 0px;
}
</style>                  
</head> 
<body>
<div id="pageTop">
  <div id="PageTopWrap">
        <div id="pageTopLogo">
            <img src="images/logo.png" alt="logo"></img>
        </div>
  </div>
</div>
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
</body>
</html>

Tambien te recomiendo leer las recomendaciones de la W3C para que trabajes sin problemas con CSS

introducir la descripción del enlace aquí

4
  • 1
    Funciona, muchas gracias!! Errores del primer día... me miraré W3C el 7 mar. 2019 a las 0:39
  • 1
    @AdriadeJuan Excelente, recuerda marcar como aceptada la respuesta. el 7 mar. 2019 a las 0:43
  • 1
    También te sirve Display: flex; justify content: center; una manera más profesional y moderna de hacerlo
    – Header90
    el 7 mar. 2019 a las 3:16
  • 1
    @Header90 si, existe mas de un camino para llegar a roma, también puede usar Grid que es mas profesional que Display: flex; justify content: center; pero no se le puede complicar ya que esta iniciando y no posee conocimiento de esos conceptos. el 7 mar. 2019 a las 12:08

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.