位置左侧和顶部的iFrame布局上的按钮？

我想将这些按钮定位到我喜欢的布局的底部。基本上我尝试向他们添加左边和顶部，但我知道这是行不通的。我如何将这些按钮移动到我喜欢的位置？我会为按钮创建一个div框吗？另外请介意我的杂乱的代码。位置左侧和顶部的iFrame布局上的按钮？

这里是我的代码：

<!CASCADE STUDIOS COPY AND YOU WILL BE CAUGHT"> 
<HTML><HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<TITLE>Cascade Studios™</TITLE> 
<style> 
body 
{ 
background-image:url('http://icpy.webs.com/boxes/background.png'); 
background-repeat:repeat-y 
position:center; 
} 
img { 
    opacity: 1.0; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
} 
#banner:hover { 
    opacity: 0.5; 
    transition: opacity .55s ease-in-out; 
    -moz-transition: opacity .55s ease-in-out; 
    -webkit-transition: opacity .55s ease-in-out; 
} 
.navicon a#terms{ 
    display: block; 
    width:138px; 
    height:27px; 
    background: url(http://icpy.webs.com/button/Terms.png) no-repeat; 
} 

.navicon a:hover#terms{ 
    background: url(http://icpy.webs.com/button/Terms0.png) no-repeat; 
} 
.navicon a#contact{ 
    display: block; 
    width:138px; 
    height:27px; 
    background: url(http://icpy.webs.com/button/contact.png) no-repeat; 
} 

.navicon a:hover#contact{ 
    background: url(http://icpy.webs.com/button/contact0.png) no-repeat; 
} 
.navicon a#setup{ 
    display: block; 
    width:138px; 
    height:27px; 
    background: url(http://icpy.webs.com/button/setup.png) no-repeat; 
} 

.navicon a:hover#setup{ 
    background: url(http://icpy.webs.com/button/setup0.png) no-repeat; 
} 

.navicon a#about{ 
    display: block; 
    width:138px; 
    height:27px; 
    background: url(http://icpy.webs.com/button/about.png) no-repeat; 
} 

.navicon a:hover#about{ 
    background: url(http://icpy.webs.com/button/about0.png) no-repeat; 
} 

.navicon a{ 
    margin: 0.5px; 
} 
</style> 
</HEAD> 
<BODY> 

<center> 

<font face="Century-Gothic" color="black"> 

<img src="http://icpy.webs.com/boxes/bac.png" width="1280" height="1024" border="0" usemap="#settings" /> 

<div id="about_box" style="width:147px; height:341px; position:absolute; left:152px; top:280px; z-index:1;"> 
<iframe src="http://icpy.webs.com/text/About.htm" name="inlineframe" width="147" height="341" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"></iframe></div> 

<div id="update_box" style="width:147px; height:314px; position:absolute; left:152px; top:670px; z-index:1;"> 
<iframe src="http://icpy.webs.com/text/Updates.htm" name="inlineframe" width="147" height="314" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"></iframe></div> 

<div id="content_box" style="width:662px; height:733px; position:absolute; left:320px; top:250px; z-index:1;"> 
<iframe src="http://icpy.webs.com/text/Home.htm" name="inlineframe" width="662" height="733" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"></iframe></div> 

<div class="navicon"> 
<a href="http://www.twitter.com" id="terms"/> 
<a href="http://www.twitter.com" id="contact"/> 
<a href="http://www.twitter.com" id="setup"/> 
<a href="http://www.twitter.com" id="about"/> 
</div> 

</BODY> 
</HTML>

来源

2013-07-29 raininggalaxies

请问您可以创建一个jsfiddle。 – eclipsis

你想要的按钮有什么位置？ –

还剩800或900px。 300px顶部。 – raininggalaxies

如果你在谈论的条款，联系人，设置，以及有关的链接。试试这个：

div.navicon { 
    position: absolute; 
    top: 300px; 
    left: 800px; 
}

，除非你已经设置position到absolute或fixed您不能调整顶部/左侧位置。

FWIW，您使用的绝对定位模型不是非常灵活。从长远来看，使用浮动和填充来定位东西会更好。

来源

2013-07-29 21:21:18 KatieK

非常感谢你，我明白我的代码可以更好地相信我。我真的只是真正的新基础的CSS。感谢您的意见。 :) – raininggalaxies

位置左侧和顶部的iFrame布局上的按钮？

回答

相关问题