【问题标题】:Text behind image图片后面的文字
【发布时间】:2013-07-07 17:06:34
【问题描述】:

我做了一个导航栏。代码如下:

<style type="text/css">
.topbackground {
        background-repeat:no-repeat;
    background-position: top;
    height: 150px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#FFFFFF;

}


.realnewsbg {
        background-image: url(http://tinkatips.hol.es/nav.png);
width: 1000px;
height: 122px;
    float:left;
        margin-top:-130px;
    margin-left:120px;
    text-align:center;
}


.realnews {
background-image: url(http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif);
width: 1000px;
height: 122px;
    float:left;
        margin-top:-40px;
    margin-left:220px;
    text-align:left;
}

.tttime {

width: 156px;
height: 122px;
    padding-top:-0px;
        margin-top:-40px;
    margin-left:850px;
    text-align:center;
}


body {background-color:#b0c4de;}
</style>

<style type="text/css">

#ajaxticker1{
width: 1000px;
height: 100px;
}

#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}

.someclass{ //class to apply to your scroller(s) if desired
}

</style>

<script src="ajaxticker.js" type="text/javascript">

/***********************************************
* Ajax Ticker script (txt file source)- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<body>
<center><div class="topbackground">
<img id="Image-Maps_3201307070909053" src="http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif" usemap="#Image-Maps_3201307070909053" border="0" width="1000" height="122" alt="" />
<map id="_Image-Maps_3201307070909053" name="Image-Maps_3201307070909053">
<area shape="rect" coords="19,6,196,66" href="http://www.google.com" alt="" title=""    />
<area shape="rect" coords="232,7,409,67" href="http://www.google.com" alt="" title=""    />
<area shape="rect" coords="438,5,615,65" href="http://www.twitter.com/" alt="" title=""    />
<area shape="rect" coords="651,7,828,67" href="http://www.google.com" alt="Coming Soon !" title="Coming Soon !"    />
<area shape="rect" coords="998,120,1000,122" href="http://www.image-maps.com/index.php?aff=mapped_users_3201307070909053" alt="Image Map" title="Image Map" />
</map><div class="realnewsbg"></div>

<div class="realnews"><script type="text/javascript">
var xmlfile="tickercontent.txt" //path to ticker txt file on your server.
//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script></div>

<div class="tttime">
<script type="text/javascript" src="http://www.24webclock.com/clock24.js"></script>
<table border="0" bgcolor="#a0a0a0" cellspacing=1 cellpadding=3 class="clock24st" style="line-height:14px; padding:0;">
<tr><td bgcolor="#FFFFFF" class="clock24std" style="font-family:arial; font-size:12px;"><a href="http://www.24webclock.com/de/"><img src="http://www.24webclock.com/ico.gif" width="14" height="14" border="0" alt="Kostenlose Uhr fur die Homepage" align="left" hspace="2"></a> <a href="http://www.24webclock.com/" style="text-decoration:none;"><span class="clock24s" id="clock24_77176" style="color:#6393C3;">free clock for website</span></a></td></tr>
</table>
<script type="text/javascript">
var clock24_77176 = new clock24('77176',0,'%HH:%nn:%ss %P','en');
clock24_77176.daylight('GB'); clock24_77176.refresh();
</script></div>
</div>
</div>
<div class="header"></div></div></body>

您可以在此处找到其他文件:http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm。问题是由于时钟的原因,自动收报机位于导航栏 (nav.png) 的后面。我怎么能阻止它?

【问题讨论】:

标签: html css ticker


【解决方案1】:

使用z-index 使时钟走在前面,您可以通过将导航栏的z-index 设置为-1 来做到这一点:

z-index: -1;

【讨论】:

  • .realnewsbg { 背景图片:url(tinkatips.hol.es/nav.png);宽度:1000px;高度:122px;向左飘浮;边距顶部:-130px;左边距:120px;文本对齐:居中; z 指数:-1; } 不起作用...
  • 尝试将时钟的z-index设置为99999
  • 以及导航栏到-1
  • 不,它没有。反正不适合我
【解决方案2】:

修好了!

刚刚将时钟 div 移到标题 1 下!

【讨论】:

    猜你喜欢
    • 2022-01-20
    • 1970-01-01
    • 1970-01-01
    • 2022-10-18
    • 2021-01-07
    • 1970-01-01
    • 1970-01-01
    • 2015-05-16
    • 2014-06-04
    相关资源
    最近更新 更多