#html #css
#HTML #css
Вопрос:
Пожалуйста, учтите, что я новичок в CSS!
Я пытаюсь создать простую веб-страницу, имеющую некоторые свойства CSS, но проблема в том, что моя веб-страница в порядке в полностью развернутом окне, но дизайн ломается, когда я пытаюсь изменить размер окна браузера.
Источник веб-страницы :
<html>
<head>
<title>Registration From</title>
<style type="text/css">
body
{
background-color:#d2d2ff;
margin:0;
padding:0;
width:100%;
}
header
{
margin:0px;
padding:0px;
height:90px;
background-color:#a0b7e0;
box-shadow:0px 0px 90px #00000f;
}
footer
{
margin-top:40%;
height:40px;
background-color:#a0b7e0;
box-shadow:0px 0px 30px #00000f;
position:relative;
}
.text_h
{
text-align:center;
color:white;
font-size:65px;
text-shadow:2px 2px 1px #555555;
}
.text_f
{
text-align:center;
color:#ffffff;
font-size:15px;
text-shadow:2px 2px 1px #555555;
padding-top:0.7%;
}
cont1
{
height:43%;
width:12%;
border:1px solid black;
background-color:#c9c9c9;
float:left;
margin-top:2%;
margin-left:1%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
}
cont2
{
height:73%;
width:84%;
border:1px solid black;
background-color:#e2e2e2;
float:left;
margin-top:2%;
margin-left:2%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
vertical-align: top;
}
.ql
{
text-align:left;
color:#829fd7;
font-size:20px;
font-weight:bold;
text-shadow:0px 0px 1px #ffffff;
padding-left:4%;
}
.list
{
color:#1f1f1f;
font-size:18px;
text-shadow:0px 1px 1px #555555;
list-style-type: circle;
}
a
{
text-decoration:none;
}
a:hover
{
color:white;
font-weight:bold;
padding-left:4%;
}
</style>
</head>
<body>
<header>
<div class="text_h">Basic Homepage</div>
</header>
<cont1>
<p class="ql">Quick Links</p>
<ul class="list">
<li><a href="#home">Homepage</a></li><br>
<li><a href="#contact">Contact Us</a></li><br>
<li><a href="#abut">About Us</a></li><br>
<li><a href="#msg">Message</a></li><br>
<li><a href="#reg">Registration</a></li>
</ul>
</cont1>
<cont2></cont2>
<footer>
<div class="text_f">amp;copy; 2014 Neeraj Singh</div>
</footer>
</body>
</html>
Может кто-нибудь, пожалуйста, подсказать мне правильный способ сделать это?
Комментарии:
1. Будет лучше, если вы добавите полный html и css. В противном случае это будет трудно понять, вы также можете предоставить ссылку jsFiddle.
2. Я предоставил полный исходный код в своем вопросе!
3. Вам необходимо определить doctype (
<!DOCTYPE html>), а также meta для области просмотра (если вы хотите поддерживать медиа-запросы). Кроме того, если вы тестируете в IE, по умолчанию будет установлен режим quirks без<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />.
Ответ №1:
Итак, я вижу пару проблем с вашим кодом, которые я бы обязательно исправил:
1) <cont1> и <cont2> не являются допустимыми тегами HTML. Если вы хотите различать два одинаковых тега, используйте классы или идентификаторы.
2) В верхней части вашего документа отсутствуют некоторые ключевые элементы, которые обеспечивают корректный рендеринг страницы. Замените <html> на <!DOCTYPE html> и добавьте следующие мета-теги перед вашим <title> тегом: <meta charset='utf-8' />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Что касается вашего вопроса, это зависит от вашего определения того, когда дизайн «ломается». Если вы говорите о переносе слов в заголовке, вы можете применить a mid-width к своему css, что заставит страницу прокручиваться, когда экран становится слишком маленьким. Чтобы избежать проблем с этим в будущем, вы можете поместить min-width html body элементы и на странице. Например: html, body { min-width:800px;} . Надеюсь, это поможет вам начать!
Комментарии:
1. Я быстро внес некоторые изменения, о которых я говорил (все, кроме мета-тегов, которые вам придется вводить самостоятельно).. jsfiddle.net/V973u
Ответ №2:
Что вам нужно будет сделать, так это использовать медиа-запросы CSS для применения стиля в точках останова определенного размера экрана. Должно выглядеть так:
@экран мультимедиа и (минимальная ширина: ### пикселей) и (максимальная ширина: ### пикселей) {
/ * введите стили, которые применяются здесь */
}
Используйте их для разных размеров экрана. Я использую один для мобильных телефонов и один для планшетов. Они могут располагаться либо в верхней, либо в нижней части вашей таблицы стилей. Но для удобства чтения держите их вместе.
Комментарии:
1. Вы также можете использовать @media для определения конкретных стилей для типов устройств и стилей печати. Это очень мощный инструмент.
2. Я думаю, что ваш ответ связан с проблемами отображения на других устройствах, я говорю о проблеме изменения размера окна браузера!
3. медиа-запросы, использующие размер экрана, проверяют количество пикселей в окне браузера. Если вы измените размер окна вашего браузера, вы уменьшите ширину, что приведет к уменьшению количества пикселей. Это одна из важных частей создания адаптивного веб-сайта. Попробуйте сделать это, используя что-то простое, например, body { background-color: red;} внутри медиа-запроса с максимальной шириной 768 пикселей, затем измените размер окна браузера. Как только вы опуститесь до менее чем 768 пикселей, экран станет красным.
4. Можете ли вы опубликовать мой код со своими исправлениями, если это возможно?
5. Я могу сделать это, когда вернусь домой сегодня вечером, но это займет несколько часов.