创建我的菜单栏以在浏览器大小更改时调整大小

时间:2014-01-31 10:11:50

标签: html css

我正在尝试创建一个带有社交图标的菜单栏,当浏览器更改宽度时,它会调整大小并完全符合浏览器大小。

目前我的社交图标与菜单徽标重叠,我想让它们调整得更小,以适应与浏览器100%时相同的位置,或者菜单栏向下移动以适应它们的位置。我只是不想要任何重叠。

这是我的菜单栏,浏览器100%

enter image description here

这就是我的网站在浏览器挤压时的样子。

enter image description here

此处还有我的CSS代码,因此需要添加任何内容。

html,body {
    background:url(images/background.png);
    background:no-repeat;
    background-size:cover;
}

#bar {  
    margin-top:55px;
    max-width:1920px;
    height: 30px;
    background: #2E2E2E;
    border: 3px groove #FFD700 ;
}

#logo {
    position:absolute;
    background-image:url(images/LOGO1.png);
    background-size:150px;
    width:150px;
    height:150px;
    margin:0 auto;
    z-index:1;
    top:0px;
    left:0px;
    right:0px;
}

#social  {
    top:18px;
    left:15%;
    height:32px;
    width:20%;
    z-index:5;
    position:absolute;

}

.facebook {
    background-image:url(images/64_x_64px/facebook_dark.png);
    height:32px;
    width:32px;
    background-size:32px;
    display:inline-block;
}
.facebook:hover {
background-image:url(images/64_x_64px/facebook_active.png);
}
.twitter {
    background-image:url(images/64_x_64px/twitter_dark.png);
    height:32px;
    width:32px;
    background-size:32px;
    display:inline-block;
}
.twitter:hover {
background-image:url(images/64_x_64px/twitter_active.png);
}
.in {
    background-image:url(images/64_x_64px/in_dark.png);
    height:32px;
    width:32px;
    background-size:32px;
    display:inline-block;
}
.in:hover {
    background-image:url(images/64_x_64px/in_active.png);
}
.youtube {
    background-image:url(images/64_x_64px/youtube_dark.png);
    height:32px;
    width:32px;
    background-size:32px;
    display:inline-block;
}
.youtube:hover {
    background-image:url(images/64_x_64px/youtube_active.png);
}

2 个答案:

答案 0 :(得分:0)

使用基于百分比的维度而不是像素值。如果可以避免使用尺寸并将父容器设置为100%,则不要使用尺寸。

答案 1 :(得分:0)

首先,您不应该使用“position:absolute”定位您的社交图标块,如果您使用alt属性而不是CSS将图像放在html中,这对于辅助功能更好。

对于您的情况,您可以执行类似的操作(尝试重新设置浏览器): http://jsfiddle.net/QtHm6/1/

#logo {
    width: 30%;
    max-width: 150px;
    margin:0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#logo img {
    width: 100%;
}

#social  {
    height:32px;
    width:20%;
    background-color: red;
}

#bar {  
    height: 30px;
    background: #2E2E2E;
}