#html #css
#HTML #CSS
Вопрос:
У меня есть домашняя страница, и она отображается так, как должна — ширина составляет 100%, а высота-100%. В нем есть меню (iframe). Из этого меню я перейду на другие страницы (с тем же меню). Но когда я открываю другую страницу из меню, она не имеет 100% ширины и высоты, но структура страницы та же, и стили те же. Как я могу это исправить? Код ПФА index.html:
@import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;family=Raleway:wght@500amp;family=Source Sans Proamp;display=swap'); html, body { margin: 0; padding: 0; height: 100%; width: 100%; } .background { display: table; background-color: #01579B; box-shadow: inset 0 0 10px; background-size: cover; } .container { width: 70%; height: auto; } iframe.header { border: none; width: 100%; height: 180px; margin-left: 10px; } iframe.menu { border: none; width: 100%; height: 100px; margin-left: 10px; } .logo-picture { height: 150px; width: 150px; margin-top: 12px; } .logo-card { display: table; background-color: white; border-radius: 7px; box-shadow: 0 0 10px; margin: 10px; margin-top: 20px; background-image: url("img/logo-background.jpg"); height: 150px; width: calc(100% - 40px); } .menu { display: flex; justify-content: space-around; } ul.menu gt; li { list-style: none; padding: 0; margin: 0; } ul.menu { padding: 0; margin: 20px 0; font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 30px; } .logo-link { display: inline; } .logo-title { display: table-cell; font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 45px; color: white; text-align: center; vertical-align: middle; width: 100%; height: 100%; } .menu-card { background-color: #558B2F; height: 70px; display: table; border-radius: 7px; box-shadow: 0 0 10px; margin: 10px; width: calc(100% - 40px); } .logo-title gt; a { color: white; text-decoration: none; } .menu a { color: white; text-decoration: none; } .menu a:hover { color: #0D47A1; text-decoration: none; } .content-card { background-color: white; border-radius: 7px; box-shadow: 0 0 10px; margin: 10px; width: calc(100% - 80px); font-family: 'Source Sans Pro', sans-serif; font-weight: 500; padding: 20px; text-align: left; } .content-card h1 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 45px; margin: 0; text-align: center; margin-bottom: 20px; } .content-card img { width: 100%; } .content-card .bold { font-weight: 900; } .content-card .italic { font-style: italic; } .content-card gt; div { margin-top: 10px; margin-bottom: 10px; } .content-card h2 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 35px; margin-top: 20px; text-align: center; margin-bottom: 20px; } .quote { border-left-width: 3px; border-left-color: #FB8C00; border-left-style: solid; padding: 10px; }
lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset="utf-8"gt; lt;titlegt;Board games - домашняя страницаlt;/titlegt; lt;meta name="description" content="Сайт посвящен настольным играм"gt; lt;link rel="icon" href="img/icon.png"gt; lt;link rel="stylesheet" href="styles.css"gt; lt;/headgt; lt;bodygt; lt;div class="background" align="center"gt; lt;div class="container"gt; lt;iframe scrolling="no" src="src/header.html" class="header"gt;lt;/iframegt; lt;iframe scrolling="no" src="src/menu.html" class="menu"gt;lt;/iframegt; lt;div class="content-card"gt; lt;h1gt;Зачем взрослые люди играют в настолки?lt;/h1gt; lt;img src="img/dangeonsAndDragons.jpg" /gt; lt;div class="bold italic"gt;Спойлер: потому что это весело.lt;/divgt; lt;div class="italic"gt;Настольные игры с начала своей истории были предметом культа, и в наши дни остаются популярным развлечением. И вовсе не только для детей. Говорим о настольных играх, где повышаются ставки, накаляются нервы, а победителю достаются все сокровища мира. С чего начать?lt;/divgt; lt;h2gt;Заглянуть в коробкуlt;/h2gt; lt;divgt;Первое, что нужно знать о настольных играх — для них совершенно не обязателен стол. Скорее всего, первые настольные игры появились даже раньше, чем столы: в них можно было играть на земле и на любой относительно ровной поверхности. Это были игры с костями, глиняными табличками, деревянными и каменными фигурками, которые подбрасывались или выкладывались в определенном порядке. В древних цивилизациях Южной Америки, например, были распространены настольные игры-гонки, а славяне играли в «бирюльки» — так называлась целая группа игр с использованием мелких предметов сложной формы. Задача игроков состояла в том, чтобы «выудить» как можно больше фигур с помощью тонкого крючка.lt;/divgt; lt;div class="quote"gt;Для настольных игр не нужен тяжелый инвентарь, оборудованная площадка и в большинстве случаев игрокам даже не понадобится двигаться с места. Хорошая настольная игра может сдружить рабочий коллектив, спасти от скуки в долгом путешествии или поднять настроение, когда кажется, что лето в этом году никогда не начнется.lt;/divgt; lt;divgt;Тех, кому кажется, что настолки — развлечение для детей, разубедит история. Поскольку в античных настолках большую роль играл счастливый случай, древние люди придерживались принципа «игры — детям не игрушка». Многие игры имели сакральный, религиозный смысл, а их исход считался предзнаменованием. Определенным фигурам или комбинациям приписывались различные истолкования, и далеко не каждый имел право прикасаться к ящику, где хранился игровой набор. В наши дни культ игры продолжается.lt;/divgt; lt;h2gt;Создать собственный мирlt;/h2gt; lt;divgt;Бум на настольные ролевые игры начался в 1980-х и продолжается по сей день. Сериал «Очень странные дела», который весь собран из отсылок к культуре 1980-х, начинается со сцены, где четверо школьников играют в знаменитую настольную игру Dungeons and Dragons.lt;/divgt; lt;img src="img/dangeonsAndDragons2.jpg" /gt; lt;divgt;Ролевые настольные игры созданы на основе одноименных компьютерных игр и вселенных RPG, а также книг. Партии в них могут длиться месяцами, а кроме поля и фигур, в игре используются листы персонажа. В этих листах игроки указывают свои характеристики — уровень здоровья, магические и боевые способности, снаряжение, дополнительные бонусы, которые изменяются по ходу игры. Эти изменения определяются бросками костей, а также действиями самих игроков, которые влияют на все происходящее.lt;/divgt; lt;div class="quote"gt;Партии в ролевых настольных играх могут длиться неделями и месяцами. Важную роль в таких играх играет ведущий — «мастер», который описывает игровые ситуации.lt;/divgt; lt;divgt;Среди взрослых увлечение играми выходит на новый уровень, и в первую очередь это определяется экономически. Игровые мастера зарабатывают деньги за проведение модулей. Во многих городах, в том числе и в России, для них существуют курсы существуют школы мастеров. Реквизит тоже обходится недешево: например, цены на миниатюры Warhammer достигают десятков тысяч рублей. Кроме того, их коллекционируют и кастомизируют — навык росписи фигурок для настольной игры требует огромной усидчивости и внимательности к деталям.lt;/divgt; lt;h2gt;Стать манчкином-терминаторомlt;/h2gt; lt;divgt;Над таким серьезным увлечением грех не посмеяться! Так возникла пародийная серия «Манчкин». «Манчкином» в ролевых играх называют игрока, который играет ради процесса и все усилия бросает на «раскачку» и скоростное прохождение. Фраза «я надену все лучшее сразу» — это про них. Они предпочитают амуницию с большим количеством бонусов, смертоносное оружие, а еще убивают всех, кто попадется под руку, чтобы получить как можно больше сокровищ.lt;/divgt; lt;img src="img/munchkin.jpg" /gt; lt;divgt;Именно эта жадность и желание стать самым крутым стали движущей силой игры. За время партии можно превратиться из человека в орка и обратно, умереть сто раз и собрать свое снаряжение заново, попросту стащив его у других героев. Участники собирают карты сокровищ и вступают в схватки с монстрами, чтобы пройти на максимальный уровень. В этом помогают не только свойства карт, но и стратегия самих игроков: они могут обманывать друг друга, устраивать засады и наживаться на чужих победах и поражениях. В игре нет поля, а для того, чтобы складывать карты, можно использовать коробку, поэтому играть в нее можно где угодно, даже в дороге.lt;/divgt; lt;divgt;Первое издание «Манчкина» сосредоточилось на клише из фэнтезийных игр, но с тех пор создатели выпустили дополнения в самых разных стилистиках: здесь есть пираты, супергерои, инопланетяне. Все колоды можно совмещать, поэтому в одной игре радиоактивный эльф может встретиться с зомби-детективом и образовать с ним команду… до тех пор, пока это будет им выгодно.lt;/divgt; lt;h2gt;Не довольствоваться малымlt;/h2gt; lt;divgt;Для тех, кто предпочитает наживаться системно, существуют экономические настольные игры. У них тоже богатая история: в XIX веке печатные настольные игры (в России их называли «картонажные») пришли в педагогику. С их помощью дети осваивали счет и чтение, изучали историю, географию, биологию, также знакомились с важными событиями современности, например, выставками достижений науки и искусства. В 1904 году американка Лиззи Меги придумала игру The Landlord’s Game, которая должна была познакомить детей с важностью труда и основами экономики. Спустя еще 30 лет патент на игру купили предприниматели братья Паркеры, которые превратили ее в известную нам «Монополию».lt;/divgt; lt;img src="img/monopolia.jpg" /gt; lt;divgt;«Монополия» выпускает издания на разную тематику — от «Игры престолов» до «Гарри Поттера». Основа остается классической: квадратная доска, на которой по периметру обозначены «предприятия», кубики, набор карт и фишки. В специальных изданиях фишки всегда особенные — например, в «русской Монополии» есть матрешка и пуанты. Поэтому перед партией в «Монополию» убедитесь в том, что у вас есть достаточно места, чтобы разложить доску, и поверхность достаточно стабильная, чтобы фишки не слетали с игрового поля.lt;/divgt; lt;divgt;Если игровое поле «Монополии» кажется пройденным вдоль и поперек, можно перейти к играм, в которых есть поле генерируется каждый раз заново. К их числу принадлежит «Шакал», игра, которую придумали в России в 1970-х годах. В наборе игры более ста фишек, из которых складывается карта острова сокровищ. После создания острова начинается сбор сокровищ, в котором игрокам волей-неволей придется «шакалить». Все же когда речь идет о наживе, идти к победе придется по головам.lt;/divgt; lt;div class="italic"gt;Такая воинственная обстановка игр на обогащение полезна с точки зрения психологии коллектива. Настольная игра на работе покажет, как сотрудники реагируют на стрессовые ситуации. Партия в дружеской компании — это способ «спустить пар» и побыть злобным манчкином. Тем более для этого не придется даже вставать с дивана.lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;
PFA code of another page:
@import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;family=Raleway:wght@500amp;family=Source Sans Proamp;display=swap'); html, body { margin: 0; padding: 0; height: 100%; width: 100%; } .background { display: table; background-color: #01579B; box-shadow: inset 0 0 10px; background-size: cover; } .container { width: 70%; height: auto; } iframe.header { border: none; width: 100%; height: 180px; margin-left: 10px; } iframe.menu { border: none; width: 100%; height: 100px; margin-left: 10px; } .logo-picture { height: 150px; width: 150px; margin-top: 12px; } .logo-card { display: table; background-color: white; border-radius: 7px; box-shadow: 0 0 10px; margin: 10px; margin-top: 20px; background-image: url("img/logo-background.jpg"); height: 150px; width: calc(100% - 40px); } .menu { display: flex; justify-content: space-around; } ul.menu gt; li { list-style: none; padding: 0; margin: 0; } ul.menu { padding: 0; margin: 20px 0; font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 30px; } .logo-link { display: inline; } .logo-title { display: table-cell; font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 45px; color: white; text-align: center; vertical-align: middle; width: 100%; height: 100%; } .menu-card { background-color: #558B2F; height: 70px; display: table; border-radius: 7px; box-shadow: 0 0 10px; margin: 10px; width: calc(100% - 40px); } .logo-title gt; a { color: white; text-decoration: none; } .menu a { color: white; text-decoration: none; } .menu a:hover { color: #0D47A1; text-decoration: none; } .content-card { background-color: white; border-radius: 7px; box-shadow: 0 0 10px; margin: 10px; width: calc(100% - 80px); font-family: 'Source Sans Pro', sans-serif; font-weight: 500; padding: 20px; text-align: left; } .content-card h1 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 45px; margin: 0; text-align: center; margin-bottom: 20px; } .content-card img { width: 100%; } .content-card .bold { font-weight: 900; } .content-card .italic { font-style: italic; } .content-card gt; div { margin-top: 10px; margin-bottom: 10px; } .content-card h2 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 35px; margin-top: 20px; text-align: center; margin-bottom: 20px; } .quote { border-left-width: 3px; border-left-color: #FB8C00; border-left-style: solid; padding: 10px; }
lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset="utf-8"gt; lt;titlegt;Board games - Топ настольных игрlt;/titlegt; lt;meta name="description" content="Сайт посвящен настольным играм"gt; lt;link rel="icon" href="../img/icon.png"gt; lt;link rel="stylesheet" href="../styles.css"gt; lt;/headgt; lt;bodygt; lt;div class="background" align="center"gt; lt;div class="container"gt; lt;iframe scrolling="no" src="header.html" class="header"gt;lt;/iframegt; lt;iframe scrolling="no" src="menu.html" class="menu"gt;lt;/iframegt; lt;div class="content-card"gt; lt;divgt;Раз два триlt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;
Комментарии:
1. На первой странице есть
lt;link rel="stylesheet" href="styles.css"gt;
, а на второй странице естьlt;link rel="stylesheet" href="../styles.css"gt;
. Находятся ли первая и вторая страницы в одном каталоге?2. @RobMoll нет, вторая страница находится в каталоге «src», а первая-index.html, расположенный в корневом каталоге
3. Почему вы используете
.background {display: table;}
?4. @Azu, потому что в других случаях свойства отображения фон не покрывал всю страницу (как вы можете видеть, там много контента). Дисплей: таблица была первым рабочим решением.
5. Ольга, при использовании
display:table
div обернет внутреннее содержимое , так что контейнер с классом.background
обернет внутреннее содержимое.