html - 修复了网页顶部的菜单随窗口调整大小而改变大小的问题

标签 html css flash menu css-position

我需要的是顶部的固定菜单,下面是一个 flash 文件,然后是一些文本。

这是我目前所拥有的: http://jsfiddle.net/ovr8spfu/

<style  type="text/css">
#menu {
    background-color:blue;
    height:70px;
    width:100%;
    top:0px;
    left:0px;
    position:fixed;
}
#container {
    background-color:green;
    height:70px;
    width:1310px;
    margin-left:auto;
    margin-right:auto;
    border-right-width:1px;
    border-right-color:black;
    border-right-style:solid;
}
#logo {
    height:70px;
    width:144px;
    float:left;
    background-color:aqua;
}
.menu_item {
    background-color:red;
    height:70px;
    font-family:Helvetica;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border-left-width:1px;
    border-left-color:black;
    border-left-style:solid;
    float:right;
}
.menu_item.test1 {width:80px;}
.menu_item.test2 {width:188px;}
.menu_item.test3 {width:122px;}
.menu_item.test4 {width:136px;}
.menu_item.test5 {width:72px;}
.menu_item.test6 {width:116px;}
.menu_item:hover {background-color:pink;}
a:link {color:#FFFFFF;text-decoration:none;}
a:visited {color:#FFFFFF;text-decoration:none;}
a:active {color:#FFFFFF;text-decoration:none;}
#filler {
    height:62px;
    width:700px;
}
#flash {
    height:500px;
    width:1300px;
    margin-left:auto;
    margin-right:auto;
}
#section {
    width:900px;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;
}
</style>
</head>

<body>
<div id="menu">
    <div id="container">
    <div id="logo"></div>
    <a href="#"><div class="menu_item test1">ABC 123</div></a>
    <a href="#"><div class="menu_item test2">TESTING 8637376436</div></a>
    <a href="#"><div class="menu_item test3">Blah Blah Blah</div></a>
    <a href="#"><div class="menu_item test4">HEEEEEEELP</div></a>
    <a href="#"><div class="menu_item test5">XYZ123</div></a>
    <a href="#"><div class="menu_item test6">HOME</div></a>
</div>

我遇到了几个问题,我已经搜索了几个小时,但我自己无法解决。

青色部分是我的 Logo ,应始终位于左上角,绿色部分是“填充物”,而我的红色菜单项应固定在右上角。

  1. 因为我的菜单/容器水平方向为 1310px,所以如果要最小化窗口,我的红色菜单项会消失在屏幕外。我该怎么做才能在窗口最小化时将红色菜单项推到左侧,而“绿色填充部分”消失?

  2. 我的 flash 文件将放置在菜单下方,水平方向也是 1300px。如果要调整浏览器窗口的大小,如何让它自动调整大小,使其在水平方向上越来越小?

  3. 如何将红色菜单项中的文本垂直和水平居中?

  4. 如何将我的 #section 文本置于页面中间?

最佳答案

问题 1&2

如果您将宽度设置为容器和 Flash 文件的 100%,它会在页面调整大小时自动缩小。

width:100%;

问题 3 & 4

这是一个 JSfiddle,展示了如何根据父 div 大小水平和垂直居中,您可以将此类添加到任何内容,它会根据父 div 大小居中 - http://jsfiddle.net/ovr8spfu/2/

.center {
    text-align:center;
    position:relative;
    top:50%;
}

关于html - 修复了网页顶部的菜单随窗口调整大小而改变大小的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30850824/

相关文章:

css - 将类添加到 Ruby On Rails 公式中的 collection_select

javascript - Chrome 中的外部接口(interface)

javascript - 使用 Jquery 将文本替换为笑脸图像

html - 在菜单中使用 Unicode 字符而不是图形

html - 如何查找带有文本(包括换行符或 html 格式化程序)的节点的 Xpath

c# - 解码 HTML 5 字符集

javascript - 移动浏览器上的虚拟键盘隐藏内容而不是将其向上推

html - 如何让div中的图片居中?

flash - Flash可以做低延迟音频合成吗?

flash - 哪种语言更适合 P2P 视频流?