Имя: Пароль:
IT
Веб-мастеринг
CSS меню
0 ЯЧайник
 
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% - и пункты меню начинаются с середины