Сделать блок top_line шириной 100% контейнера

@Cdelphi78 · Регистрация: 21.02.2014

Студворк — интернет-сервис помощи студентам

Всем привет! я что то не пойму мне нужно .блок top_line сделать шириной 100% а контейнер по умалчанию, однакао когда я так делаю получается непонятно что, появляется полоса прокрутки и .top_line не заливается цветом на 100% убираю контейнер все нормально .top_line на 100%

HTML5
1
2
3
4
5
 <div class="top_line">
         <div class="container">
             123
         </div>
     </div>

Кликните здесь для просмотра всего текста

Сделать блок top_line шириной 100% контейнера

Кликните здесь для просмотра всего текста

@Cdelphi78 · 25.01.2016, 08:58 **[ТС]**

Как такое возможно если контейнир дочерний блок?

Добавлено через 8 часов 25 минут
Кто нибуть есть?

@monochromer · 25.01.2016, 10:05

разместите код - посмотрим.

@Cdelphi78 · 25.01.2016, 10:15 **[ТС]**

код не могу разместить, подключите просто бутстрап, вставьте html первого поста

Добавлено через 34 секунды
по скринам не понятно что ли

Добавлено через 2 минуты
Там кода то нету впринципи вот css

CSS
1
2
3
4
5
6
.top_line {
   width:100%;
   background: #212121;
    color: #a6a6a6;
    min-height:100px;
}

@aj17 · 25.01.2016, 10:34

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
    .top_line {
   width:100%;
   background: #212121;
    color: #a6a6a6;
    min-height:100px;
}
</style>
<body>
     <div class="top_line">
         <div class="container">
             123
         </div>
     </div> 
</body>
</html>

У меня все ок.

@Cdelphi78 · 25.01.2016, 11:00 **[ТС]**

Покажите инспектор ширину контейнера разрешение монитора какое у вас? В чем у меня проблема тогда

@Creativeman · 25.01.2016, 11:57

выложите код на http://codepen.io/ и посмотрим что не так.

@aj17 · 25.01.2016, 12:27

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

@Cdelphi78 · 25.01.2016, 13:35 **[ТС]**

aj17, Зачем же я буду копировать если он у меня такой же ?

@aj17 · 25.01.2016, 14:40

Потому, что не такой же.

@Cdelphi78 · 25.01.2016, 15:12 **[ТС]**

Сообщение от aj17

Потому, что не такой же.

А какой же?

@aj17 · 25.01.2016, 15:20

Вы запускали мой код, у вас проблема не решилась?

@Cdelphi78 · 25.01.2016, 15:36 **[ТС]**

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

@Cdelphi78 · 25.01.2016, 17:17 **[ТС]**

На пишу сюда же, не могу понять откуда берется отступ сверху?, из за этого пункты меню прижаты к низу шапки,

Кликните здесь для просмотра всего текста

@Cdelphi78 · 25.01.2016, 17:19 **[ТС]**

Вот код тогда выложу

Кликните здесь для просмотра всего текста

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
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="ru" class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="ru" class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="ru" class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="ru">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>Заголовок</title>
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.png" />
    <link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="libs/font-awesome-4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/media.css" />
</head>
<body>
    
     <div class="top_line">
         <div class="container">
             <div class="row">
                 <div class="col-md-3"></div>
                 <div class="col-md-5">
                     <div class="nav">
                         <ul>
                             <li>Стоимость</li>
                             <li>Отзывы</li>
                             <li>Написать письмо</li>
                         </ul>
                     </div>
                 </div>
                 <div class="col-md-4"></div>
             </div>
         </div>
     </div> 
 
    <!--[if lt IE 9]>
    <script src="libs/html5shiv/es5-shim.min.js"></script>
    <script src="libs/html5shiv/html5shiv.min.js"></script>
    <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
    <script src="libs/respond/respond.min.js"></script>
    <![endif]-->
    
</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
*::-webkit-input-placeholder {
    color: #666;
    opacity: 1;
}
*:-moz-placeholder {
    color: #666;
    opacity: 1;
}
*::-moz-placeholder {
    color: #666;
    opacity: 1;
}
*:-ms-input-placeholder {
    color: #666;
    opacity: 1;
}
 
