Buduję swoją pierwszą stronę, na której występuje częściowe czerwone tło, używam elementu div, ale nie jestem w stanie ustawić go na żądanej wysokości za suwakiem. Pożądany wygląd jest następujący;
Zamiast tego, div idzie niżej i musiałem zmienić kolor czcionki, aby była widoczna, jak możesz sprawdzić tutaj. Próbowałem z pozycją, pochodzeniem tła, ale nie uzyskałem pożądanego rezultatu
Kod 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;
}
redBackground.png rozmiar to 1400x600.
Odpowiedzi:
0 dla odpowiedzi № 1Najpierw musisz wyciągnąć <table> z #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>
A CSS:
#redBackground {
background: red; /* not the exact color, fell free to change it. */
width: 100%;
position: absolute;
left: 0;
height: 700px;
top: 290px;
}
Niektóre uwagi:
- Nie potrzebujesz dużego obrazu, aby wypełnić element kolorem. The
backgroundWłaściwość wykona zadanie - Nigdy nie używaj
<table>dla twojego układu, tylko dla informacji tabelarycznych. Twój kod nie jest standardowy i na pewno pęknie w niektórych przeglądarkach - Respektuj przepływ HTML. Jeśli chcesz, aby element był niezależny od przepływu (tam: twoje czerwone tło), po prostu wyrzuć go z przepływu (nie zawiera zawartości)
0 dla odpowiedzi nr 2
W używaniu pliku css
#redBackground{
background: url(../images/redBackground.png) no-repeat center;
position:fixed;
top: 100px;
}
możesz dostosować najwyższą pozycję, jak chcesz.
0 dla odpowiedzi № 3
#redBackground{
background: url(../images/redBackground.png) no-repeat 150px center;
}
gdzie 150px jest najwyższą wartością tła.
0 dla odpowiedzi nr 4
Możesz również użyć od razu background-position-y lub background-position-x .
Na przykład możesz użyć background-position-y:-10px; aby przesunąć tło o 10 pikseli na górę.
0 dla odpowiedzi № 5
To bardzo proste, użyj tego kodu:
background: url(../images/redBackground.png) no-repeat top 310px center;
daj mi swoją opinię na temat tego rozwiązania.