Estoy construyendo mi primera página donde hay un fondo rojo parcial. Estoy usando un div pero no puedo configurarlo a la altura deseada entre el control deslizante. El look deseado es el siguiente;
En cambio, el div se reduce y tuve que cambiar el color de la fuente para hacerla visible, como se puede comprobar aquí. Lo intenté con la posición, el origen del fondo, pero no obtuve el resultado deseado
Código HTML:
...
<body>
<div id="redBackground">
<table align="center">
<!-- firsrt row -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900"><img src="/images/images/logoNoBackgroundSml.png" width="90" height="93" alt="Ecomir Logo"></td></tr>
<tr><td width="auto"></td></tr>
<!-- second row -->
<tr><td width="auto"></td></tr>
<tr><td align="center" width="900">
<!-- menu definition -->
<ul id="main-menu" class="sm sm-simple" style="position:relative;z-index:100;">
<li><a href="index.html">Principal</a></li>
<li><a href="historia.html">Historia y Evolución</a></li>
<li><a href="calidad.html">Calidad y Medio Ambiente</a></li>
<li><a href="">Nuestra Actividad</a>
<ul>
<li><a>Obra Actual</a>
<ul>
<li><a href=""/>Rehabilitación</a></li>
<li><a href=""/>Edificación</a></li>
<li><a href=""/>Obra Civil</a></li>
</ul>
</li>
<li><a href="">Obra Realizada</a>
<ul>
<li><a href=""/>Rehabilitación</a></li>
<li><a href=""/>Edificación</a></li>
<li><a href=""/>Obra Civil</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</td></tr>
<tr><td width="auto"></td></tr>
<!-- third row = space -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900" height="20"></td></tr>
<tr><td width="auto"></td></tr>
<!-- fourth row SlidesJS -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900">
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides">
<img src="/images/images/slide/example-slide-1.jpg">
<img src="/images/images/slide/example-slide-2.jpg">
<img src="/images/images/slide/example-slide-3.jpg">
<img src="/images/images/slide/example-slide-4.jpg">
</div>
</div>
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$("#slides").slidesjs({
width: 900,
height: 506,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
</td></tr>
<tr><td width="auto"></td></tr>
...
CSS:
#redBackground{
background: url(../images/redBackground.png) no-repeat center;
}
El tamaño de redBackground.png es 1400x600.
Respuestas
0 para la respuesta № 1Primero tienes que tirar de tu <table> fuera de #redBackground :
HTML
<div id="redBackground"></div>
<table align="center">
<!-- firsrt row -->
<tbody><tr><td width="auto"></td></tr>
<tr><td align="left" width="900"><img src="/images/images/logoNoBackgroundSml.png" width="90" height="93" alt="Ecomir Logo"></td></tr>
<tr><td width="auto"></td></tr>
<!-- second row -->
<tr><td width="auto"></td></tr>
<tr><td align="center" width="900">
<!-- menu definition -->
<ul id="main-menu" class="sm sm-simple" style="position:relative;z-index:100;" data-smartmenus-id="13940176605568179">
<li><a href="index.html">Principal</a></li>
<li><a href="historia.html">Historia y Evolución</a></li>
<li><a href="calidad.html">Calidad y Medio Ambiente</a></li>
<li><a href="" class="has-submenu"><span class="sub-arrow">+</span>Nuestra Actividad</a>
<ul>
<li><a class="has-submenu"><span class="sub-arrow">+</span>Obra Actual</a>
<ul>
<li><a href="">Rehabilitación</a></li>
<li><a href="">Edificación</a></li>
<li><a href="">Obra Civil</a></li>
</ul>
</li>
<li><a href="" class="has-submenu"><span class="sub-arrow">+</span>Obra Realizada</a>
<ul>
<li><a href="">Rehabilitación</a></li>
<li><a href="">Edificación</a></li>
<li><a href="">Obra Civil</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</td></tr>
<tr><td width="auto"></td></tr>
<!-- third row = space -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900" height="20"></td></tr>
<tr><td width="auto"></td></tr>
<!-- fourth row SlidesJS -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900">
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides" style="overflow: hidden; display: block;">
<div class="slidesjs-container" style="overflow: hidden; position: relative; width: 1170px; height: 657.8px;"><div class="slidesjs-control" style="position: relative; left: 0px; width: 1170px; height: 657.8px;"><img src="/images/images/slide/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/" class="slidesjs-slide" slidesjs-index="0" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; -webkit-backface-visibility: hidden; display: none;"><img src="/images/images/slide/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/" class="slidesjs-slide" slidesjs-index="1" style="position: absolute; top: 0px; left: -1170px; width: 100%; z-index: 0; display: block; -webkit-backface-visibility: hidden;"><img src="/images/images/slide/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/" class="slidesjs-slide" slidesjs-index="2" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; display: block; -webkit-backface-visibility: hidden;"><img src="/images/images/slide/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/" class="slidesjs-slide" slidesjs-index="3" style="position: absolute; top: 0px; left: 1170px; width: 100%; z-index: 0; display: block; -webkit-backface-visibility: hidden;"></div></div>
<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a><a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a><a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a><a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a><ul class="slidesjs-pagination"><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="">1</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1" class="">2</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2" class="active">3</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3" class="">4</a></li></ul></div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
End SlidesJS Required-->
<!-- SlidesJS Required: Link to jquery.slides.j
<script src="jquery/jquery.slides.min.js"></script>
End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$("#slides").slidesjs({
width: 900,
height: 506,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
<!-- End SlidesJS Required -->
</td></tr>
<tr><td width="auto"></td></tr>
<!-- =============================================================================== -->
<!-- ================= TEXT GOES UNDER THIS COMMENT ================= -->
<!-- =============================================================================== -->
<!-- fith row -->
<tr><td width="auto"></td></tr>
<tr><td width="900" height="auto" align="center">
<div class="columns">
<div class="left-column">
<div id="content">
<h1>Ecomir Estructuras S.L.</h1>
<h2>Página en construcción</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Texto</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</td></tr>
<tr><td width="auto"></td></tr>
<!-- sixth row: footer -->
<tr><td width="auto"></td></tr>
<tr><td width="900" align="center">
<div id="footer" data-role="content">
<table width="900" border="0" summary="Table to contain footer">
<tbody><tr>
<td width="300" align="left">
<div class="left-footer" id="left-footer" data-role="content">
<p></p>
<p class="left-footer"><font size="+1">OFICINAS CENTRALES</font></p>
<p></p>
<p class="left-footer"><font size="-1">Almirantes Matos, 35</font></p>
<p class="left-footer"><font size="-1">36002 PONTEVEDRA</font></p>
<p class="left-footer"><font size="-1">Tlfo 986869940 Fax 98685362</font></p>
</div>
</td>
<td width="300" align="center"><img src="/images/images/eccWhite.png" width="300" height="100"></td>
<td width="300" align="right">
<div class="right-footer" id="right-footer" data-role="content">
<p><font size="+1">ECOMIR ESTRUCTURAS SL</font></p>
<p></p>
<font size="-1">
<p>estructuras construcciones y contratas</p>
<p>info@ecomir.es</p></font>
</div>
</td>
</tr>
</tbody></table>
</div>
</td></tr>
<tr><td width="auto"></td></tr>
</tbody></table>
Y el CSS:
#redBackground {
background: red; /* not the exact color, fell free to change it. */
width: 100%;
position: absolute;
left: 0;
height: 700px;
top: 290px;
}
Algunas notas :
- No necesitas una imagen grande para rellenar un elemento con color. los
backgroundla propiedad hará el trabajo - Nunca usar
<table>para su diseño, solo para información tabular. Tu código no es estándar y seguramente se romperá en algunos navegadores - Respeta el flujo de HTML. Si desea que un elemento sea independiente del flujo (allí: su fondo rojo), simplemente póngalo fuera del flujo (no incluya contenido)
0 para la respuesta № 2
En su uso de archivos css
#redBackground{
background: url(../images/redBackground.png) no-repeat center;
position:fixed;
top: 100px;
}
Puedes ajustar la posición superior como quieras.
0 para la respuesta № 3
#redBackground{
background: url(../images/redBackground.png) no-repeat 150px center;
}
donde 150px es el valor superior del fondo.
0 para la respuesta № 4
También puedes usar de inmediato background-position-y o background-position-x .
Por ejemplo puedes usar background-position-y:-10px; para empujar el fondo 10px hacia arriba.
0 para la respuesta № 5
Esto es muy simple, usa este código en su lugar:
background: url(../images/redBackground.png) no-repeat top 310px center;
Dame tu opinión sobre esta solución.