CSS - Dos páginas iguales se ven distintas.

   
Vista:

Dos páginas iguales se ven distintas.

Publicado por aitor (3 intervenciones) el 02/07/2014 16:04:22
Hola, estoy empezando a hacer una web con Bootstrap y he copiado al servidor una plantilla de inicio. A pesar de ser la misma plantilla, se aprecia una diferencia importante entre la original y la mía, pero soy incapaz de encontrar el código CSS que genera esa diferencia.

Las dos páginas se pueden comparar aquí:

Mi versión:
http://www.e451.net/ma/jumbo.html

La versión original en la web de bootstrap:
http://getbootstrap.com/examples/jumbotron/

Como puede apreciarse, la parte gris se mete por debajo de la barra de navegación, quedando más cerca del lado superior de la página.

Agradecería cualquier indicación de la causa.

Un saludo.
Aitor.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema

Dos páginas iguales se ven distintas.

Publicado por txema (9 intervenciones) el 05/07/2014 00:19:36
Hola aitor:

No te contesté antes en la espera de que te dijesen algo los "sabios".

Analizando las dos web's vi que los css eran distintos. Posiblemente porque los temas que se generan son diferentes.
Aparentemente noveía diferencias.

Sé que el problema está en el padding/margin de <div class="jumbotron"> combinado con <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> y su posición (CSS)

Si sigues con las dudas, aunque los CMS's los odie, creo que puedo ayudarte en lo que el tiempo me permita,

Seguimos en contacto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

Dos páginas iguales se ven distintas.

Publicado por txema (9 intervenciones) el 06/07/2014 18:11:39
Hola de nuevo aitor:

Dándome un tiempo para revisar los CSS de ambas páginas, parece claro que en http://getbootstrap.com/examples/jumbotron/ en su archivo CSS comprimido (bootstrap.min.css) <div class="jumbotron"> está definido como:
1
2
3
4
.jumbotron {
    padding-bottom: 48px;
    padding-top: 48px;
}
Y en http://www.e451.net/ma/jumbo.html tenemos en el CSS en bootstrap.css (línea 4381)
1
2
3
4
.jumbotron {
    padding-bottom: 16px;
    padding-top: 16px;
}

Ello marca la diferencia que no solamente lo es arriba sino también abajo dentro del espacio del <h1>Hello, world!</h1>

Aparentemente estos los los archivos principales y las líneas de código mostradas son las que se muestran como dominantes.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Dos páginas iguales se ven distintas.

Publicado por Aitor (3 intervenciones) el 16/07/2014 08:18:30
En efecto, ese era el problema. Gracias por localizarlo.

Muchas gracias y un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Dos páginas iguales se ven distintas.

Publicado por Aitor (3 intervenciones) el 16/07/2014 08:17:16
Muchas gracias por la respuesta. En efecto, ahi estaba el problema.

Un saludo y gracias de nuevo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar