Это, наверное, очень простой вопрос, но я никогда не занимался вебом ... поэтому у меня проблемы с CSS.
Я пытаюсь оформить свое резюме с использованием CSS и HTML5. Я создал небольшой класс для моего main aside , который я намерен использовать в качестве места для размещения на странице о игровой процесс новой игры или ссылки на игровых персонажей и т. д.
Я также хотел в конечном итоге повторно использовать элемент aside в других контейнерах, таких как панель навигации, чтобы на каждой странице был специальный элемент, который явно отделен от других навигационных ссылок.
Однако, пока последняя часть работает, первая не работает. Я думаю, что применение класса rightpane к моему элементу aside сбрасывает позицию влево, когда я думал, что будет применено правило float: right , а затем позиционируется абсолютно на 20% сверху.
- Правильно ли мое понимание?
- Если я добавлю правило: 5% к стилю элементов в стороне, то моя коробка будет отображаться так, как я хочу, но это заранее определенная позиция по сравнению с тем, чтобы позволить ей плавать справа, что кажется плохим?
Так что мне делать?
aside {
text-align: right;
float: right;
}
.rightpane {
text-align: right;
overflow: scroll;
visibility: visible;
position: absolute;
max-width: 20%;
top: 20%;
}
Я использую это в коде, который выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../Presentation/CSS/main.css" />
<title>
Minus and Brains, Inc.
</title>
</head>
<body>
<nav id="navBar" class="center">
<ul>
<li>
<a href="wtf.html">WTF</a>
</li>
<li>
<a href="Cheese.html">Cheese</a>
</li>
<aside>
<li>
<a href="supertramp.html">Breakfast in America</a>
</aside>
</li>
</ul>
</nav>
<article>
<h2>Plans to conquer the world</h2><time datetime=”2011-09-09T19:31:45+01:00″>9 septembre 2011</time>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</article>
<aside class="rightpane">09/09/2011<br/>Some brilliant news: Brains finally takes over World!</aside>
</body>
</html>