Веб — при изменении размера / увеличения все движется
Я пытаюсь создать свой новый веб, используя технологию дизайна материалов с помощью полимера, и я сделал фиксированный заголовок, который содержит кнопку, H1, изображение и текст. Когда вы изменяете размер страницы или увеличиваете масштаб, все винты и все, что находится в этом заголовке, просто перемещается. У меня также есть «скрытая» боковая панель, которая переходит с левой стороны при нажатии на кнопку. Когда я увеличиваю изображение, оно приходит в сеть само по себе. Помогите пожалуйста: X
HTML&Код PHP:
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>RostaCZE</title>
<link rel="stylesheet" type="text/css" href="css.php">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-ripple/paper-ripple.html">
<script src="jquery-2.1.3.js">
</script>
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<script>
$(document).ready(function(){
var width=$('.sidebar').width();
$('.sidebar').css('left',-width);
var rig=$('.sidebar').position().left;
$(".button").click(function() {
var rig=$('.sidebar').position().left;
if(rig == 0 )
{
$('.sidebar').animate({left:-width}, 400);
}
else
{
$('.sidebar').animate({left:'0px'}, 400);
}
});
});
</script>
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
<?php
$_SESSION['dark_blue'] = '#1E88E5';
$_SESSION['light_blue'] = '#E3F2FD';
$_SESSION['grey'] = '#BDBDBD';
?>
</head>
<body>
<header>
<paper-ripple id="header_ripple"></paper-ripple>
<div class="button raised">
<div class="center" fit>MENU</div>
<paper-ripple fit></paper-ripple>
</div>
<div class="time">
<?php
$today = date("Y-m-d H:i:s");
echo "$today";
?>
</div>
<div class="name">
<img src="face.png" alt="me"/>
<h1>Rostislav Danko</h1>
</div>
</header>
<div class="sidebar">
</div>
<div id="main">
</div>
<footer>
</footer>
</body>
</html>
<style>
</style>
Код CSS (некоторые цвета CSS не заполнены, я сделал это через переменные PHP)
<?php
session_start();
?>
<?php header("Content-type: text/css; charset: UTF-8"); ?>
html, body {
position: relative;
margin: 0px;
height: 100%;
}
header {
position: fixed;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;
height: 10%;
width: 100%;
-webkit-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
z-index: 20;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 10;
}
.name {
position: relative;
margin-left: 4%;
margin-top: -5%;
}
.name img {
position: relative;
height: 150%;
width: 7%;
margin-top: -3.8%;
margin-left: 30%;
}
.time {
position: relative;
margin-left: 90%;
margin-top: 1.5%;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
font-size: 20px;
}
h1 {
position: relative;
margin-top: -5%;
text-align: center;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
}
#main {
float: left;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
width: 100%;
height: 110%;
z-index: 10;
}
.sidebar {
position: fixed;
height: 100%;
width: 20%;
margin-top: 7.1%;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;;
z-index: 30;
border-top: solid 1px <?php echo $_SESSION["light_blue"]; ?>;
}
#header_ripple {
position: absolute;
color: #E3F2FD;
width: 100%;
height: 100%;
z-index: 10;
}
.button {
display: inline-block;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
z-index: 100;
position: absolute;
margin-left: 5%;
margin-top: 2%;
text-align: center;
cursor: pointer;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
font-color: <?php echo $_SESSION["grey"]; ?>;
}
.button > paper-ripple {
color: <?php echo $_SESSION["dark_blue"]; ?>;
border-radius: 2px;
overflow: hidden;
}
.button.narrow {
width: 60px;
}
.button.raised {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.raised:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …