Правка меню и разбор полётов с позиционированием объектов

Julius_Alm · October 13, 2015

Добрый день, решил поучиться верстке и натолкнулся на некоторые грабли, гугл не помогает, ну или я не правильно гуглю.

Код в спойлере

<html><head><meta http-equiv="Content-Type"/><title> Index html </title><!-- CSS --><style type="text/css">body{	position:relative;	margin:0;	padding:0;	background: green; /*Цвет фона body*/}.div_block_top{	position:fixed;	height:100px;	width:100%;    background: RGB(41,36,255); /* Цвет фона */}.logo{	position:fixed;	width:100%;	height:80px;	background: url(./bg/logo_up.jpg) no-repeat;	top: 10px;	left:10px;}.menu_top{	text-align: right;	position:fixed;	left:50%;	top:2%;}.navigation {	list-style: none; /* Отключение отображения маркеров. */}.navigation li {	float: left; /* Выстраивание элементов списка в один ряд. */	margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */	font-family: Verdana, Arial, Helvetica, sans-serif; /* Указание типа шрифта. */	font-size: 14px; /* Размер текста в ссылках. */}.navigation li a {	display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */	padding: 15px 20px;  /* Внутри блочные отступы. */	background: #0db5b5; /* Цвет блоков меню. */	color: #3f3f3f; /* Цвет текста в блоках меню. */	text-decoration: none; /* Устранение подчёркивания ссылок. */}.navigation li a:hover {	background: #92d3d3; /* Цвет блока при наведении курсора. */	color: red;  /* Цвет текста при наведении курсора. */}.content{	position:relative;	top:20%;}</style><!-- END CSS --></head><body><!-- Начало топа --><div class=div_block_top><div class=logo></div><div class=menu_top><ul class="navigation">    <li><a href="#" target="_blank">Новости</a></li>   <li><a href="#" target="_blank">Статьи</a></li>   <li><a href="#" target="_blank">Шаблоны</a></li>   <li><a href="#" target="_blank">Книги</a></li>   <li><a href="#" target="_blank">Книги1</a></li>   <li><a href="#" target="_blank">Книги2</a></li>   <li><a href="#" target="_blank">Книги3</a></li></ul></div></div></body></html>

Первый вопрос: как настроить меню что бы отступы сами выравнивались?Ибо самому сидеть и подбирать в процентах как то не впечатляет. Пытался сделать что бы отступы были:

top:50%;

bottom:50%;

left:50%;

right:50%;

Не работает, у меня div начинает сдвигаться в разные стороны.

Второй вопрос: body я назначил relative что значит свободное позиционирование если я правильно понимаю. У верхних div-ов стоит статический мне нужно что бы всегда были сверху, то есть при прокрутке сайта они висели сверху. Но если я добавляю после <div class=content> и начинаю его сдвигать под <div class=div_block_top> то почему то этот весь блок начинает сдвигаться, и в почему я не понимаю.

Вот примерно как выглядит вёрстка в конце, красным выделены div-ы.

Или я что то не так позиционирую, ну или я не понимаю каких то вещей в позиционировании.

В моём понимании есть body это вся свободная область работы, ему присваиваем relative для того что бы можно было настроить будущие внутренние div-ы.

Внутренним div-ам уже присваиваем значения static или relative или absolute. Если я не прав поправьте.

Sign In

Правка меню и разбор полётов с позиционированием объектов

Question

Julius_Alm

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information