我的CSS搞砸了，不会保持居中
我正在建立一个网站，我无法让导航栏停留在我想要的位置。
即使在较小的屏幕上观看，它也应该看起来如此。请记住，我们只谈论导航栏
这是目前在较小屏幕上的显示方式
最后，这是我的代码！
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<link rel="stylesheet" href="animate.css">
<style type="text/css">
body {
margin: 0;
background-color: #e0dfcb;
}
.container {
min-width: 800px;
height: auto;
}
#midbar {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #e0dfcb;
z-index: 1111;
opacity: 0.8;
}
#midbar img {
position: absolute;
top: 0px;
left:50%;
margin-left: -185px;
width: 350px;
height: 200px;
min-height: 50px;
min-width: 250px;
vertical-align: middle;
z-index: 2222;
}
#navigation {
position: absolute;
left: 435px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
position: absolute;
left: 1100px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#slideshow{
width: 100%;
height: 100%;
}
#slideshow{
-webkit-animation: cssAnimation 8s 16 ease-in-out;
-moz-animation: cssAnimation 8s 16 ease-in-out;
-o-animation: cssAnimation 8s 16 ease-in-out;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#imgholder {
position: relative;
top: -150px;
width: 100%;
height: 500px;
overflow: hidden;
}
#over {
width: 500px;
height: 200px;
background-color: #EEEEEE;
position: relative;
top: -400px;
font-size: 32px;
opacity: 0.7;
}
#over p {
position: relative;
left: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div id='midbar'>
<section id='navigation'>
<ul>
<li><a href='index.php'>About</a></li>
<li><a href='index.php'>Designs</a></li>
<li><a href='index.php'>Events</a></li>
</ul>
</section>
<a href='index.php'><img class='img animated bounceInDown' src='images/logo.png'></a>
<section id='navi'>
<ul>
<li><a href='index.php'>Booths</a></li>
<li><a href='index.php'>Holidays</a></li>
<li><a href='index.php'>Contact</a></li>
</ul>
</section>
</div>
<div id='imgholder'>
<img id="slideshow" src="images/snow.jpg" alt="Slideshow">
</div>
<div id='over'>
<p> Need help?<br>
Contact us now!</p>
</div>
</div>
<script type="text/javascript">
var img1 = new Image();
img1.src = "images/snow.jpg";
var img2 = new Image();
img2.src = "images/water.jpg";
var img3 = new Image();
img3.src = "images/othersnow.jpg";
var img4 = new Image();
img4.src = "images/cool.jpg";
var galleryarray = [img1, img2, img3, img4];
var curimg = 1;
function rotateimages(){
$( "#slideshow" ).fadeOut( "slow", function() {
document.getElementById("slideshow").setAttribute("src", galleryarray[curimg].src)
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
});
$( "#slideshow" ).fadeIn( "slow" );
}
window.onload=function(){
setInterval("rotateimages()", 8000)
}
</script>
</body>
</html>
代码仅用于导航
#midbar {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #e0dfcb;
z-index: 1111;
opacity: 0.8;
}
#navigation {
position: absolute;
left: 435px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
position: absolute;
left: 1100px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
<div id='midbar'>
<section id='navigation'>
<ul>
<li><a href='index.php'>About</a></li>
<li><a href='index.php'>Designs</a></li>
<li><a href='index.php'>Events</a></li>
</ul>
</section>
<a href='index.php'><img class='img animated bounceInDown' src='images/logo.png'> </a>
<section id='navi'>
<ul>
<li><a href='index.php'>Booths</a></li>
<li><a href='index.php'>Holidays</a></li>
<li><a href='index.php'>Contact</a></li>
</ul>
</section>
</div>
2 个答案:
答案 0 :(得分：1)
它因为你的导航和导航元素的绝对位置。
left: 1100px;
您的.container的最小宽度为800px ...优化此宽度的菜单并使容器居中。
编辑：
覆盖此样式：
#midbar {
background-color: #e0dfcb;
height: 115px;
margin: 0 auto;
opacity: 0.8;
position: relative;
top: -20px;
width: 800px;
z-index: 1111;
}
#navigation {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
left: 0;
position: absolute;
top: 45px;
}
#navi {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
position: absolute;
right: 0;
top: 45px;
}
如果要改变#midbar中的宽度。
编辑：2
好的保持棕褐色栏我在菜单上添加了另一个div：
见这里：http://jsfiddle.net/zzfa1m3p/1/
添加了： 在第8行 在第28行
来自midbar的复制样式：
.top {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: green;
z-index: 1111;
opacity: 0.8;
margin: 0 auto;
width: 100%;
}
答案 1 :(得分：0)
您的问题是您使用固定值的绝对位置，这些值会根据屏幕大小而改变，因此它永远不会以所有大小为中心。我把你的代码放在JsFiddle这里http://jsfiddle.net/ejxj7ghe/ *注意这不是对手机的响应，而是集中在一起。
这是我在CSS中改变的内容
#midbar {
position: relative;
top: -20px;
width: 1000px;
height: 115px;
background-color: #e0dfcb;
z-index: 1111;
opacity: 0.8;
margin: 0 auto;
}
#navigation {
position: relative;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
width: 382px;
float: left;
}
#navi {
position: relative;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
float: right;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？