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

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


Код HTML5
1
2
3
4
5
6
7
8
9
10
<div id="second-nav">
            <ul class="f-left">
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></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
#second-nav {
    background: #fbb92f;
    position: relative;
    width: 100%;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
#second-nav ul {
    float: left;
    position: relative;
}
#second-nav li {
    list-style: none;
    float: left;
    position: relative;
    height: 60px;
}
#second-nav li a {
    color: #fff;
    padding: 0 40px;
    display: block;
}
#second-nav li a:hover {
    background: #de9600;
}
Заранее спасибо!
Ответ: , Не вышло. если не сложно напишите где именно вставить text-align: justify; И каким образом это применить к блокам DIV.
Вопрос: Как изменить ширину блока в шаблоне?

Приветствую формучан ))
У меня вроде бы банальная проблема, но я не могу найти решение.
Мне нужно убрать правый сайдбар. И расширить основной блок.


Убрать сайдбар я вроде понял как.. просто удалить строчку <?php get_sidebar();?> в нужном php файле.
А вот увеличить ширину блока не могу понять как. Когда смотрю код, то вроде как вижу, какая строчка задает размер колонки, но в стилях этого просто нет.. ))) не пойму, где это прописано.

Ответ:
Сообщение от GradX
этот же класс может быть использован в других блоках
Ну да, в таких случаях нужно "понимать" весь шаблон... Я просто шаблоны не юзаю, а пишу сам - может, где-то не комплексно, где-то не компактно, но... Но в целом работать с ними легче, даже по той же причине, что выше ) Каждому своё )
Вопрос: Адаптивное изменение ширины блоков

Добрый вечер! На сайте на разных городах генерируются телефоны и адреса. В одном городе может быть три блока. в другом городе один блок.
В зависимости от этого нужно сделать с помощью js, чтобы он менял ширину блока в зависимости от ситуации и адаптировал.
Если у нас один блок сгенерировался - то ширина 100%. Если 5 блоков, то адаптивно переносил бы на новую строку, так как в ширину могут влезать только 4 блока.

Я сделала такой пример:
но он не работает, так как у container задана фиксированная ширина. Помогите пожалуйста поправить код правильно
Ответ: Судя по описанию, задачу можно решить чистым CSS, с помощью flexbox, без JS
Вопрос: Масштабирование ширины макета не работает в старых браузерах

Почему у страницы при масштабировании не меняется ширина блоков (ширина фиксирована) в таких старых браузерах как Chrome 1, IE6 и др.?
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
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
<!DOCTYPE html>
<html>
<head>
    <title>Титул</title>
 
    <style>
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: yellow;
}
.contaner {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 450px;
    max-width: 450px;
    margin: 0 auto;
    background-color: orange;
}
.header{
    background-color: lightgreen;
}
.logo {
    width: 50px;
    float: left;
    background-color: green;
}
.main_title {
    width: 350px;
    float: left;
    background-color: darkgreen;
}
.house {
    width: 50px;
    float: right;
    background-color: lime;
}
.clear {
    clear: both;
}
.main {
    height: 100%;
    background-color: red;
}
.empty {
    height: 100px;
}
.footer {
    width: 450px;
    height: 100px;
    margin: -100px auto 0;
    background-color: brown;
}
    <style>
 
</head>
<body>
<div class="contaner">
    <div class="header">
        <div class="logo">
            a
        </div>
        <div class="main_title">
            <h2>Почти главный заголовок, однако</h2>
            <h1>Главный заголовок, однако</h1>
        </div>
        <div class="house">
            a
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="main">
            Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние Со дер жа ние
    </div>
    <div class="empty">
    </div>
</div>
<div class="footer">
    Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал Под вал
</div>
</body>
</html>
Вот скриншоты с примерами масштабирования:
100%

30%

300%
Ответ: Так, при изменении масштаба окна в очень старых браузерах ширина дивного блока (width), указанная в пикселях (px), относительно экрана остаётся такой же. Т.е. я изменяю масштаб окна браузера, а размер такой же.
Что сделать, чтобы ширина в таких браузерах изменялась, когда меняю масштаб?
Вопрос: Задача правильной ширины блоку при перетаскивание с помощью jquery ui

Как задать динамически изменяемую ширину блоку, при перетаскивание его с помощью jquery ui.
На скрине виден блок перетащенный с помощью jquery ui (Draggable & Sortable).
Нужно, чтоб его ширина менялась динамически (чтоб кнопки, которые спава были выравнены )
Ответ: Arx777,
лучше макет рабочий чем мутный скрин
Вопрос: Как выравнивать горизонтальный список по ширине блока (CSS3, HTML5)

Друзья! Подскажите, пожалуйста, как выравнивать горизонтальный список по ширине блока (CSS3, HTML5)?
У меня есть меню, я использовал списки для его создания.. мне нужно чтобы слова (пункты меню) равномерно растянулись по всему блоку. (1)

Извините, если не так вставляю скрины, в правилах не нашёл этого момента


Ещё значки соц сетей (2) (они лежат в одном блоке со ссылкой "Send your demo" (3)) - хотелось бы задать интервал между значками, как это сделать? Ещё они лежат чуть ниже, чем "Send your demo".. опустить бы немного.

Выручайте, друзья! Я совсем новичок

З.Ы. Я рылся по форуму в похожих темах - к сожалению, не нашёл ответа на свой вопрос
Ответ: Список можно выровнять если задать элементам li внутри списка стиль display:inline-block а самому списку задать стиль text-align:center
ну а отступы задаются атрибутами padding и margin, так что читайте изучайте материал...
вот в качестве маленького примера код...

Код PHPHTML
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
*{padding:0px; margin:0px; box-sizing:border-box; -moz-box-sizing:border-box;}
.wrapper{
    margin:0px auto;
    width:1040px;
    min-height:650px;
    border:solid 1px rgba(0,0,0,0);
    background:#666;
    color:#CCC;
}
.menu ul{list-style-type:none;text-align:center;background:#333;margin-top:25px;}
.menu ul li{display:inline-block;}
.menu ul li a{
    color:#CCC;
    transition:all .3s;
    text-decoration:none;
    display:block;
    padding:15px 25px;
    margin-left:-4px;
}
.menu ul li a:hover{background:#999;color:#333;}
.linksBlock{padding:5px;}
.linksBlock .title{display:inline-block;font-weight:bold;margin:5px;}
.linksBlock .links{float:right;}
.linksBlock .links div{
    display:inline-block;
    width:40px;
    height:40px;
    background:red;
    border-radius:20px;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="menu">
        <ul>
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
            <li><a href="#">Пункт 6</a></li>
            <li><a href="#">Пункт 7</a></li>
        </ul>
    </div>
    <div class="linksBlock">
        <span class="title">Send your demo</span>
        <div class="links">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>
Вопрос: Поведение футера в зависимости от высоты блока основного контента

Здравствуйте. Обращаюсь опять, в надежде получить помощь. Возникла очередная проблема связаная с версткой . В чем суть проблемы. Есть футер сайта, он вообще никак не закреплен, то есть он просто идет после блока основного контента и если в блоке контента много (больше чем высота окна браузера) то футер отображается если только прокрутить страницу. И это нормально, такое поведение устраивает, а вот если контента мало то футер висит посредине страници. И вот это уже не подходит. Поставленая задача состоит в том что бы если контента много (больше высоты окна браузера) футер отображался по старому, после всего контента, а вот если контента мало, то футер как бы прилипал к низу страници. Вариантов реализации, когда футер всегда прилипает внизу страници я нашел много, но вот что бы футер отображался по разному в зависимости от высоты контента я не нашел совсем. Возможно ли реализовать это все на css или для этого уже надо подключать javascript?
Ответ: Вот древний способ прикрепить футер к низу Но высоту футера знать нужно.
HTML5
1
2
3
4
5
6
7
8
9
10
 <div id="main">
 <div id="header">
 </div>
 <div id="all">
 
 text<br>text<br>
 </div>
 </div>
 <div id="footer">
 </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
*{margin:0;padding:0;}
 
html{
          height:100%;
}
body{
          height:100%;
          margin:0;
}
 
#main {
      width:800px;
      margin:0 auto -50px;
      background:#cfc;
      min-height:100%
}
#header{
    height:100px;
     background:purple;
}
#footer {
        height:50px;
        background:#ccf; 
        width:800px;
         margin:auto;
}
#all{
     padding:0 0 50px 0; /* компенсирует отрицательный маргин у меина, чтобы текст не заползал на футтер*/
}
Вопрос: Показать блок(подвал) при скролле, который изначально расположен под блоком с контент

Всем привет! Пытаюсь релизовать такую вещь как на этом сайте .
Структура страницы такова: Сначало идет блок с контентом потом заним подвал.

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

Вот скриншот:

Такое хочу реализовать на этом сайте:

Подскажите пожалуйста как сделать это. Спасибо!!!
Ответ: sergiu920, необходимый минимум
footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

...убери всё лишнее
Вопрос: Показать блок(подвал) при скролле, который изначально расположен под блоком с контентом

Всем привет! Пытаюсь релизовать такую вещь как на этом сайте .
Структура страницы такова: Сначало идет блок с контентом потом заним подвал.

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

Вот скриншот:

Такое хочу реализовать на этом сайте:

Подскажите пожалуйста как сделать это. Спасибо!!!
Ответ: Большое Вам спасибо!
Вопрос: блоки и позиционирование

Помогите пожалуйста. Немного запуталась в позиционировании блоков.и в ширине. Меню на всю ширину вышло, а ширина блока с контентом зависит от количества текста.
сама верстка представлена на картинке.
вот код CSS который использую
CSS
1
2
3
#wrapper {margin:0 auto; width:100%; height:100%;}
#menu_h {width:100%;margin:0 auto;}
#content { display:table-cell;background: #e0eaeb;height:100%;} 
Ответ: isaeva, да вроде в норме всё...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
<meta charset="utf-8">
<style>
    *{box-sizing:border-box}
    html, body{width:100%; height:100%;  margin:0}
    #wrapper {width:100%; height:100%}
    #menu_h {width:100%; height:300px; border:4px solid orange}
    #content{display:block;background:#e0eaeb;height:100%; border:4px solid cyan} 
</style>
</head> 
<body>
<div id="wrapper">
    <div id="menu_h"></div>
    <div id="content"></div>
</div>
</body>
</html>