CSS - Espacio blanco final

   
Vista:

Espacio blanco final

Publicado por Noelia (5 intervenciones) el 23/06/2014 19:52:50
Hola,

A ver si me podéis ayudar.

Yo utilizo posicionamiento DIV de forma relativa. En mi web he tenido que hacer -269 px del top para que un div se coloque por debajo de otro y conseguir la maquetación deseada.

El problema viene ahora que estoy colocando el FOOTER y claro si hago -269px al footer, el salto en blanco se desplaza al final de la web.

Adjunto una imagen del hueco que queda entre un el div superior y el footer.



Alguien se le ocurre una solución?Gracias
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 Jose maria

Espacio blanco final

Publicado por Jose maria (9 intervenciones) el 24/06/2014 21:04:57
Hola Noelia:
Me confunde la causa del espacio en blanco. Sin ver el código o un enlace a la página, no lo entiendo.

Llego a comprender que (supongo que en altura) utilices -269px. Ello no afecta a que el div termine donde le corresponda y el FOOTER continúe inmediatamente abajo. Pero tiene que haber algo que obligue (margin, padding o un lateral oculto) a comprometer ese espacio en blanco.

Me cabe pensar que algo hay oculto que desplace la altura pero no puedo adivinar.
¿Podrías mostrar el código HTML y CSS?
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

Espacio blanco final

Publicado por Noelia (5 intervenciones) el 25/06/2014 01:26:14
Gracias Jose Maria. La cosa es que la imagen : lineas_fond.png va por encima de todo, y el main_content por debajo, de forma de que se superponga, de ahi el -269px.

Mi pregunta es, esto afecta a que el footer no vaya inmediatamente después del div MAIN_CONTENT?

Aqui adjunto el código HTML

<div class="container">
<div class="header">
<a href="http://www.asdfas.com">
<img id="Insert_logo" src="images/logo_Neumaticos.png" alt="Neumáticos Extremadura" name="Servicios neumáticos Extremadura" /></a>
<img class="lineas" src="images/lineas_fond.png"/>
<!-- end .header --></div>
<div class="sidebar1">
</div>
<div class="sidebar2">
<ul class="nav">
<li><a href="#">Ofertas</a></li>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="contacto.php">Contacto</a></li>
<li><a href="localizacion.html">Localización</a></li>
</ul>
</div>
<div class="main_content">
<div class="content">
<div class="cont_info">
<h2>Localizanos</h2>
<div class="column">
Nos encontramos en .</div>
<div id="map-canvas"></div>
</div>

<!-- end .content --></div>
</div>
<div style="clear: both"></div>
<div class="art-footer">
<div class="art-tag-condiciones"><p><a href="#" id="dialog-link1" >
Condiciones de uso</a></p></div>
<div class="art-tag-politica"><p><a href="#" id="dialog-link">
Política de privacidad</a></p></div>

<div id="dialog1" title="Condiciones de uso">
<!--Condiciones de uso-->
<p>
En virtud de lo dispuesto en la Ley 15/1999, de 13 de diciembre, de Protección
de Datos de Carácter Persona.....
</p>

</div>
<div id="dialog" title="Política de privacidad">
<p>
En virtud de lo dispuesto en la Ley 15/1999, de 13 de diciembre, de Protección
de Datos de Carácter Personal, l........
</p>

</div>
<div class="copy_right">@ 2014 Neumáticos</div>
</div>
<!-- end .container --></div>

Aqui el css más relevante.
.container {
width: 100%;
min-width: 680px;
}

.header{
height: 188px;
}

.lineas{
display: block;
position: relative;
top: -42px;
margin-left: auto;
margin-right: auto;
z-index: -1;
float: right;
}

.sidebar1 {
width: 100%;
top: -230px;
height:44px;
float:left;
list-style-type:none;
margin:0 auto;
padding:0;
position:relative;
background-image:url(../images/background_head_top_small_web_n.png);
z-index: -2;
}

.main_content{
overflow: hidden;
height: auto;
position: relative;
width: 100%;
top: -269px;
}

.cont_info{
border: 2px solid #003233;
border-radius: 20px;
border-color: #666;
position: relative;
width: 83%;
margin-left: auto;
margin-right: auto;
background-color: rgba(247, 148, 29, 0.54);
font-size: smaller;
padding-bottom: 18px;
margin-top: 0px;
}

.content {
height: 100%;
position: relative;
z-index: -2;
background-image: url(../images/background_forest.png);
background-repeat: no-repeat;
background-position: center;
}

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 Jose maria

