Question

如何调整CSS导航栏的位置?

我刚开始学习网页。
做了一个首页，布局是这样的：
1最上方一行是长方形图片
2下一行也是一张长方形图片
3然后下面页面分为两部分，左边是导航栏，右边是正文内容bodycontent

然后我想加多一个导航栏在2和3之间加一点东西，就是那新建的一行左边加一张小图片，右边就是另一个CSS导航栏。
那张图片我放好了，然后我想在小图片右边加导航栏
我去网上贴了一些小导航栏的代码，可是位置老是很乱，总是跟下面的BODYCONTEXT叠加。
请问我该怎么安排啊？
应该更改哪个属性啊？
我搞好了，可是现在有个问题，那条导航栏有背景图片，我用了长高来定义其大小，可是我想要他的长度自己伸长缩短来适应浏览器窗口大小，而不是由我来定义。可以做到么？

Answer 1

那需要css+js来实现
代码片段如下：
<style type="text/css">
#autoimg {
max-width:500px; /*IE7、FF、Opera等其他非IE6浏览器下最大宽度为500px;*/
}
</style>
<img src="图片路径" id="autoimg" />
<script language="javascript">
//IE6浏览器下图片autoimg的最大宽度为500px
function set_autoimg_width() {
var width = parseInt(document.getElementById("autoimg").width);
if (width > 0) {
if (width > 500)
document.getElementById("autoimg").width = 500;
window.clearInterval(iid);
}
}
var iid = window.setInterval(set_autoimg_width, 100);

</script>

上面的CSS和JS可以让图片的宽度自动适应为小于或等于500PX。
举一反三，你根据你的需要调整宽度的值就可以了。

Answer 2

你把图片和导航条放在一个div里，这个div首先你要排好版，可以先价格边框，便于测试，然后将
<div>
<img style="float:left">
<div style="float:left">添加的导航条</div>
<div style="clear:both"></div>
</div>

导航条的div宽高一定要注意，不要撑破了外面的div容器，这样下面的排版也会乱的，问题应该不大，给导航条添加边框慢慢调试

Answer 3

通过写相应css样式来实现
我这里有个样式可以参考下 这样的很多的 可以找个网站看下相应的样式
#nav {margin:0 0 8px 0; background:none;position:relative; top:0px; left:310px;padding:0;}
#nav .content {padding:0;overflow:hidden;background:none;}
#nav li {float:left;padding:0 10px;font-size:12px;height:47px;line-height:60px;position:relative;}
#nav .on {background:none; display:block;}
#nav li,#nav a, #nav a:visited, .nav_text{ color:#000;}
#nav a:hover, #nav .on a, #nav .on a:visited, #nav .on a:hover{ color:#000;}
.nav_text{ line-height:25px;}

Answer 4

亲，设置一个位元素的位置在css里面可以使用posion属性来设置，absolute是绝对定位,relative是相对定位,在通过设置元素的top、left、right、bottom就可以控制元素相对于父级的位置了

Answer 5

你这样说起来虽然页面能想象得到是什么样子，但是没代码还是很抽象，CSS导航栏到底是什么样的？其代码结构如何？其CSS样式属性做了哪些特殊的限制？这一切都得看到代码才能定论。你给我发消息交流下，不过总的书来你这应该是小问题。

你把背景图片贴出来看，这个视图片不同采用不同的方法会更简便。