Question

我已将此徽标放置在我的网页设计的左上方，页面的其余部分是在桌子的帮助下设计的，因为这种风格的徽标位置不可能以表格格式我已经制作了2个div一个包装整个布局，另一个包装徽标.. 包装div是相对的，徽标div是相对的，并且在某种程度上将徽标放在我想要的地方，如页面中所示......但问题是，当徽标位于上方时，导航栏链接无法正常工作导航栏..
第二个问题是，在为它提供顶部和左侧属性之前，在它所处的位置留下一个空白区域！如果我定位徽标的方式是错误的！或者如果有其他选择，请建议.. 提前致谢！！干杯！

网页是：http：//www.aravind123.0fees.net/products.html

的CSS：

    #mainwrap{
postion:absolute;
width:1000px;
margin: 0 au``to;
margin-top:0px:
vertical-align:top;
z-index:99;
}

body {
background-image: url(Images/bg.jpg);
background-repeat:repeat-y;
top: auto;
}
.text1 {
font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text2{
font-family:"Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size:12px;
color:#333;
text-decoration:none;
text-align:center;
}
p{
font-family:"Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size:12px;
color:#333;
text-decoration:none;
text-align:center;
}
#logo{
position:relative;
bottom:-90px;
left:-50px;
z-index:50;
}

a:hover{
color: #000;
}

.logo{
border:none;
}

.offer{
font-size:28px;
vertical-align:middle;
}

.text11 {   font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text111 {font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text1111 {font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}

Answer 1

添加浮动：左;对于#logo类，它使元素占用其内容的空间而不是页面的整个宽度。

如果你想调试你的CSS我可以推荐获得firefox和最新版本的firebug。您可以在右侧鼠标按钮菜单中获得“检查元素”选项，以便查看它具有的实际css属性。此外，它还可以让您查看元素的实际宽度，高度，边距和填充。

Answer 2

一些问题：

您在position元素上拼错了#mainwrap（作为“postion”）。这可能就是为什么你不得不做些奇怪的事情。
#logo的位置目前为relative，底部的负值非常大。这不是你想要的

要解决您的问题，请确保您拥有以下内容：

#mainwrap {
    position: relative;
}

#logo {
    position: absolute;
    top: -20px;
    left: -50px;
}

一旦外部容器具有相对位置，将#logo设置为绝对位置将调整其在该外部容器内的位置（而不是整个页面）。设置位置：绝对也有一个很好的副作用，即减少元素的盒子大小，只占用它需要的东西。正如Benjamin所说，＃logo框横跨整个页面宽度，阻止了菜单项。此更改将允许光标再次激活菜单项。

网页中的徽标定位

2 个答案: