Sto costruendo la mia prima pagina dove c'è uno sfondo rosso parziale Sto usando un div ma non sono in grado di impostarlo all'altezza desiderata dietro al cursore. L'aspetto desiderato è il seguente;
Invece, il div diventa più basso e ho dovuto cambiare il colore del carattere per renderlo visibile, come è possibile controllare Qui. Ho provato con la posizione, origine di sfondo, ma non ho ottenuto il risultato desiderato
Codice 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;
}
La dimensione redBackground.png è 1400x600.
risposte:
0 per risposta № 1Prima devi tirare il tuo <table> fuori da #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>
E il CSS:
#redBackground {
background: red; /* not the exact color, fell free to change it. */
width: 100%;
position: absolute;
left: 0;
height: 700px;
top: 290px;
}
Alcune note:
- Non hai bisogno di un'immagine grande per riempire un elemento con il colore. Il
backgroundla proprietà farà il lavoro - Non usare mai
<table>per il tuo layout, solo per informazioni tabulari. Il tuo codice non è standard e sicuramente si romperà su alcuni browser - Rispetta il flusso HTML. Se vuoi che un elemento sia indipendente dal flusso (lì: il tuo sfondo rosso), basta metterlo fuori dal flusso (non includere contenuti in là)
0 per risposta № 2
Nel tuo file css usa
#redBackground{
background: url(../images/redBackground.png) no-repeat center;
position:fixed;
top: 100px;
}
puoi regolare la posizione superiore come desideri.
0 per risposta № 3
#redBackground{
background: url(../images/redBackground.png) no-repeat 150px center;
}
dove 150px è il valore superiore dello sfondo.
0 per risposta № 4
Inoltre puoi usare subito background-position-y o background-position-x .
Ad esempio puoi usare background-position-y:-10px; per spingere lo sfondo 10px in alto.
0 per risposta № 5
Questo è molto semplice, usa invece questo codice:
background: url(../images/redBackground.png) no-repeat top 310px center;
dammi il tuo feedback su questa soluzione.