body input:focus:required:invalid,
body textarea:focus:required:invalid {
    
}
body input:required:valid,
body textarea:required:valid {
    
}
body {
    font-family: "RobotoRegular", sans-serif;
    font-size: 16px;
}
 
 
.top_line {
   background: #212121;
    color: #a6a6a6;
   
}
 
.nav ul li {
    color: #a6a6a6;
    float:left;
    padding: 23px 42px;
    list-style-type: none;
    
    
}

@aj17 · 25.01.2016, 17:48

Сделайте вот так

CSS
1
<ul class="clearfix"></ul>

@Cdelphi78 · 25.01.2016, 17:54 **[ТС]**

Ах да это же clearfix, не совсем понял этот момент
когда его применяьть нужно,? так сразу и не скажещь что он здесь нужен

@aj17 · 25.01.2016, 17:58

Это хак от схлопывающихся блоков, просто нужно понимать, что родитель всегда схлопнется, когда в нём float элементы. Что бы этого не было, есть несколько способов "борьбы", один из них clearfix...

@siyanie · 25.01.2016, 18:20

Cdelphi78, говорил же вам изучите документацию на сайте bootstrap. Скорее всего как выше говорят нужно .clearfix применить к родителю.
http://bootstrap-3.ru/css.php#... s-clearfix

@Cdelphi78 · 25.01.2016, 20:53 **[ТС]**

siyanie, Дак вот верстаю и параллельно изучаю, когда вы мне говорили? cleafix - применяется тогда когда плавающие элементы не там располагаются, и да я знаю что при задании float элементы выплывают из потока просто здесь не заметил схлопывания, плохо работает диагностика браузера)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	25.01.2016, 08:58 [ТС]
	Как такое возможно если контейнир дочерний блок? Добавлено через 8 часов 25 минут Кто нибуть есть? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	25.01.2016, 10:05
	разместите код - посмотрим. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	25.01.2016, 11:00 [ТС]
	Покажите инспектор ширину контейнера разрешение монитора какое у вас? В чем у меня проблема тогда 0

@Creativeman 28 / 28 / 9 Регистрация: 26.12.2015 Сообщений: 93
	25.01.2016, 11:57
	выложите код на http://codepen.io/ и посмотрим что не так. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	25.01.2016, 12:27
	ВЫ скопируйте весь код, у вас все тоже должно работать. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	25.01.2016, 13:35 [ТС]
	aj17, Зачем же я буду копировать если он у меня такой же ? 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	25.01.2016, 14:40
	Потому, что не такой же. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	25.01.2016, 15:20
	Вы запускали мой код, у вас проблема не решилась? 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	25.01.2016, 15:36 [ТС]
	У меня сейчас нормально на моем коде, я к чему то все вел , походу дела какие то проблемы с адаптивностью у бутстрапа потому что я сейчас работаю за большим монитором, вчера я работал за маленьким у вас видимо больше чем у меня, поэтому все нормально. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	25.01.2016, 17:17 [ТС]
	На пишу сюда же, не могу понять откуда берется отступ сверху?, из за этого пункты меню прижаты к низу шапки, Кликните здесь для просмотра всего текста 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	25.01.2016, 17:54 [ТС]
	Ах да это же clearfix, не совсем понял этот момент когда его применяьть нужно,? так сразу и не скажещь что он здесь нужен 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	25.01.2016, 17:58
	Это хак от схлопывающихся блоков, просто нужно понимать, что родитель всегда схлопнется, когда в нём float элементы. Что бы этого не было, есть несколько способов "борьбы", один из них clearfix... 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	25.01.2016, 18:20
	Cdelphi78, говорил же вам изучите документацию на сайте bootstrap. Скорее всего как выше говорят нужно .clearfix применить к родителю. http://bootstrap-3.ru/css.php#... s-clearfix 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	25.01.2016, 20:53 [ТС]
	siyanie, Дак вот верстаю и параллельно изучаю, когда вы мне говорили? cleafix - применяется тогда когда плавающие элементы не там располагаются, и да я знаю что при задании float элементы выплывают из потока просто здесь не заметил схлопывания, плохо работает диагностика браузера) 0