Buy Local

Проблема с контейнером CSS. Фон не работает полностью.

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

Это веб-сайт в прямом эфире и может быть просмотрен на http://www.ridermagazine.co.uk

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

Любая помощь будет потрясающей.

Проблема заключается в использовании всех директив float: left. Вы не нуждаетесь в них, если все элементы, которые являются блочными элементами, являются блочными элементами. Например, элемент h1 в header НЕ является блочным элементом. Кажется, что где-то есть h1 – например, глобально. Если вы переписываете это в инспекторе своего браузера на h1 , белый фон “растет”;-). Итак, мой совет: удалите все директивы float и начните снова с составления.

Просто используйте его, если вам действительно нужно. Например, если вам нужны два основных элемента div, они находятся рядом друг с другом. Также вместо этого подумайте об использовании переполнения….

EDIT: ошибка находится в div id=»content» . Удалите float:left , и он работает

Это то, что я имею в виду со злыми поплавковыми элементами; -)

в конце вашего div-страницы.

Источник

Как исправить проблемы CSS разметки?

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

Особенно много проблем доставляет разметка макета. Например, вы пытаетесь что-то спозиционировать, но внезапно исчезают отступы, элемент уменьшается или пропадает или просто позиционируется не там, где нужно.

В интернете очень много запросов подобных следующим:

• как удалить вертикальный отступ между дивами
• как убрать горизонтальный отступ между дивами
• как исправить схлопывание маргинов css
• почему маргины внутренних элементов не работают
• почему нижний/левый/правый маргин не работает

Да, схлопывание маргинов – это довольно сложная концепция, которая не сразу поддается пониманию. Узнать об этом подробнее можно здесь.

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

text-align: center не работает

Мы постоянно используем text-align: center для центрирования текста. Но это правило также может быть использовано для выравнивания элементов внутри родительского контейнера.

У новичков это часто не получается: текст внутри блока центрируется, а сам блок – нет. Почему? Потому что элемент, который вы пытаетесь выровнять является блочным.

По умолчанию он занимает 100% ширины родителя, поэтому его невозможно выровнять по центру. Чтобы решить проблему, ему следует установить строчно-блочный тип отображения.

В браузере это выглядит следующим образом:

Текст выровнялся по центру, но сам элемент – нет. Теперь вы знаете, что это происходит из-за того, что он имеет блочный тип отображения. Чтобы сработало свойство text-align: center , он должен быть строчным или строчно-блочным.

Добавим всего одну строчку в файл стилей:

И это совсем не магия, ведь вы знаете, как все работает 😉

Расстояние между инлайн-блочными элементами

С этой проблемой сталкивался каждый CSS-новичок.

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

Предполагается, что каждому нужно назначить ширину в 50%, однако это не работает. Непонятное расстояние между ними заставляет второй элемент сползать на следующую строчку, так как итоговая сумма размеров превышает 100% родителя.

В этом моменте начинаются истерики и появляются костыли с волшебными цифрами вроде width: 49.76% .

Разберемся на примере: есть два элемента с одинаковой шириной и высотой, и требуется, чтобы они занимали 50/50 доступного пространства внутри своего родителя.

body < background: #ccc; >#container < background: white; width: 500px; >#first,#second

Есть 2 распространенных способа решения этой проблемы.

Примечание переводчика:
Строчно-блочные элементы воспринимаются браузером как обычные слова в предложении, поэтому он разделяет их пробелом, ширина которого примерно равна 4px. Оба способа позволяют убрать этот пробел на физическом уровне.
Также можно воспользоваться CSS и установить для контейнера нулевой размер шрифта. При этом пробел сохранится, но будет иметь нулевую длину. Этот способ часто используется, но подходит не для всех ситуаций.

«Съезжание» строчно-блочных элементов

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

Для примера возьмем вот такую разметку:

Макет сломался из-за того, что вершина первого элемента сползла к низу второго – это проблема выравнивания. Решить ее очень легко, есть целых два пути:

1. overflow: hidden;
2. vertical-align: middle (или top, или bottom, если вы понимаете, как это работает).

overflow: hidden

Это свойство можно добавить всем строчно-блочным элементам в ряду или только тому, который вызвал проблему:

vertical-align: middle

В этом решении вместо overflow используется vertical-align . Тип выравнивания может быть любым: top, middle, bottom.

Если использовать top для элементов с разной высотой, то результат будет следующий:

С другими значениями, вы можете поэкспериментировать самостоятельно.

Если вы не понимаете, как работает вертикальное выравнивание, просто используйте вместо него overflow: hidden .

А мы попробуем выровнять блоки в примере:

Плавающие элементы не имеют высоты?

Это одна из самых раздражающих проблем CSS.

Допустим, у вас есть 2 заголовка, вы устанавливаете одному float: left , и внезапно второй прилипает к верху сайта перед ним, как будто в разметке он идет первым.

Или например, вы устанавливаете float обоим заголовкам, одному – влево, а другому &ndahs; вправо. Тогда элемент, идущий после них, поднимется вверху.

Left Text
 
Right Text
 

Существует 3 возможных решения для этой проблемы:

oveflow: hidden

Нужно обернуть плавающие элементы в родительский контейнер и уже для него установить overflow: hidden .

display: inline-block

Решение похоже на предыдущее, только вместо overflow: hidden родительскому элементу добавляется display: inline-block .

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

Чтобы все работало, вам нужно вычислить и установить новую ширину для родителя. Это похоже на фокус: нужно найти текущую ширину родителя и прибавить к ней текущую ширину плавающего элемента. Теперь второй заголовок окажется рядом с первым.

На самом деле тут все можно объяснить. Раньше контент второго заголовка просто не мог поместиться рядом с первым, потому что инлайн-блочный родитель имел ширину, равную максимальному непереносимому контенту. Когда мы искусственно установили ему ширину, позволяющую вместить оба элемента, неплавающий блок смог растянуться на всю ширину, а его контент уместился даже сдвинувшись относительно плавающего элемента.

Сложно, непонятно и сбивает с толку? Да, есть немного. На самом деле, вам не следует использовать это решение, так как оно совершенно немасштабируемо. Если размеры блоков могут меняться (например, при увеличении шрифта), оно не подходит.

Поэтому пойдем более простым путем и сделаем второй заголовок строчно-блочным либо также плавающим.

Не забудьте использовать вертикальное выравнивание.

 
Left Text
 
Right Text
 
 

Стили с вертикальным выравниванием:

body < background: #ccc; >#wrapper < background: white; display: inline-block; vertical-align: top; >#left < float: left; >#right < float: right; >img

А этот пример без выравнивания:

Margin-top не работает?

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

Эта проблема известна как схлопывание полей.

Представим, что один элемент расположен внутри другого. Если назначить margin-top внутреннему блоку, то он появится у внешнего, а отступ потомка от родителя не изменится.

Есть целых 6 решений этой проблемы (но не все из них хороши).

• display: inline-block для дочернего элемента;
• display: inline-block для родительского элемента;
• overflow: hidden для родительского элемента;
• position: absolute для родительского элемента;
• установка прозрачной рамки для родителя;
• установка верхнего паддинга для родителя (можно использовать очень маленькие значения, десятые доли пикселя).

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

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

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

После применения любого из этих способов результат будет такой:

Вот с такими проблемами часто сталкиваются начинающие веб-разработчики. Надеюсь, статья была полезной.

Источник

Div Container CSS не применяется… Новичок

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

Я очень плохо объясняю этот банкомат!

Заранее спасибо (извините за то, что вы новичок / noob / n00b)

 
 
Hello we are,
 
Test 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie, augue vitae interdum rutrum, quam.
 
 

2 ответа

Ваш код действительно работает для меня, поэтому я бы посоветовал вам убедиться, что ваша css-ссылка верна.

Во многих инструментах разработчика вы можете нажать ctrl + щелкнуть ссылку css в HTML-файле, и тогда вы должны будете перенаправлены на css-файл. Если вас направляют к неопределенному файлу или вас просят создать указанный файл css, вы точно знаете, что путь к файлу в вашем html-документе неверен.

Примечание: css-ссылка находится в заголовке html-документа и выглядит так:

Или если ваш css находится в том же каталоге / папке, что и ваш html, будет выглядеть примерно так:

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

Источник

Контейнер CSS / фон не отображается; Остальные макетные работы

Здесь моя проблема, и я сделаю все возможное, чтобы быть ясным. here— У меня есть простой сайт, выложенный в полном CSS, используя внешнюю таблицу стилей. У меня есть основной контейнер, содержащий все элементы для контента веб-сайта; тем не менее, все они работают, за исключением тех, которые содержат фактический текст страницы и businessbox . Прямо сейчас он показывает цвет фона основного контейнера (зеленый), а не тот, который должен быть (белый). Я уверен, что это что-то простое, что я забыл и, вероятно, ударился бы позже, но подумал, что попрошу вторую пару глаз. Вот что я получаю и как он должен выглядеть. Если у меня возникнут проблемы с этим контейнером, мы надеемся, что программирование трех вертикальных столбцов не будет проблемой! СКРИНШОТ: Моя таблица стилей (style.css):

@charset "UTF-8"; /* CSS Document */ body < background: #88b488; margin: 3%; font-family: Arial, Helvetica, sans-serif; >#container < background: #006200; width: 1020px; margin: 0 auto; >#header < background-image: url(img/BS_header.jpg); background-repeat: no-repeat; background-position:center; width: 1020px; height: 322px; > #menu < background: #25235b; width: 100%; z-index: 2; >#menu ul, #menu ul ul < list-style-type: none; padding: 0; margin: 0; float: right; margin-top: 15px; margin-right: 5px; >#menu ul li < padding: 5px; position: relative; float: left; >#menu ul a:link, #menu ul a:visited < display: inline-block; color: #ffffff; width: 90px; padding: 5px; text-decoration: none; font-size: 12px; font-weight: bold; text-align: center; >#menu ul a:hover, #menu ul a:active < background: #006100; >#menu ul ul < position: absolute; margin-top: -1px; right: 0px; white-space: nowrap; visibility: hidden; >#menu ul li:hover ul li < visibility: visible; color: #ffffff; background-color: #afafaf; padding: 0px; > #cbox < width: 1020px; background-color: #ffffff; background-image:url(img/content_grad.jpg); background-repeat: repeat-x; >#businessbox < background-color: #006200; width: 620px; height: auto; border-top: 3px solid #afafaf; margin-top: 30px; padding: 10px; margin: 30px auto 0px; >.businesstitle < text-align:center; font-size: 20px; color: #ffffff; text-transform: uppercase; font-style:italic; >.businesstext < color: #ffffff; font-size: 14px; >#footer

  
Home
  
About Us
  
Hot Deals
  
Sign Up!
  
Resources

  
Events



Our BUSINESS OF THE MONTH:

You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.
2013 © Buy Local

Источник