Espacio blanco final

Publicado por Jose maria (9 intervenciones) el 25/06/2014 12:14:13
Disculpa la demora para responder al tema.

Creo que lo que genera el espacio en blanco es <div class="content">

1
2
3
4
5
6
7
8
.content {
height: 100%;
position: relative;
z-index: -2;
background-image: url(../images/background_forest.png);
background-repeat: no-repeat;
background-position: center;
}

¿No habrás querido decir width: 100%?
Porque si das un 100% a la altura, creará ese espacio aunque no tenga contenido (espacio en blanco). Y un z-index: -2; podría llevar al fondo el contenido mostrándome igualmente el fondo blanco.

Si tu idea es que el mapa (<div id="map-canvas"></div>) llene la página, deberás programarlo para verlo y que llene el espacio. En este caso, yo programaría directamente en CSS #map-canvas {} dándole un ancho y alto específico eliminando el alto de <div class="content">.
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

Espacio blanco final

Publicado por Noelia (5 intervenciones) el 25/06/2014 14:18:01
He cambiado para utilizar min-height y así asegurarme que el contenido está visible y quitando el main_content el overflow todo se me ajusta.

.main_content{
overflow: hidden;
height: auto;
position: relative;
width: 100%;
top: -269px;
}

Lo que pasa que si quito el overflow el contenido no se me queda como yo quiero. Como puedes ver el las imágenes el texto se ve influido por la imagen que está por encima...




tal vez sea más facil solucionar esto que el salto en blanco?alguna idea más?
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 Jose maria

Espacio blanco final

Publicado por Jose maria (9 intervenciones) el 28/06/2014 00:26:02
Hola Noelia:

Mis disculpas nuevamente ya que mi participación/colaboración con es foro depende de mi tiempo/trabajo.

Por las últimas imágenes que muestras, algo hay (oculto o visible) en el espacio que ocupa "Nos encontramos en ..." No nos dices cuál es el div y los de su entorno con los CSS correspondientes.

Ya que pueden existir cosas que pensamos que no nos influyen (y puede ser que sí), y que no comentas en tu código, ¿tienes algún enlace para ver la página?

Hay cosas que retocaría de tu CSS pero sin duda no son el error que comentas. La diferencia de estilo de programación no es importante si los resultados son los que queremos.

Coméntanos cómo va, lo que quieres y lo que tienes.

Saludos.
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

Espacio blanco final

Publicado por Noelia noe.cd@outlook.com (5 intervenciones) el 28/06/2014 10:22:18
Gracias Jose Maria, he subido a un servidor la web, lo básico para se vea, creo que es mejor

Lo que te decía, me gustaría que no se viera tan estrecho lo que es la dirección y bueno posteriormente en el mismo DIV irán cosas escritas y me pasará lo mismo.

http://ntrinidad.com/varios/localizacion.html

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
Imágen de perfil de Jose maria

Espacio blanco final

Publicado por Jose maria (9 intervenciones) el 28/06/2014 18:52:59
Hola Noelia:

Me ha costado un poco entender el problema pero te paso los datos de una posible solución.

El problema surge de
1
<img class="lineas" src="images/lineas_fond.png"/>

Por más que un png sea transparente, en el código trabaja todo el espacio, si bien nos permite ver el fondo.
Así que mi propuesta es pasarlo a position:absolute; de forma que no afecte al resto del HTML.
Quedaría en el CSS así (creo que me equivoco en menos de 2 px de su posición):
1
2
3
4
5
.lineas{
    position:absolute;
    top: 85px;
	right:0;
}

Con ello te aparece el problema derivado de tu necesario desplazamiento negativo de sidebar1 y sidebar2
Según mi estimación deberías corregirlos de los valores negativos superiores a 200px a top: -52px; el primero y top: -95px; el segundo (siempre muy aproximado).

Estos valores negativos vienen derivados de
1
2
3
4
.header{
    height: 188px;
}
/* La imagen apenas tiene 117 píxeles de altura*/

Veo que aparece un problema es <h2>Localización</h2> El tratamiento que le has de dar es similar a las soluciones anteriores
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

Espacio blanco final

Publicado por Noelia (5 intervenciones) el 29/06/2014 23:16:50
Anda con el posicionamiento, gracias Jose Maria por todo el conjunto de consejos que han resuelto mis fallos de programación. Como tu me has dicho he utilizado el posicionamiento ABSOLUTO y todo queda como yo quería desde un principio.

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