Размещение логотипа на веб-странице

Question

Я разместил этот логотип в левой верхней части дизайна моей веб-страницы, остальная часть страницы разработана с помощью таблицы, и поскольку размещение логотипа в этом стиле невозможно в формате таблицы, я сделал 2 деления.один оборачивает весь макет, а другой - для логотипа. Div для обёртки сделан относительным, а div для логотипа относительным и каким-то образом размещает логотип там, где я хочу, как вы видите на странице ... но проблема в том, что ссылки на панели навигациине работают, как только логотип расположен над панелью навигации.
Вторая проблема заключается в том, что оставляя пустое пространство в том месте, где он был расположен, перед предоставлением ему атрибутов top и left !!если я неправильно позиционирую логотип!или, если есть какая-либо другая альтернатива, пожалуйста, предложите .. заранее спасибо !!ура!

веб-страница: 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

Пара проблем:

1. Вы ошиблись position (как "postion") на вашем #mainwrap элементе.Вероятно, поэтому вам приходилось делать странные вещи.
2. Позиция #logo в настоящее время relative с очень большим отрицательным значением для дна.Это не то, что вам нужно

Чтобы решить вашу проблему, убедитесь, что у вас есть следующее:

#mainwrap {
    position: relative;
}

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

Когда внешний контейнер имеет относительную позицию, установите #logo вабсолютное положение будет регулировать его положение в этом внешнем контейнере (в отличие от всей страницы).Установка позиции: absolute также имеет приятный побочный эффект - уменьшает размеры блоков вашего элемента, чтобы он занимал только то, что ему нужно.Как заметил Бенджамин, поле #logo охватывало всю ширину вашей страницы, блокируя пункты меню.Это изменение позволит курсору снова активировать пункты меню.