0

我把这个标志放在我的网页设计的左上角，页面的其余部分是在表格的帮助下设计的，因为这种风格的标志在表格格式中是不可能的，我做了一个 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;
}
4

2 回答 2

1

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

如果你想调试你的 css，我可以推荐获取 firefox 和最新版本的 firebug。您可以在鼠标右键菜单中获得一个“检查元素”选项，使您能够查看它具有的实际 css 属性。它还使您能够查看元素的真实宽度、高度、边距和填充。

于 2011-08-27T11:19:09.690 回答
0

几个问题：

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

要解决您的问题，请确保您具备以下条件：

#mainwrap {
    position: relative;
}

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

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

于 2011-08-27T11:30:47.283 回答