DIV по центру

@Jimmbo · Регистрация: 16.11.2011

Author24 — интернет-сервис помощи студентам

Народ может вы подскажите, это просто ппц уже 2 ой час сижу ломаю голову.
Я создал блок DIV с заглавным текстом, менюшкой и логотипом . ну и переключение языков.

HTML5

<div class="top_menu">
    <div id="lang">
        <a href="#">LV</a><span>|</span>
        <a href="#">RU</a><span>|</span>
        <a href="#">ENG</a>
    </div>
    <a href="../index.php"><img class="logo_top" src="../img/logo.png" alt="something"></a>
    <div id="menu_title">
        <h3>Покупай Продавай<br />
            Лалалалалала</h3>
    </div>
    <ul class="menu">
        <li><a href="../index.php">ГЛАВНАЯ</a></li>
        <li><a href="../index.php?reservation">ГЛАВНАЯ2</a></li>
        <li><a href="#">ГЛАВНАЯ3</a></li>
        <li><a href="#">ГЛАВНАЯ4</a></li>
        <li><a href="#">ГЛАВНАЯ5</a></li>
    </ul>
</div>

Вот CSS файл к этому делу

CSS

body {
    color: #000000;
    font-family: verdana;
    padding:0;
    margin:0;
    background: url("../img/BG.jpg") fixed top no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -khtml-background-size: 100% 100%;
    background-size: 100% 100%;
}
 
.top_menu {
    background-color: rgba(255, 255, 255, 0.64);
    left: 50%;
    width: 470px;
    height: 150px;
    position: absolute;
    margin-left: -225px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
#menu_title h3 {
    font-family:"Century Gothic", Helvetica, sans-serif;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 10%;
}
.logo_top {position: absolute; margin: 6% 0 0 9%; border: 0}
 
#lang {float: right; margin: 12px 12px 0 0; font-size: 10px}
#lang a {
    padding-right: 5px;
    font-family: verdana;
    text-decoration: none;
    font-size: 10px;
    color: black;
}
#lang a:hover { color: white }
#lang span { color: red}
 
.menu {
    height: 26px;
    list-style-type: none;
    margin-top: 40px;
    padding: 0;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.66)
}
.menu li {display: inline}
.menu li a {
    color: black;
    margin-left: 2px;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
}
.menu li a:hover {
    color: whitesmoke;
}

Получается я создаю блок Див который располагается по центру сверху, в нем логотип, заглавный текст и меню которое должно располагаться внизу блока див. И при отдалении колесиком оно остается по центру а фон не изменяется. Все вроде супер, работает. Но как обычно в самом корявом браузере мира как всегда всё не по людски, как вы догадались это Internet Explorer !!! При нажатии на любую ссылку из меню, все элементы блока подпрыгивают на верх, и остаются там. В чем может быть проблема ? Может что то не так написал, помогите буду очень признателен

@Jimmbo · 19.04.2013, 17:38 **[ТС]**

Хочу сделать как то так, но только чтоб фон(картинка) не изменялась при отдаление экрана. и этот блок отдалялся по центру. Помогите пожалуйста

@maximus2011 · 19.04.2013, 19:45

CSS

.top_menu {
    background-color: rgba(255, 255, 255, 0.64);
    width: 470px;
    height: 150px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    margin:0 auto; /* Это значит, что элемент имеет отступ сверху и снизу 0px и слева и справа одинаковый отступ взависимости от ширины экрана или главного блока.
}

по другому эта запись может быть такой

CSS

1	margin:0 auto 0 auto;

или так

CSS

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Это не будет работать, если у элемента нет фиксированой ширины

Donald28 · 19.04.2013, 20:42

Сообщение от maximus2011

CSS

1	margin:0 auto 0 auto;

а это эквивалентно

CSS

1	margin:0 auto;

@Jimmbo · 19.04.2013, 21:40 **[ТС]**

maximus2011, спасибо работает

Только теперь если я допустим засуну текс в к примеру <h3>Текс</h3> и захочу его опустить ко дну блока DIV, то у меня опускаеться не текст в блоке, а сам блок. Как это можно исправить подскажите кто знает

Добавлено через 1 минуту
То есть как грамотно нужно перемещать элементы в этом блоке ? margin отталкивают блок

@Academik · 19.04.2013, 21:44

Сообщение от Donald28

а это эквивалентно

Это правильней и эстетичней.

@maximus2011 · 19.04.2013, 21:44

Такнадо делать

CSS

1
2
3

.top_menu h3{
padding-top:10px;
}

либо так

CSS

1	padding:10px 0 0 0;

тоесть это понимается как

CSS

1	padding: верх право низ лево;

@Jimmbo 28 / 9 / 1 Регистрация: 16.11.2011 Сообщений: 340
	19.04.2013, 17:38 [ТС]	2
	Хочу сделать как то так, но только чтоб фон(картинка) не изменялась при отдаление экрана. и этот блок отдалялся по центру. Помогите пожалуйста 0

@Jimmbo 28 / 9 / 1 Регистрация: 16.11.2011 Сообщений: 340
	19.04.2013, 21:40 [ТС]	5
	maximus2011, спасибо работает Только теперь если я допустим засуну текс в к примеру <h3>Текс</h3> и захочу его опустить ко дну блока DIV, то у меня опускаеться не текст в блоке, а сам блок. Как это можно исправить подскажите кто знает Добавлено через 1 минуту То есть как грамотно нужно перемещать элементы в этом блоке ? margin отталкивают блок 0

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	19.04.2013, 21:44	6
	Сообщение от Donald28 а это эквивалентно Это правильней и эстетичней. 0