プログラミングの助け、質問への回答 / Jquery / DIV背景：位置を固定する方法 - jquery、css、html

DIVの背景：位置を修正する方法 - jquery、css、html

背景が赤くなっている最初のページを作成しています。divを使用していますが、スライダーを動かして希望の高さに設定することはできません。望ましい外観は次のとおりです。

その代わりにdivが低くなり、確認できるようにフォントの色を変更して表示させる必要がありました。ここに。私は位置、背景、原点を試してみましたが、希望の結果が得られませんでした

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&oacute;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&oacute;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&oacute;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サイズは1400 x 600です。

回答：

回答№1は0

最初にあなたはあなた自身を引っ張らなければなりません <table> の外へ #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>

そしてCSS：

#redBackground {
background: red; /* not the exact color, fell free to change it. */
width: 100%;
position: absolute;
left: 0;
height: 700px;
top: 290px;
}

いくつかのメモ：

あなたは色で要素を塗りつぶすために大きな画像を必要としません。ザ background プロパティは仕事をします
使用しない <table> あなたのレイアウトに表形式の情報のみです。あなたのコードは標準的ではなく、確かにいくつかのブラウザで壊れるでしょう
HTMLフローを尊重する。要素をフローから独立させたい場合（そこにある：あなたの赤い背景）、単にフローから外してください（そこにコンテンツを含めないでください）。

回答№2の場合は0

あなたのcssファイルで

#redBackground{
background: url(../images/redBackground.png) no-repeat center;
position:fixed;
top: 100px;
}

あなたはあなたが望むように上の位置を調整することができます。

回答№3の場合は0

#redBackground{
background: url(../images/redBackground.png) no-repeat 150px center;
}

150pxは背景の最高値です。

回答№4の場合は0

またすぐに使えます background-position-y または background-position-x .

例えばあなたが使用することができます background-position-y:-10px; 背景を10pxにします。

回答№5の場合は0

これは非常に簡単です。代わりにこのコードを使用してください。

background: url(../images/redBackground.png) no-repeat top 310px center;

この解決策についてあなたのフィードバックをください。

DIVの背景：位置を修正する方法 - jquery、css、html

回答：

関連する質問