我正在尝试创建一个带有社交图标的菜单栏,当浏览器更改宽度时,它会调整大小并完全符合浏览器大小。
目前我的社交图标与菜单徽标重叠,我想让它们调整得更小,以适应与浏览器100%时相同的位置,或者菜单栏向下移动以适应它们的位置。我只是不想要任何重叠。
这是我的菜单栏,浏览器100%
这就是我的网站在浏览器挤压时的样子。
此处还有我的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);
}
答案 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;
}