Помогите найти ошибку в горизонтальном меню

Aurika · February 6, 2013

Здравствуйте! Помогите пожалуйста найти ошибку. Я первый раз пробую блочную вёрстку (учусь) и столкнулась с такой вот неприятностью.

Меню не располагается по всей ширине блока, а уезжает куда-то вправо и упорно все манипуляции происходят там, т.е. когда меняю отступы и прочее, влево вообще не двигается.

Вот часть html:

<ul>

<li><a href="/">Главная</a></li>

<li><a href="/">Контакты</a></li>

<li><a href="/">Ссылки</a></li>

</ul>

</div>

</div>

Вот CSS

#logo {

width:248px;

height:235;

float:left;

}

#logo2 {

width:248px;

height:235;

float:right;

}

#gor-menu {

width: 454px;

height: 93px;

background-image:url(img/bg-menu.jpg);

position:relative;

top:234px;

left:513px;

padding-top:18px;

}

#gor-menu a {

color:#FFFFFF;

font-family:Verdana, Arial, Helvetica, sans-serif;

text-decoration:none;

}

#gor-menu li {

display:inline;

margin-right: 15px;

padding-left:25px;

background-image:url(img/lapka.png);

background-repeat:no-repeat;

padding-top:5px;

}

Извините если что не так написала. Помогите пожалуйста разобраться.

Aurika · February 6, 2013

Вот: http://jsfiddle.net/RUMQH/ Если я правильно поняла как это делается

Kray Storm · February 6, 2013

Если нужно, чтобы "меню двигалось влево" (я так понял, располагалось у левого края), то не надо его отодвигать на пол-экрана от этого "лево". )

#gor-menu {

background-image: url("img/bg-menu.jpg");

height: 93px;

left: 513px; 

padding-top: 18px;

position: relative;

top: 234px;

width: 454px;

}

PS:

Потерялись размерности.

width:248px;

height:235(чего?);

float:left;

}

#logo2 {

width:248px;

height:235(чего?);

float:right;

}

Edited February 6, 2013 by Kray Storm

Aurika · February 6, 2013

Kray Storm спасибо!

left: 513px; 

Я когда это убираю, то у меня весь блок (вместе с фоном) уезжает влево. При этом пункты меню как были смещены вправо, так и остаются (((

А мне нужно, что бы блок остался там же, но пункты меню в нём были по всей ширине. Извиняюсь, если не корректно задала вопрос и стало не понятно что я хотела.

Kray Storm · February 6, 2013

Понятно.

#gor-menu {

background-image: url("img/bg-menu.jpg");

height: 93px;

left: 513px; 

padding-top: 18px;

position: relative absolute;

top: 234px;

width: 454px;

}

Если интересно, почему так, то... =>

При относительном позиционировании взаимодействие со смежными элементами сохраняется, независимо от новых координат элемента. В начальных координатах слева от меню находится плавающий logo. Пункты меню (и ссылки) являются строчными, а это значит, что они обтекают float-элементы (даже если они вложены в блоки). В результате позиционирования блок ушел, а осадок взаимодействие (обтекание) осталось. А вот при абсолютном позиционировании с элементом уже никто не взаимодействует. Кроме <html> или ближайшего предка с relative. Таким образом, (назначая родителю relative, но не сдвигая блок) можно регулировать точку отсчета элементов с absolute и делать им "как бы относительное как-бы позиционирование". Но в данном случае это даже и не нужно.

Как-то так.

PS: Больше! Больше котиков в Интернете!

Edited February 6, 2013 by Kray Storm

Aurika · February 7, 2013

Понятно.
#gor-menu {
background-image: url("img/bg-menu.jpg");
height: 93px;
left: 513px; 
padding-top: 18px;
position: relative absolute;
top: 234px;
width: 454px;
}

Так я тоже пробовала ((( Меню становится в ряд, всё хорошо, но вот сам блок начинает ездить по всей ширине в зависимости от размера окна в котором открыт сайт. Если при большом разрешении экрана, то он вообще уезжает за границу сайта влево. У меня макет фиксированной ширины 1000px (((

Предположение, что вроде как нужно float:right; использовать и это получается, но только если убрать logo2. Если его оставить, то блок с меню встаёт между двумя logo в самом верху и всё. Наверное придётся отказаться от logo2 (

PS: Больше! Больше котиков в Интернете!

))) Это я тренировочный макет набросала. Там от котов только лапки в меню )))))

Kray Storm · February 7, 2013

уезжает за границу

Даже не знаю, что тут сказать. Все щас туда уезжают. Даже Меню, и то...

Значит, кто-то толкает и "увозит" его.

Наверное придётся отказаться от logo2.

Хорошо, когда макет тренировочный и можно поотказываться от всего, что трудно сверстать )

Прийдется применить стандартный ход "секретное оружие" - экранируем наших logo-пловцов блоком с overflow.

Я там "в порыве творчества" слегка похозяйничал, так что посмотрите внимательно - где-что не так стало.

Долго думал над конструкцией:

#wrapper {

width: 985px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

background-color:#faf3b8;

Это для чего?

Внутрь <div id="middle"> особо не смотрел, но там тоже некоторые моменты показались "нестандартными". Похоже на простой двухколоночный макет, но почему-то обе колонки float:left, а левая еще и margin-left:-100%; при том что у нее есть и relative, который нигде не используется.

Aurika · February 7, 2013

Получилось вот так

Меню отлично, а лого2 уехало вниз и подвинуло текст на странице.

Вот это не знаю для чего.

#wrapper {

width: 985px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

background-color:#faf3b8;

Макет двухколоночный.

Спасибо большое за внимание к моей проблеме, но я лучше это logo2 уберу. Надоело мне с ним возиться (((

Edited February 7, 2013 by Aurika

Kray Storm · February 7, 2013

Меню отлично, а лого2 уехало вниз

А почему оно тогда тут не уезжает?

Вот это не знаю для чего.

Из серии  и /*Тут тоже не трогать*/ ? )) Понятно. Т.е., это не вы писали?

PS: Такой сайт, как последний у вас в портфолио, правда столько рублей стоит сделать? Это только верстка или все полностью от дизайна до хостинга (без SEO и поддержки)?

Aurika · February 7, 2013

А почему оно тогда тут не уезжает?

Завтра ещё раз посмотрю, может я что упустила и не поменяла.

Т.е., это не вы писали?

Нет, я только начала изучать блочную вёрстку и для первой пробы сгенерировала каркас вот тут: http://csstemplater.com/

PS: Такой сайт, как последний у вас в портфолио, правда столько рублей стоит сделать? Это только верстка или все полностью от дизайна до хостинга (без SEO и поддержки)?

Слишком дорого или наоборот дёшево?

Всё от дизайна до установки на хостинг. Хостинг оплачивает заказчик.

Edited February 7, 2013 by Aurika

Kray Storm · February 7, 2013

Слишком дорого или наоборот дёшево?

Если сравнивать со студиями, то очень и очень привлекательная цена ) А у фрилансеров такой разброс по цене/срокам/качеству, что даже трудно что-либо определить, как "середину". Просто для себя было интересно узнать.

Aurika · February 8, 2013

Kray Storm тут основную роль играет сфера деятельности клиентов. В этой отрасли (питомники) мало денег, по этому поднять цену, даже улучшив качество и сроки вряд ли получится. А среднее действительно не найти. Я знаю тех кто так же работает с питомниками, но средняя стоимость в полтора-два раза выше, а знаю девочку на Украине, которая тоже самое делает за 60$.

Sign In

Помогите найти ошибку в горизонтальном меню

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information