CSS меню

Веб-мастеринг

CSS меню

22.12.15

✎

11:40

Добрый день! пробую делать в Joomle меню: код html:
<body>
    <div id="basic">

        <div id="top-menu">
        <div class="bg-1">
           <jdoc:include type="modules" name="modul1" style="xhtml" />
        </div>
        </div>

    </div>
</body>

хочу,чтобы меню отступало от края экрана немного и пункты меню начинались с середины экрана (само меню по ширине на весь экран)

пробую в css (ни фига не понимаю все эти margin,padding,position,float и т.п. - от этого и выходит лажа,потому что делаю методом тыкания
В общем пишу стили:

html {
    height: 100%;
    width:100%
}

* html #basic {
    height: 100%;
    width:100%;
}
/*Каркас сайта*/
body {padding:0;
      margin:0;
      background-image:url("/images/i.jpg");
      background-position:50% 100%;
      width:100%;
      height:100%;
      font-size:0.9em; font-family:Arial, Sans-serif;
}

#basic {width:100%;
    height:100%;
}

#top-menu {
    height:8%;
    width: 100%;
    margin-top:2%;
}

.bg-1 {width:100%;
    height: 100%;
    background-color:LimeGreen;
    background-repeat: repeat-x;
    background: -moz-linear-gradient(top, LimeGreen, ForestGreen);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( LimeGreen), to(ForestGreen));

}
.bg-1 ul {margin:0; padding:0; list-style:none; float:left; height:100%; width:100%; }
.bg-1 ul li {float:left; background: no-repeat right center; display:table; height:100%;}
.bg-1 ul li a {display:block; height:100%; padding:0 27px 0 27px; color:Honeydew; text-decoration:none; height:100%;}
.bg-1 ul li > a {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
.bg-1 ul li a:hover {color:#fff; background:DarkGreen;}

В итоге появляется прокрутка вверх-вниз, а уж как сделать,чтобы пункты начинались с середины - у меня вообще хрень получается.
Кто разбирается в css,подскажите,пожалуйста, как правильно писать нужно

1 mistеr

22.12.15

✎

11:52

(0) > ни фига не понимаю все эти margin,padding,position,float и т.п.

Тогда одна-две подсказки на помогут. Лучше найди и сачай готовый компонент. Например тут: http://bower.io/search/

2 ЯЧайник

22.12.15

✎

12:07

(1) я английский совсем не знаю - ориентироваться по сайту,на который Вы мне дали ссылку совершенно не способна(((
Я читала про свойства css,пыталась делать примеры,но всё равно в голове всё путается. мне сейчас очень нужна подсказка того,кто в этом хорошо разбирается

3 ЯЧайник

22.12.15

✎

12:28

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

4 sanja26

22.12.15

✎

12:30

(0) а зачем все это самому писать? Скачай css себе, наваяй как надо, потом посмотри код.

5 orefkov

22.12.15

✎

12:36

Попробуй к ".bg-1 ul" добавить display: inline-block;

6 Остап Сулейманович

22.12.15

✎

12:42

(4) Хороший совет. Особо доставило "скачай css себе". )))

7 sanja26

22.12.15

✎

12:50

(6) cms

8 ЯЧайник

22.12.15

✎

13:00

(5) - зачем это? у меня что то не так с позиционированием еще в #basic и #top-menu начинается, если я в top-menu убираю margin-top, то прокрутки нет (или если у basic пишу position:relative, a у top-menu position:absolute;)

9 ЯЧайник

22.12.15

✎

13:44

А если я у body напишу position:fixed - это нормально с позиции грамотности написания стилей? просто тогда всё норм, тогда и у bg-1 ul пишу padding-left:50% - и пункты меню начинаются с середины