Проблема новичка с <div>

Question

Проблема новичка с <div>

0

Я делаю сайт с заголовком в поле div в верхней части страницы. Проблема в том, что когда я помещаю заголовок в поле, он не остается в коробке

<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
 Welcome To A Website
 </h1>
 </div>

Weirdest 16 апр. 2014, в 01:36

Источник

0

Что ты имеешь в виду под "это не остается внутри коробки"? Кажется, работает нормально для меня: jsfiddle.net/ya2Qg .
Felix Kling 15 апр. 2014, в 23:39
0

Похоже, что <h1> выше, чем <div> . Поскольку вы установили overflow:hidden , <div> скрывает переполненный контент.
showdev 15 апр. 2014, в 23:40

Теги:

html

css

4 ответа

0

Потому что вы указали определенную высоту для окна в стиле. Попробуйте удалить "height: 40px;" часть. Теперь стиль div выглядит так:

style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;"

скрипка

Nick Rameau 15 апр. 2014, в 21:16

0

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

<div style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
 Welcome To A Website
</h1>
</div>

RylandAlmanza 15 апр. 2014, в 20:59

0

Вы можете установить границу вашего h1 0, также обратите внимание, что вы должны поместить стили в некоторый CSS файл или прямо внутри страницы (между тегами <style>):

div {
  width:1000px;
  height:40px;
  background:grey;
  border:3px solid;
  border-radius:10px;
  opacity:0.85;
  overflow:hidden;
  line-height:40px;
}
div h1 {
  margin:0;
}

Рабочая демонстрация.

King King 15 апр. 2014, в 20:51

Ещё вопросы

Что ты имеешь в виду под "это не остается внутри коробки"? Кажется, работает нормально для меня: jsfiddle.net/ya2Qg .
Похоже, что <h1> выше, чем <div> . Поскольку вы установили overflow:hidden , <div> скрывает переполненный контент.

Bruno Luiz · Accepted Answer · 2014-04-15T22-32-00.000Z

Когда вы создаете HTML файл, каждый браузер интерпретирует элементы на своем пути. Например: некоторые браузеры имеют дополнительную конфигурацию поля в <p> или какое-то другое свойство line-height. Из-за этого, как правило, разработчики используют Reset CSS (пример: http://meyerweb.com/eric/tools/css/reset/). Это уменьшает несоответствия браузера в таких вещах, как высоты строк по умолчанию, поля и размеры шрифтов заголовков и т.д.

В вашем случае h1 по умолчанию имеет некоторые конфиги, которые заставляют его выходить из поля div (margin и padding, как я проверял). Вы можете решить эту проблему, используя: margin: 0; заполнение: 0; в элементе <h1>. Мое предложение для будущих проектов: используйте Reset CSS, и у вас будет больше контроля над такими вещами.

Другое предложение: используйте CSS файл для организации ваших собственных стилей. Встраивание стиля не очень хорошо, когда у вас есть обычная вещь для изменения и для этого нужно сделать файл по файлу. С помощью CSS вы меняете только файл, и он отражает весь HTML-код, который его использует.

Ну, мое предложение по исправлению CSS:

HTML:

<div>
    <h1>Welcome to a Website </h1>
</div>

CSS:

div {
    /* Make title go to entire screen*/
    width: 100%;
    display: block;

    /* You visual config */
    height:40px;
    background:grey;
    border:3px solid;
    border-radius:10px;
    opacity:0.85;
    overflow:hidden;
    line-height:40px;
}

div h1 {
    margin: 0;
    padding: 0;
    text-align:center;
}

Я использовал ширину: 100%; отображение: блок вместо ширины: 1000 пикселей, потому что я предположил, что вам нужен блок, который занимает 100% ширину экрана. Рабочая демонстрация: http://jsfiddle.net/brunoluiz/NyLAD/

Хорошо, удачи в исследованиях HTML и CSS!