Jump to content
  • 0

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

Aurika

Asked by Aurika,

 Share

Question

Aurika Explorer

Aurika

Posted
Posted

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

55505_original.jpg

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

Вот часть html:

<div id="header">

<div id="logo"><a href="/"><img src="img/logo.png" class="iePNG" alt="Зелёный сайт" width="248" height="235"/></a></div>

<div id="logo2"><img src="img/logo.png" class="iePNG" alt="Зелёный сайт" width="248" height="235"/></div>

<div id="gor-menu">

<ul>

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

<li><a href="/">О нас</a></li>

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

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

</ul>

</div> <!--#gor-menu-->

</div><!-- #header-->

Вот 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;

}

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

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Kray Storm Explorer

Kray Storm

Posted
Posted (edited)

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

#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 by Kray Storm
Link to comment
Share on other sites
  • 0
Aurika Explorer

Aurika

Posted
  • Author
Posted

Kray Storm спасибо!

left: 513px; <!--Убрать-->

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

56515_original.jpg

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

Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

Posted
Posted (edited)

Понятно.

#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 by Kray Storm
Link to comment
Share on other sites
  • 0
Aurika Explorer

Aurika

Posted
  • Author
Posted

Понятно.

#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: Больше! Больше котиков в Интернете!

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

Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

Posted
Posted

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

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

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

Наверное придётся отказаться от 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, который нигде не используется.

Link to comment
Share on other sites
  • 0
Aurika Explorer

Aurika

Posted
  • Author
Posted (edited)

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

56756_original.jpg

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

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

#wrapper {

width: 985px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

background-color:#faf3b8;

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

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

Edited by Aurika
Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Aurika Explorer

Aurika

Posted
  • Author
Posted (edited)

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

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

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

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

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

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

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

Edited by Aurika
Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

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

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

Link to comment
Share on other sites
  • 0
Aurika Explorer

Aurika

Posted
  • Author
Posted

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept