Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Выравнивание списка

Подскажите, при замене маркера с помощью ::before одного из внутренних списков, он сместился. Как его выровнять как и остальные внутренние списки? Элементы класса list3 сдвигаются вправо.
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ol class="list1">
            <li>Раздел</li>
            <ol class="list2">
                <li>Подраздел</li>
                <li>Подраздел</li>
                <li>Подраздел</li>
                <li>Подраздел</li>
                <li>Подраздел</li>
            </ol>
            <li> Раздел</li>
            <ol class="list3">
                <li>Подраздел</li>
                <li>Подраздел</li>
                <li>Подраздел</li>
                <li>Подраздел</li>
                <li>Подраздел</li>
            </ol>
</ol>
Код CSS
1
2
3
4
.list3 li::before {
content:"! ";
color:red;
}
Ответ: Cпасибо за ответ!
Вопрос: Выравнивание списка по центру

Подскажите пожалуйста как нормально выровнять список <ul> по центру, чтобы при сжимании пункты нижней строки тоже были по центру:
Ответ: boilzzz, спасибо, дорогой!

Добавлено через 9 минут
Только ещё нужно добавить padding:0;, чтобы весь блок был по центру.

CSS
1
2
3
4
ul{
  list-style:none;
  padding:0;
}
Вопрос: Списки меню hover

Помогите разобраться, что я сделал не так. Есть меню при наведении на него выподает сабменю и должен менятся цвет главного меню с черного на желтый. Но цвет остается черным, хотя благодаря правому отступу видно что цвет меняется, но он оказывается под самим меню, тоесть черная кнопка меню перекрывает желтую.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ETST</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
<main class="page">
 
    <header>
    <div class="firstBlock">
        
    
 
        <nav>
            <ul class="menu">
                <li id="ab"><a href="javascript:void(0)">Home</a>
                    <ul class="submenu">
                        <li><a href="javascript:void(0)">Submenu1</a></li>
                        <li><a href="javascript:void(0)">Submenu2</a></li>
                        <li><a href="javascript:void(0)">Submenu3</a></li>
                        <li><a href="javascript:void(0)">Submenu4</a></li>
                        <li><a href="javascript:void(0)">Submenu5</a></li>
                    </ul>
                </li>
 
                    </ul>
             
        </nav>
        </div>
    </header>
    </main>
    </body>
    </html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
nav{
    position: relative; /*устанавливаем позиционирования относительно самого объекта*/
    z-index: 1; /*элемент отображается поверх всех остальных элементов*/
    top: -7px; /*смещение элемента от верхнего края*/
    padding-top: 30px;
}
 
ul{
    display: block;     /*делаем список блоком*/
    margin: 0 auto;     /*верхний и нижний отступ и выравниваем по горизонтали*/
    padding: 0;         /*текстовый отступ нулевой*/
    list-style: none;   /*убираем маркеры для списка*/
}
 
ul.menu > li{
    float: left;        /*прижимаем к левому краю*/
    position: relative; /*позиционирование относительного данного элемента*/
    left: 301px; /*смещение элемента от левого края*/
    top: -6px; /*смещение элемента от верхнего края*/
}
 
ul.menu > li > a{
    display: block;     /*делаем блоком*/
    padding: 0;         /*текстовые отступы нулевые*/
    min-width: 131px;   /*минимальная ширина*/
    min-height: 38px;   /*минимальная высота*/
    line-height: 38px;  /*высота блока*/
    margin-right: 1px;  /*отступ справа*/
    color: #fff;        /*цвет текста белый*/
    border-radius: 5px 5px 0 0; /*округляем верхние края*/
    text-align: center; /*выравнивание текста по центру*/
    overflow: hidden;   /*Отображается только область внутри элемента, остальное будет скрыто*/
    text-overflow: ellipsis;    /*непомещающийся текст будет заменен ...*/
    font-family: 'Swis721BTRoman';  /*устанавливаем шрифт*/
    font-size: 14pt;    /*устанавливаем размер шрифта*/
    text-decoration: none;  /*убераем подчеркивание ссылки*/
    background: #262626; /*установка фона*/
    background: -moz-linear-gradient(top,  #262626 0%, #111111 100%); /*установка градиентного фона для Mozilla*/
    background: -webkit-linear-gradient(top,  #262626 0%,#111111 100%); /*установка градиентного фона для Chrome и Safari*/
    background: linear-gradient(to bottom,  #262626 0%,#111111 100%); /*установка градиентного фона*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#111111',GradientType=0 ); /*установка градиентного фона для IE*/
    position: relative; /*позиционирование относительного данного элемента*/
    text-shadow: 1px 1px 2px #000;  /*устанавливаем тень для текста*/
    filter: Shadow(Color=#000, Direction=45, Strength=1); /*создаем тень для текста для IE*/
}
 
ul.menu > li:hover{
    background: #f6a70c; /*установка фона*/
    background: -moz-linear-gradient(top,  #f6a70c 0%, #e77e01 100%); /*установка градиентного фона для Mozilla*/
    background: -webkit-linear-gradient(top,  #f6a70c 0%,#e77e01 100%); /*установка градиентного фона для Chrome и Safari*/
    background: linear-gradient(to bottom,  #f6a70c 0%,#e77e01 100%); /*установка градиентного фона*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6a70c', endColorstr='#e77e01',GradientType=0 ); /*установка градиентного фона для IE*/
    font-family: 'Swis721BTRoman'; /*применение шрифта*/
    border-radius: 5px 5px 0 0; /*округляем верхние края*/
    
}
 
ul.menu > li > a:hover{
    text-transform: uppercase; /*устанавливаем все буквы прописными*/
    font-style: italic; /*применение курсивного начертания*/
    text-shadow: 1px 1px 2px #000; /*устанавливаем тень*/
    filter: Shadow(Color=#000, Direction=45, Strength=1); /*создаем тень для текста для IE*/
}
 
ul.submenu{
    visibility: hidden; /*скрываем подменю*/
    opacity: 0; /*устанавливаем прозрачность*/
    position: absolute; /*устанавливаем позиционирование относительно родительского елемента*/
    width: 131px; /*задаем ширину*/
    overflow: hidden; /*скрываем блок*/
    transition-duration: .3s; /*длительность анимации*/
    transition-timing-function: ease-in; /*Анимация медленно начинается, к концу ускоряется*/
}
 
ul.submenu > li{
    display: block; /*делаем список блоком*/
}
 
 
ul.submenu > li > a{
    display: block; /*делаем ссылки списка блоком*/
    position: relative;/*позиционирование отоносительно данного элемента*/
    overflow: hidden;/*запрет переноса строк*/
    padding-left: 10px; /*отступ слева*/
    color: #fff; /*цвет текста*/
    text-align: left; /*выравниваем текст по левому краю*/
    line-height: 37px; /*выравниваем текст по вертикали*/
    font-family: 'Arial'; /*применяем шрифт к тексту*/
    font-size: 11px; /*устанавливаем размер шрифта*/
    text-decoration: none; /*убираем подчеркивание текста*/
    background: #e77e01; /*устанавливаем фон*/
    background: -moz-linear-gradient(left,  #e77e01 0%, #f6a70c 100%); /*установка градиентного фона для Mozilla*/
    background: -webkit-linear-gradient(left,  #e77e01 0%,#f6a70c 100%); /*установка градиентного фона для Chrome и Safari*/
    background: linear-gradient(to right,  #e77e01 0%,#f6a70c 100%); /*установка градиентного фона*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e77e01', endColorstr='#f6a70c',GradientType=1 ); /*установка градиентного фона для IE*/
    height: 37px; /*задаем высоту*/
}
 
ul.submenu > li > a:hover{
    background: #4e4e4e; /*устанавливаем цвет фона*/
    font-family: 'Tahoma'; /*применяем шрифт к тексту*/
    font-size: 12px; /*устанавливае размер шрифта*/
}
 
ul.menu > li:hover > ul.submenu{
    visibility: visible; /*показываем подменю*/
    opacity: 1; /*устанавливаем непрозрачность*/
    transition-duration: .3s; /*длительность анимации*/
    transition-timing-function: ease-in; /*Анимация медленно начинается, к концу ускоряется*/
    width: 171px; /*устанавливаем ширину*/
}
Ответ: а так
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
nav{
    position: relative; /*устанавливаем позиционирования относительно самого объекта*/
    z-index: 1; /*элемент отображается поверх всех остальных элементов*/
    top: -7px; /*смещение элемента от верхнего края*/
    padding-top: 30px;
}
 
ul{
    display: block;     /*делаем список блоком*/
    margin: 0 auto;     /*верхний и нижний отступ и выравниваем по горизонтали*/
    padding: 0;         /*текстовый отступ нулевой*/
    list-style: none;   /*убираем маркеры для списка*/
}
 
ul.menu > li{
    float: left;        /*прижимаем к левому краю*/
    position: relative; /*позиционирование относительного данного элемента*/
    left: 301px; /*смещение элемента от левого края*/
    top: -6px; /*смещение элемента от верхнего края*/
}
 
ul.menu > li > a{
    display: block;     /*делаем блоком*/
    padding: 0;         /*текстовые отступы нулевые*/
    min-width: 131px;   /*минимальная ширина*/
    min-height: 38px;   /*минимальная высота*/
    line-height: 38px;  /*высота блока*/
    margin-right: 1px;  /*отступ справа*/
    color: #fff;        /*цвет текста белый*/
    border-radius: 5px 5px 0 0; /*округляем верхние края*/
    text-align: center; /*выравнивание текста по центру*/
    overflow: hidden;   /*Отображается только область внутри элемента, остальное будет скрыто*/
    text-overflow: ellipsis;    /*непомещающийся текст будет заменен ...*/
    font-family: 'Swis721BTRoman';  /*устанавливаем шрифт*/
    font-size: 14pt;    /*устанавливаем размер шрифта*/
    text-decoration: none;  /*убераем подчеркивание ссылки*/
    background: #262626; /*установка фона*/
    background: -moz-linear-gradient(top,  #262626 0%, #111111 100%); /*установка градиентного фона для Mozilla*/
    background: -webkit-linear-gradient(top,  #262626 0%,#111111 100%); /*установка градиентного фона для Chrome и Safari*/
    background: linear-gradient(to bottom,  #262626 0%,#111111 100%); /*установка градиентного фона*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#111111',GradientType=0 ); /*установка градиентного фона для IE*/
    position: relative; /*позиционирование относительного данного элемента*/
    text-shadow: 1px 1px 2px #000;  /*устанавливаем тень для текста*/
    filter: Shadow(Color=#000, Direction=45, Strength=1); /*создаем тень для текста для IE*/
}
 
ul.menu > li:hover > a {
    background: #f6a70c; /*установка фона*/
    background: -moz-linear-gradient(top,  #f6a70c 0%, #e77e01 100%); /*установка градиентного фона для Mozilla*/
    background: -webkit-linear-gradient(top,  #f6a70c 0%,#e77e01 100%); /*установка градиентного фона для Chrome и Safari*/
    background: linear-gradient(to bottom,  #f6a70c 0%,#e77e01 100%); /*установка градиентного фона*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6a70c', endColorstr='#e77e01',GradientType=0 ); /*установка градиентного фона для IE*/
    font-family: 'Swis721BTRoman'; /*применение шрифта*/
    border-radius: 5px 5px 0 0; /*округляем верхние края*/
    
}
 
 
ul.menu > li > a:hover{
    text-transform: uppercase; /*устанавливаем все буквы прописными*/
    font-style: italic; /*применение курсивного начертания*/
    text-shadow: 1px 1px 2px #000; /*устанавливаем тень*/
    filter: Shadow(Color=#000, Direction=45, Strength=1); /*создаем тень для текста для IE*/
}
 
ul.submenu{
    visibility: hidden; /*скрываем подменю*/
    opacity: 0; /*устанавливаем прозрачность*/
    position: absolute; /*устанавливаем позиционирование относительно родительского елемента*/
    width: 131px; /*задаем ширину*/
    overflow: hidden; /*скрываем блок*/
    transition-duration: .3s; /*длительность анимации*/
    transition-timing-function: ease-in; /*Анимация медленно начинается, к концу ускоряется*/
}
 
ul.submenu > li{
    display: block; /*делаем список блоком*/
}
 
 
ul.submenu > li > a{
    display: block; /*делаем ссылки списка блоком*/
    position: relative;/*позиционирование отоносительно данного элемента*/
    overflow: hidden;/*запрет переноса строк*/
    padding-left: 10px; /*отступ слева*/
    color: #fff; /*цвет текста*/
    text-align: left; /*выравниваем текст по левому краю*/
    line-height: 37px; /*выравниваем текст по вертикали*/
    font-family: 'Arial'; /*применяем шрифт к тексту*/
    font-size: 11px; /*устанавливаем размер шрифта*/
    text-decoration: none; /*убираем подчеркивание текста*/
    background: #e77e01; /*устанавливаем фон*/
    background: -moz-linear-gradient(left,  #e77e01 0%, #f6a70c 100%); /*установка градиентного фона для Mozilla*/
    background: -webkit-linear-gradient(left,  #e77e01 0%,#f6a70c 100%); /*установка градиентного фона для Chrome и Safari*/
    background: linear-gradient(to right,  #e77e01 0%,#f6a70c 100%); /*установка градиентного фона*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e77e01', endColorstr='#f6a70c',GradientType=1 ); /*установка градиентного фона для IE*/
    height: 37px; /*задаем высоту*/
}
 
ul.submenu > li > a:hover{
    background: #4e4e4e; /*устанавливаем цвет фона*/
    font-family: 'Tahoma'; /*применяем шрифт к тексту*/
    font-size: 12px; /*устанавливае размер шрифта*/
}
 
ul.menu > li:hover > ul.submenu{
    visibility: visible; /*показываем подменю*/
    opacity: 1; /*устанавливаем непрозрачность*/
    transition-duration: .3s; /*длительность анимации*/
    transition-timing-function: ease-in; /*Анимация медленно начинается, к концу ускоряется*/
    width: 171px; /*устанавливаем ширину*/
}
Вопрос: Выравнивание картинок

Здравствуйте имеется вот такой простенький сайт

Вот его код:

Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<title>Juste Debout</title>
<link href="style/stylesheet.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <div id="top_bar_black">
        <div id="logo_container">
            <div id="logo_image">
            </div>
            <div id="nav_block">
                <div class="nav_button"><a href="">Home</a></div>
                <div class="nav_button"><a href="">Contact</a></div>
                <div class="nav_button"><a href="">About</a></div>
                <div class="nav_button"><a href="">Links</a></div>
                <div class="nav_button"><a href="">Services</a></div>
            </div>
        </div>
    </div>
    <div id="content_container">
        <div id="header">
            <div id="header_content_mainline">Juste Debout </div>
                <div id="header_content_tagline">Это соревнования по уличным видам танца, ежегодно проводящиеся во Франции. Имеет 4 категории в формате «два на два»— локинг, поппинг, хаус и хип-хоп, и 2 категории в формате «один на один» - экспериментал и топрок. Организатор соревнований - Брюс "Ykanji" Зонэ, также являющийся основателем школы по подготовке профессиональных танцоров хип хопа. </div>
            <br><div id="header_content_mainline">Judges this year </div><br/>
        </div>
        
            <center>
                <img src="images/cio_locking.jpg"  width="360" height="360" ><a href="">
                <img src="images/toyn_house.jpg"  width="360" height="360"><a href=""><br>
                <img src="images/niki_hiphop.jpg"  width="360" height="360"><a href="">
                <img src="images/deydey_popping.jpg"  width="360" height="360"><a href="">
            </center>
        
    </div>
</body>
</html>


Вот его css
Кликните здесь для просмотра всего текста
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
body
{
    margin:0px;/*внешний отступ от тега*/
    padding:0px;/*внутренний отступ*/
    background-attachment:scroll;/*возможность прокрутки по вертикали*/
    background-image:/*фоновое изображение*/
    background-repeat:repeat-x;/*дублирование фонового изображения по горизонтали*/
    background-position:left top;/*разместили фоновое изображение с левого края и с верхнего края*/
}
 
#top_bar_black
{
    width:100%;
    height:300px;
    background-color:#000000;
}
#logo_container
{
    height:90px;
    width:900px;
    margin-left:0px;/*автоматический внешний отступ слева*/
    margin-right:auto;
}
#logo_image
{
    width:300px;
    height:300px;
    margin-left:0px;
    margin-top:0px;
    background-image:url(../images/juste_debout.jpg);
    float:left;/*выравнивание фонового изображение по левому краю*/
}
#nav_block
{
    width:400px;
    height:100px;
    float:right;
}
.nav_button
{
    width:70px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:16px;
    margin-left:750px;
    margin-top:35px;
    text-align:centr;/*текст по центру*/
    float:left;
}
.nav_button a
{
    color:#FFFFFF;
    text-decoration:none;/*ссылки без нижнего подчеркивания*/
}
#content_container
{
    margin-left:auto;
    margin-right:auto;
    width:900px;
    height:100px;
    background-attachment:scroll;
    background-repeat:no-repeat;
    background-position:right center;
}
#header_content_mainline
{
    font-size:70px;
    color:#000000;
    width:1100px;
    height:100px;
    font-style:italic;
    font-family:Impact,Arial,Helvetica,sans-serif;  
}
#header_content_tagline
{
    font-size:25px;
    font-style:italic;
    color:#333333;
    width:1000px;
    height:150px;
}
#header
{
    width:100px;
    margin-top:100px;
    margin-bottom:50px;
    float:left;
}
.header_lower
{
    height:100px;
    width:320px;
    font-size:16pt;
    color: black;
    vertical-align:top;
    font-style:italic;
}
.header_lower_content_boxline
{
    font-size:35px;
    color:#000000;
    width:40px;
    font-style:bold;
    font-family:Comic Sans,Arial,Helvetica,sans-serif;
}
.header_content_boxcontent
{
    font-size:12px;
    color:#333333;
    width:100px;
    height:100px;
    font-style:italic;
}
#center
{
    height:360px;
    width:360px;    
    margin-top:100px;
    background-image:url(../images/cio_locking.jpg);
    background-image:url(../images/niki_hiphop.jpg);
    float:center;
}
#bottom_bar_black
{
    width:100px;
    height:160px;
    background-color:#B20000;
}
#main_container
{
    height:90px;
    width:900px;
    margin-left:auto;
    margin-right:auto;
}
.header_content_lowerline
{
    font-size:35px;
    color:#FFFFFF;
    width:400px;
    font-style:italic;
}
.header_content_lowerboxcontent
{
    font-size:12px;
    color:#CCCCCC;
    width:400px;
}


Подскажите как с помощью css подправить так, чтобы картинки ушли вниз то есть не налезали на текст, а также как сверху каждой картинки сделать надпись, чтобы она была по центру!
Ответ:
Сообщение от BoyStyle
вот так теперь стало



Сообщение от BoyStyle
#header_1
{
* * margin-right: 100px; /* Отступ справа */
* * margin-left:100px; /*Отсуп слева **/
* * margin-top:100px; /* Отсуп сверху */
* * margin-bottom:100px /*Отступ снизу */
}
А зачем вы сдвигаете и влево и вправо и везде вам же только вниз надо.. Это я вам для примера дал как двигать влево вправо и т.д. и пиксели это только пример .. можно -100px , 100px ,200px,1000px и т.д. Не обязательно же их такие ставить. Прочитайте подробнее в .
Вопрос: Вертикальное выравнивание контента в div

Здравствуйте!
Никак не получается выравнять по-вертикали контент внутри div элемента.
Сама страница:
Кликните здесь для просмотра всего текста
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
    <head>
        <title>Timetable</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="page">
        <div id="content">
            <h1>Timetable</h1>
        </div>
        <div id="sidebar">
            <p>Some content</p>
        </div>
        </div>
    </body>
</html>

CSS:
Кликните здесь для просмотра всего текста
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
html, body {
    font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
    font-size: 11pt; /* Размер основного шрифта в пунктах  */
    background-color: #fff; /* Цвет фона веб-страницы */
    color: #333; /* Цвет основного текста */
    height: 100%;
    margin: 0;
}
 
h1 {
    color: #4aaa00; /* Цвет заголовка */
    font-size: 24pt; /* Размер шрифта в пунктах */
    font-family: Georgia, Times, serif; /* Семейство шрифтов */
    font-weight: normal; /* Нормальное начертание текста  */
}
 
p {
    text-align: justify; /* Выравнивание по ширине */
    padding-top: 16pt; /* Отступ от линии слева до текста  */
    padding-bottom: 16pt; /* Отступ от линии снизу до текста  */
}
 
div {
    display: block;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
}
 
#page {
    width: 100%;
    height: 100%;
}
 
#content {
    padding: 0 16pt 0;
    float: left;
    width: 70%;
    background-color: #FFF;
    height: 100%;
}
 
#sidebar{
    padding: 0 16pt 0;
    float: left;
    width: 30%;
    background-color: #4AAA00;
    height: 100%;
    color: #FFF;
}


Помогите, кто владеет сей магией?
Ответ: Вот то, что есть сейчас, чтобы понятнее было, форма справа смещена вверх, мне же необходимо по центру
К тому же сама панель заполняет высоту родительского элемента, а не экрана =(
Вопрос: Li сделать слева и справа

Доброго времени суток!

Ребят, помогите с таким вопросом:

Имеется нумерованный список, к каждому из li приписываю class left или right. Необходимо чтобы left был слева, а right справа.

Вот попытался нарисовать что мне нужно:


Структура html должна быть такой же(имею ввиду чтобы не было - left, right, left, right, а нужно - left, left, right, right)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class='wrp'>
            <ul class='bat'>
                <li class='left'>Текст рыба просто рыба мега рыба 1</li>
                <li class='left'>Текст рыба просто 2</li>
                <li class='left'>Текст рыба мега рыба 3</li>
 
                <li class='right'>Текст рыба просто рыба мега рыба 4</li>
                <li class='right'>Текст рыба просто рыба мега рыба 5</li>
                <li class='right'>Текст рыба просто рыба мега рыба 6</li>
                
                <div class='clear'></div>
            </ul>
        </div>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
    .wrp {
        width: 400px;
        outline: 1px solid green;
    }
    
    .bat {
    padding: 0; 
    margin: 0;
    list-style: none;
    }
    
    .left {
        max-width: 199px;
        float: left;
        outline: 1px solid red;
    }
    
    .right {
        max-width: 199px;
        float: right;
        outline: 1px solid blue;
    }
    
    .clear {
        clear: both;
    }
</style>
Ответ: Во первых в тег <UL> сторонние теги вписывать нельзя
Во вторых с такой структурой у тебя SLameN, ничего не получиться, ибо нужно делать двойной список.

Не знаю что должно было у тебя получиться, но уж то похоже на вот это:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class='wrp'>
    <ul class='bat'>
        <li>
            <div class="container">
                <span class="left">Title1</span>
                <span class="right">value1</span>
                <span class="center">&nbsp;</span>
            </div> 
        </li>
        <li>
            <div class="container">
                <span class="left">Title2</span>
                <span class="right">value2</span>
                <span class="center">&nbsp;</span>
            </div> 
        </li>
        <li>
            <div class="container">
                <span class="left">Title3</span>
                <span class="right">value3</span>
                <span class="center">&nbsp;</span>
            </div> 
        </li>
    </ul>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrp {
    width: 400px;
    outline: 1px solid green;
}
.bat {
    padding: 0; 
    margin: 0;
    list-style: none;
}
.center {
    display: block;
    border-bottom: 1px dotted blue;
    overflow: auto;
    position: relative;
    top: -4px;
}
 
.right {
    float: right;
    margin-left: 10px;
}
 
.left {
    float: left;
    margin-right: 10px;
}
 
.container {
    padding: 5px;
}
Вопрос: Вставить картинку слева или справа от картинки

Помогите чайнику плиз ) У меня вопрос как вставить картинку слева или справа от картинки )( блочная верстка ) ?))

 Комментарий модератора 
Один вопрос - одна отдельная тема!
Ответ:
Сообщение от frekodelka69
мне надо слева от всех картинок вставить длинную картинку которая типо вниз идет )) а потом справа )
Эти, как Вы говорите "картинки" вставляются фоном, с помощью свойства background, а не тега img...
Вопрос: Скроллинг выпадающего списка не крутит его до конца

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

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="wrapper details_mod">
      <header class="header details_mod">
        <div class="title_container"><a href="home.html" class="btn_back"></a>
          <h1 class="title_size_1">Branch Details & Information</h1>
        </div>
        <form name="form_branch_details" action="" method="get" class="form_search branch_details_mod">
          <dl class="form_cell form_cell_v2_mod">
            <dt class="form_dt form_dt_v2_mod hide_mod">
              <label for="Search">Search</label>
            </dt>
            <dd class="form_dd form_dd_v2_mod">
              <input id="search_branch" name="search_branch" placeholder="Search" type="text" class="f_field field_v1_mod"><span class="search_i"></span>
            </dd>
          </dl>
          <div class="states_dropdown">Choose
            <ul class="states_list">
              <li class="states_item"><a href="#" class="states_link">JH</a></li>
              <li class="states_item"><a href="#" class="states_link">KH</a></li>
              <li class="states_item"><a href="#" class="states_link">KN</a></li>
              <li class="states_item"><a href="#" class="states_link">MK</a></li>
              <li class="states_item"><a href="#" class="states_link">NS</a></li>
              <li class="states_item"><a href="#" class="states_link">PH</a></li>
              <li class="states_item"><a href="#" class="states_link">PK</a></li>
              <li class="states_item"><a href="#" class="states_link">PS</a></li>
              <li class="states_item"><a href="#" class="states_link">PP</a></li>
              <li class="states_item"><a href="#" class="states_link">SL</a></li>
              <li class="states_item"><a href="#" class="states_link">TR</a></li>
              <li class="states_item"><a href="#" class="states_link">PTJ</a></li>
              <li class="states_item"><a href="#" class="states_link">KL</a></li>
              <li class="states_item"><a href="#" class="states_link">SBH</a></li>
              <li class="states_item"><a href="#" class="states_link">SWK</a></li>
              <li class="states_item"><a href="#" class="states_link">LB</a></li>
            </ul>
          </div>
        </form>
      </header>
      <main class="main_row details_mod"></main>
</div>
Вот основные свойства:

Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.states_list {
  overflow-y: auto;
  height: 320px;
  position: absolute;
  top: 27px;
  left: 0;
  background: #fff;
  width: 100%;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25); }
 
.states_item {
  box-shadow: 0 4px 6px -6px rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 32px; }
 
.wrapper {
  min-height: 100vh;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #2d3645;
  font-family: "Montserrat", sans-serif;
  font-size: 18px; }
  .wrapper.details_mod {
    background: #efeff4; }
 
.main_row {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
 
  .main_row.details_mod {
    height: auto;
    background: #efeff4; }
Как проблема выглядит на скриншоте: слева -- когда высота экрана достаточна для прокрутки списка, справа -- уже нельзя докрутить его до конца. Если поставить у wrapper'а свойство overflow: auto;, то список затем прокручивается вместе с окном браузера, но при добавлении контента в основную область появляется ещё один скроллбар, что нехорошо. Я прикрепил архив с проектом, если кто знает, в чем тут дело, прошу помочь.
Ответ: Спасибо, правда думал, это должно и так работать в CSS..

Добавлено через 9 минут
Я придумал, как это сделать на CSS В общем, кому интересно, я обернул список в контейнер, которому задал position: fixed; , растянул этот контейнер на весь экран и теперь список крутится в этом контейнере.
Вопрос: Выравнивание вертикальное по центру

Добрый день! Прочитала очень много на форуме, но так и не нашла решения для себя.
Помогите пожалуйста разобраться..просто уже крик отчаяния((
Есть задача:
1. Есть три блока, нужно сделать так, чтобы они были шириной 100 пикселей, выстроились слева направо и были выравнены вертикально по центру
с шириной и построением разобралась, а вот с выравниванием никак
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.content {
  width: 600px;
  padding: 0 30px 30px 30px;
  border: 3px solid;
}
 
.element {
  border: 2px solid red;
  height: 150px;
  margin-top: 30px;
}
 
.element:nth-child(2) {
  height: 200px;
}
 
.element:nth-child(3) {
  height: 250px;
}
HTML5
1
2
3
4
5
<div class="content">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>
Для элементов и для изменения ширины применила:
CSS
1
2
3
4
  .element {
    display: inline-block;
    width: 100px;
  }
Ответ: Спасибо, получилось.
Я думала иначе по поводу вертикального и горизонтального выравнивания.
Вопрос: Горизонтальное меню с выпадающим списком и его адаптивность

Добрый день.
Подскажите, пожалуйста, как делать правильно.

В тестовом примере не получается адаптивно привязать последнее
выпадающее подменю. Т.е., если в части коде css :

/**/
#tmenu li:nth-child(3) { /* [C1234] */
	width:35%;
}
#tmenu li:nth-child(3) ul a{         /* [ C1234 > ... ]  */
	width: 14.3em;
}
#tmenu li:nth-child(3) li ul {                             /* [ C1234 > ... > ... ]  */
	/*width: 14.3rem;*/
    background: #E6D7C3; 
    left: 200px;         
}
/**/


width: 14.3em заменить на width: 200px, то на малой ширине экрана адаптивность
подменю теряется ..., а при пользовании %, или em, - кривизна уже с самим подменю.

Так-же глючно ведет себя выделение строки при наведении, при кликах на строки подменю.
Вобщем, накосячил.

html
+

<body>
<div id="top-menu">
<ul id="tmenu">

<li><a>A1234</a></li>
<li><a>B123456</a></li>
<li><a>C1234  ></a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3 большой длины.    ></a>
<ul>
<li><a>111</a></li>
<li><a>222</a></li>
<li><a>333</a></li>
</ul>
</li>
<li><a>4</a></li>
</ul>
</li>
<li><a>D12345678</a></li>
</ul>
</div>
<!-- Указатель - треугольник под меню. -->
<div id ="trian" style ="width:100%; height:4px; background: orange; color: red; border: solid 1px #E8DDCF; overflow: hidden; font-size: 14px;"><div style ="margin-top: -11px;">❤</div></div>

<!-- Контент -->
<div style ="width:100%; height:600px; background: #F3E7D8; border: solid 1px #E8DDCF;"></div>
</body>

css
+

body {
background-color: #F3E7D8;
}
html {overflow-y: scroll;}


#top-menu {
width:100%;
height:30px;
background: #E8DDCF;
border: solid 1px #E8DDCF;
}
#tmenu { /*для списка верхнего уровня*/
width:100%;
padding:0;
margin:0;
list-style-type:none;
position:relative;
}


#tmenu li:nth-child(1) { /* [A1234] */
width:20%;
}
#tmenu li:nth-child(2) { /* [B123456] */
width:15%;
}

/**/
#tmenu li:nth-child(3) { /* [C1234] */
width:35%;
}
#tmenu li:nth-child(3) ul a{ /* [ C1234 > ... ] */
width: 200px;
}
#tmenu li:nth-child(3) li ul { /* [ C1234 > ... > ... ] */
/*width: 14.3rem;*/
background: #E6D7C3;
left: 200px;
}
/**/

#tmenu li:nth-child(4) { /* [D12345678] */
width:30%;
}



#tmenu li{ /*для всех элементов списка всех уровней*/
float:left; /*выравнивание по левому краю*/
position:relative; /*Устанавливаем тип позиционирования*/
}
#tmenu li a{ /* для всех неактивных ссылок в списке */
color:blue; /* цвет текста */
font-size: 14px;
text-decoration:none; /* убираем подчеркивание */
display:block; /* превращаем в блочный элемент */
line-height:30px; /* межстрочный интервал */
text-align: center;
}




@media (max-width: 880px) {
#tmenu li a{font-size: 12px;}
}
@media (max-width: 786px) {
#tmenu li a{font-size: 10px;}
}
@media (max-width: 687px) {
#tmenu li a{font-size: 9px;}
}
@media (max-width: 612px) {
#tmenu li a{font-size: 7px;}
}




#tmenu li a:hover{ /*для всех активных ссылок в списке*/
background-color: #DECAAF; /* Фон при наведении курсора мыши на все надписи*/
}

#tmenu li ul li{ /* Для всех элементов вложенных списков */
float:none; /* Убираем выравнивание*/
}
#tmenu li ul li a{ /* Для всех ссылок внутри элементов вложенных списков */
line-height:25px; /* Устанавливаем межстрочный интервал */
}
#tmenu li ul{ /* Для всех блоков вложенных ненумерованных списков */
display:none; /* Выключаем отображение */
position:absolute; /* Позиционируем абсолютно */
background-color: #E6D8C5; /* Устанавливаем фон у выпадающего списка */
list-style:none; /* Отключаем маркеры */
padding:0; /* Отключаем внутренние отступы */
}
#tmenu li:hover ul{ /* Для всех блоков вложенных ненумерованных списков при активации*/
display:block; /* Включаем отображение */
}
#tmenu li ul li ul, /* Для всех блоков вложенных списков третьего и ниже уровней */
#tmenu li:hover ul li ul{ /* А также для них же, но при условии активации списка второго уровня*/
display:none; /*Выключаем отображение*/
position:absolute; /*Позиционируем абсолютно*/
top:0; /*Прижимаем к верхнему краю род. элемента, указав 0*/
}
#tmenu li ul li:hover ul{ /*Для всех блоков вложенных списков третьего и ниже уровней при активации*/
display:block; /*Включаем отображение*/
}

js
+

var mm = '';
document.getElementById('tmenu').addEventListener("click", menu_onclick_changeColor, true); // <script src="...js" defer></script>
// ^
function menu_onclick_changeColor(s) {

var target = event.target || event.srcElement;
if ( target.style != mm ) {

target.style.background = 'red'; // пункт меню, на который кликнули - делаю другим цветом;

var rect = target.getBoundingClientRect();
var dist = rect.left; // расст. до левого края, чтобы двигать указатель-треугольник снизу от кнопок Меню;
var vid = rect.width; // ширина кнопки, по которой кликнули, чтобы точно позиционировать указ.-треугольник;

var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; // ширина окна;
document.getElementById('trian').firstElementChild.style.marginLeft = ''+(((dist+vid/2) *100) / x*1.008).toFixed()+'%';

if (mm != '') {
mm.background = '#E8DDCF';
}

mm = target.style;
}
}
Ответ: он же на узком экране, - выпадающий список кривой :

К сообщению приложен файл. Размер - 6Kb