页面大小更改时，在固定导航栏的中心对齐图像时遇到问题

时间：2015-12-29 22:25:31

标签： html css web

我在这个正在上学的婚礼网站遇到了一些麻烦。问题是中心装饰件最终将成为徽标，当屏幕尺寸改变时，不会与页面顶部对齐。在屏幕上，我正在处理它看起来很好，但在其他屏幕上它搞砸了。

屏幕我正在努力。看起来很好。

demonstration

朋友的屏幕向下移动或在其他屏幕上被切断。

demonstration

我尝试过更改位置类型和显示类型，试图设置边距。甚至设置它固定，然后将它定位在我想要的地方，但总是最终弄乱别的东西。导航栏固定在屏幕顶部，周围的链接与其对齐。我似乎无法解决它，我想知道是否有人有任何解决方案。

以下是该网站下载的链接：Website 

@import url('http://weloveiconfonts.com/api/?family=entypo');
html{
    background-image: url("background.jpg");
    background-size:cover;
    background-position:0px 60px;
    background-attachment: fixed;
    padding:0px;
}
body{
    margin:0;
}
nav{
    background-color: snow;
    text-align: center;
    position: fixed;
    width:100%;
    margin:0;
    z-index: 100;

    -webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}

section{
    padding-bottom: 20px;
    text-align: center;
    position: relative;
    top: 60px;
    background-color: dimgrey;
    z-index:50;
    margin-left:15%;
    margin-right:15%;
}
footer{
    font-size: 13px;
    z-index: 75;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: slategray;
    margin-top:60px;
    top:60px;
    background-color: #ddd;;
    height:60px;
    margin-left:15%;
    margin-right:15%;
    padding: 20px;
    -webkit-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
}

nav ul{
    text-align: center;
    list-style:none;
    margin: 0;
    padding: 0;

}

