0

I have positioned this logo on the left top of my webpage design,the rest of the page is designed with the help of table and as the logo placement in this style is not possible in the table format i have made a 2 div's one wrapping the entire layout and another for the logo.. The wrapping div is made relative and the logo div relative and somehow have place the logo where i wish to as you see in the page.. but the problem is that the navigation bar links are not working as soon as the logo is positioned above the navbar..
The second problem is that the leaving a blank space in the place it was positioned before providing the top and left attributes to it!! if the way i am positioning the logo is wrong! or if there is any other alternative please suggest.. thanks in advance!! cheers!

the webpage is :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

float:left を追加します。#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を絶対位置に設定すると、（ページ全体ではなく）その外側のコンテナ内の位置が調整されます。位置の設定：absoluteには、要素のボックスサイズを縮小して、必要なものだけを使用するという優れた副作用もあります。ベンジャミンが指摘したように、＃logoボックスはページの幅全体に広がり、メニュー項目をブロックしていました。この変更により、カーソルでメニュー項目を再度アクティブにできるようになります。

于 2011-08-27T11:30:47.283 に答える