Моя проблема в том, что когда я перетаскиваю мою веб-страницу с моего Macbook на 13 дюймов на свой 24-дюймовый монитор Samsung, текст ... в этом случае «Экспертиза» меняет свое положение. Текст перемещается вверх, где, когда навигационная панель остается на месте, успешно адаптируется к изменению монитора.Как сохранить текст на месте независимо от размера монитора?
Я знаю, что это простой случай дефекта дизайна. Я имею в виду, что я не использовал поля на этой веб-странице. Хотя я хочу иметь полноэкранный фон, который занимает половину верхней части страницы, хотя текст приспосабливается к размеру экрана. Я не говорю о создании веб-страницы, которая работает только на телефонах и планшетах. Просто веб-страница, которая будет работать на мониторах разных размеров, 13 дюймов, 25 дюймов и т. Д. ... Я надеюсь, что кто-то может отредактировать мой код, чтобы я мог видеть, что делать!
Я хочу, чтобы мой сайт выглядел хорошо на мониторах разных размеров, и я не совсем уверен, что я делаю неправильно. Я использовал положение: исправлено; для панели навигации, так что, когда я прокручиваю вниз, она следует за страницей, хотя для текста ... «экспертиза» я использую верхнюю, нижнюю, правую, левую и т. д. позиции. Я понятия не имею, как выровнять текст, где я хочу, и работать ли он на мониторах разных размеров. По существу, предотвращайте плавное перемещение текста и т. Д. ... Я хочу, чтобы текст изменялся соответствующим образом, хотя и не был неуместен.
Я отправлю свой код ниже, но хотел бы поблагодарить всех вас за ваше время! Прошу прощения, если я не совсем понимаю, с моим вопросом, поскольку я даже не уверен, что такое правильная терминология для этого.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aesthetic Media</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="styles.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<div class="logo">
<ul>
<li><a href="#">AESTHETIC</a></li>
</ul>
</div> <!--logo-->
<div class="main-nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!--main-nav-->
</div> <!--nav-->
</div> <!--header-->
<div class="main-wrapper"> <img src="#" class="scale-image"/>
</div> <!--MAIN IMAGE-->
<div class="main-text">
<h1>We are Aesthetic</h1>
<h2>A Visual Agency From Niagara</h2>
</div>
<div class="content">
<div class="text-2">
<h2>Expertise</h2>
</div>
</div>
<div class="footer"></div>
</div> <!--container-->
</body>
</html>
CSS
* {
margin: 0 auto;
padding: 0;
}
body {
}
.container {
}
.header {
}
.nav .logo {
position: fixed;
top: 22px;
left: 25px;
z-index: 1;
}
.nav .logo ul {
overflow: visible;
list-style-type: none;
}
.nav .logo ul li {
display: inline-block;
}
.nav .logo li a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}
.nav .main-nav {
position: fixed;
top: 25px;
right: 10px;
letter-spacing: .2em;
z-index: 1;
}
.nav .main-nav ul {
overflow: visible;
list-style-type: none;
}
.nav .main-nav li {
height: 13px;
padding: 0 17px;
display: inline-block;
}
.nav .main-nav li:last-child {
border-right: none;
}
.nav .main-nav li a {
font-weight: 400;
text-decoration: none;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
.nav .main-nav li a:hover {
background-color: rgba(50, 50, 50, 0.4);
padding: 3px 10px 3px 13px;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-transition: all .3s ease;
-webkit-transition: all .3s ease;
-webkit-font-smoothing: antialiased;
}
.main-text {
margin: auto;
height: auto;
position: absolute;
top: 230px;
left: 0;
bottom: 0;
right: 0;
}
.main-text h1 {
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
.main-text h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
.main-wrapper {
position: absolute;
}
.scale-image {
width: 100%;
}
.content {
width: auto;
height: auto;
}
.content .text-2 {
color: #CCC;
margin: auto;
position: relative;
top: 600px;
left: 0;
bottom: 0;
right: 0;
}
.content .text-2 h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
-webkit-font-smoothing: antialiased;
}
Я также ссылка на codepen, так что вы можете увидеть, что я говорю о том, в отношении к 'экспертизе' текст перемещению вокруг.
http://codepen.io/anon/pen/zxVbwb
Спасибо!
Как использовать процентные значения вместо фиксированных пикселей? – hola
Есть ли какие-либо веб-страницы, на которые вы можете отправить меня? Я хочу, чтобы изображение в качестве фона было отделено от всего содержимого, и оно занимало всю ширину веб-страницы, поэтому я не могу поместить ширину, скажем, 1000 в контейнере веб-сайта, не затрагивая изображение. Я не знаю, как использовать проценты:/ –
Вам нужно будет работать с процентами и понимать принципы относительной и абсолютной позиции! Если у родителя что-то есть позиция Относительная, у ребенка может быть положение абсолютное. Это позволит разместить ребенка точно там, где вы хотите, чтобы он соответствовал родительскому. И снова, чтобы разместить его где угодно, используйте проценты, так как это применит ту же позицию для всех размеров экрана, независимо от разрешения. Ссылка, чтобы лучше понять позиционирование: http://www.barelyfitz.com/screencast/html-training/css/positioning/ Надеюсь, это поможет! – Brain