nav ul li{
    text-align: center;
    display: inline;
    margin:0px;
}
nav ul li a{
    margin-left:-2px;
    margin-right:-2px;
    color: slategray;
    display: inline-block;
    text-decoration: none;
    font-size:25px;
    font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    padding: 7px;
    text-align:center;
    padding-left: 10px;
    padding-right:10px;
    padding-top:15px;
    padding-bottom:15px;
    height: 10%;
    width:9%;
    -webkit-transition: background-color 0.2s;
}
nav ul li a:hover{
    background-color:#d9d9d9;
}
nav ul li a:active{
   background-color:#d9d9d9;
}
nav ul li img{
    z-index: -20;
    align-content: center;
    position: relative;
    top: 75px;
    background-color: snow;
    width:20%;
    height:100%;
    margin-left: 15px;
    margin-right:15px;
    margin-top:-210px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:7px;
    padding-top:5px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;

    -webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.wedding{
    width:100%;
    margin-bottom: 5px;
}
h1{
    background-color: snow;
    font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    margin-bottom:25px;
    padding:10px;
    -webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.footer-info{
    margin: 0;
    list-style:none;
    text-decoration: none;
    float: left;
}

.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
    margin: 0;
    padding: 0;
    border: none;
    border-spacing: 0;
}

/* Calendar Wrapper */
.ui-datepicker {
    display: none;
    width: 294px;
    padding: 35px;
    cursor: default;
    margin-left:20px;

    text-transform: uppercase;
    font-family: Tahoma;
    font-size: 12px;

    background: snow;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
    -moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
    box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
}

/* Calendar Header */
.ui-datepicker-header {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #d6d6d6;
}

.ui-datepicker-title { text-align: center; }

/* Month */
.ui-datepicker-month {
    position: relative;
    padding-right: 15px;
    color: #565656;
}

.ui-datepicker-month:before {
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    width: 5px;
    height: 5px;
    content: '';

    background: #a5cd4e;
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* Year */
.ui-datepicker-year {
    padding-left: 8px;
    color: #a8a8a8;
}

/* Prev Next Month */
.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: -2px;
    padding: 5px;
    cursor: pointer;
}

.ui-datepicker-prev {
    left: 0;
    padding-left: 0;
}

.ui-datepicker-next {
    right: 0;
    padding-right: 0;
}

.ui-datepicker-prev span,
.ui-datepicker-next span{
    display: block;
    width: 5px;
    height: 10px;
    text-indent: -9999px;

    background-image: url(../img/arrows.png);
}

.ui-datepicker-prev span { background-position: 0px 0px; }

.ui-datepicker-next span { background-position: -5px 0px; }

.ui-datepicker-prev-hover span { background-position: 0px -10px; }

.ui-datepicker-next-hover span { background-position: -5px -10px; }

/* Calendar "Days" */
.ui-datepicker-calendar th {
    padding-top: 15px;
    padding-bottom: 10px;

    text-align: center;
    font-weight: normal;
    color: #a8a8a8;
}

.ui-datepicker-calendar td {
    padding: 0 7px;

    text-align: center;
    line-height: 26px;
}

.ui-datepicker-calendar .ui-state-default {
    display: block;
    width: 26px;
    outline: none;

    text-decoration: none;
    color: #a8a8a8;

    border: 1px solid transparent;
}

/* Day Active State*/
.ui-datepicker-calendar .ui-state-active {
    color: #6a9113;
    border-color: #6a9113;
}

/* Other Months Days*/
.ui-datepicker-other-month .ui-state-default { color: #565656; }

.social {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  line-height: 50px;
  font-family: Entypo;
  font-size: 28px;
  text-align: center;
  color: #555;
  border-radius: 10px;
  background: #eee;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
.wrapper {
  float: right;
  text-align: center;
}

.social {
  box-shadow: rgb(210, 210, 210) 1px 1px,
    rgb(210, 210, 210) 2px 2px,
    rgb(211, 211, 211) 3px 3px,
    rgb(211, 211, 211) 4px 4px,
    rgb(211, 211, 211) 5px 5px,
    rgb(212, 212, 212) 6px 6px,
    rgb(212, 212, 212) 7px 7px,
    rgb(212, 212, 212) 8px 8px,
    rgb(213, 213, 213) 9px 9px,
    rgb(213, 213, 213) 10px 10px,
    rgb(214, 214, 214) 11px 11px,
    rgb(214, 214, 214) 12px 12px,
    rgb(214, 214, 214) 13px 13px,
    rgb(215, 215, 215) 14px 14px,
    rgb(215, 215, 215) 15px 15px,
    rgb(215, 215, 215) 16px 16px,
    rgb(216, 216, 216) 17px 17px,
    rgb(216, 216, 216) 18px 18px,
    rgb(216, 216, 216) 19px 19px,
    rgb(217, 217, 217) 20px 20px,
    rgb(217, 217, 217) 21px 21px,
    rgb(218, 218, 218) 22px 22px,
    rgb(218, 218, 218) 23px 23px,
    rgb(218, 218, 218) 24px 24px,
    rgb(219, 219, 219) 25px 25px,
    rgb(219, 219, 219) 26px 26px,
    rgb(219, 219, 219) 27px 27px,
    rgb(220, 220, 220) 28px 28px,
    rgb(220, 220, 220) 29px 29px,
    rgb(221, 221, 221) 30px 30px;
   text-shadow: rgb(226, 226, 226) 1px 1px,
    rgb(227, 227, 227) 2px 2px,
    rgb(227, 227, 227) 3px 3px,
    rgb(228, 228, 228) 4px 4px,
    rgb(229, 229, 229) 5px 5px,
    rgb(229, 229, 229) 6px 6px,
    rgb(230, 230, 230) 7px 7px,
    rgb(230, 230, 230) 8px 8px,
    rgb(231, 231, 231) 9px 9px,
    rgb(232, 232, 232) 10px 10px,
    rgb(232, 232, 232) 11px 11px,
    rgb(233, 233, 233) 12px 12px,
    rgb(233, 233, 233) 13px 13px,
    rgb(234, 234, 234) 14px 14px,
    rgb(235, 235, 235) 15px 15px,
    rgb(235, 235, 235) 16px 16px,
    rgb(236, 236, 236) 17px 17px,
    rgb(236, 236, 236) 18px 18px,
    rgb(237, 237, 237) 19px 19px,
    rgb(238, 238, 238) 20px 20px;
}
<!doctype html>
<html lang="en-US">

<head>
    <title>Home</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>

<body>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Gallery</a></li>
            <li><img src="img/hearts.png"></li>
            <li><a href="">Reservations</a></li>
            <li><a href=""="">Menue</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
    <section>
        <img src="img/wedding.jpg" class="wedding">
    </section>
    <footer>
        <ul class="footer-info">
            <li> <p>Made by Taylor Bastian and Danial Andales for FBLA competition</p> </li>
            <li><p>Copyright © 2015. SampleCorp</p></li>
        </ul>

         <div class="wrapper">
            <div class="social">&#62220;</div>
            <div class="social">&#62217;</div>
            <div class="social">&#62223;</div>
            <div class="social">&#62232;</div>
        </div>
    </footer>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

尝试使用“em”代替像素。像素在每个屏幕上的大小相同，因此它们不会调整到您的屏幕，但是，“em”将在所有屏幕上具有相同的相对大小，这意味着它将根据您的屏幕进行调整。希望这有帮助，我也是新手。 ：P

答案 1 :(得分：0)

这是空间，边距，填充大小的常见问题，在大型浏览器中一切都会正常工作，但在宽度为1024px的小型浏览器中，元素会移动，因为它们没有足够的空间。

更改一些css nav ul li img更改top:-13px 它修复了你的例子，如果没有，使用媒体查询，对于大型浏览器可能top:0对于较小的浏览器使用准确的top:xx， 玩得开心。

相关问题
最新问题