Мой макет смешивается, если я уменьшу окно

Question

Мой макет смешивается, если я уменьшу окно

0

если я сделаю окно моего браузера более маленьким, чем кнопки будут смешаны, а логотип немного опустится. Я хочу, чтобы кнопки и логотип все равно были там, где они есть. Как я могу это понять? Заранее спасибо!

Html:

<!DOCTYPE html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css"/>
    </head>
<html>
    <body>
            <div id="header">
                <table>
                        <th>
                            <img id="logo" src="images/logo.jpg">
                        </th>
                        <th>
                            <div id="menue_bar">
                                <a href="#">Home</a>
                                <a href="#">News</a>
                                <a href="#">Contact</a>
                            </div>
                        </th>
                </table>
            </div>
    </body>
</html>

и css:

#menue_bar {
    padding: 24px;
    border: #999 1px dashed;
    margin-left: 20px;
}
#menue_bar > a{
    font-size:17px;
    padding: 12px 24px; 
    margin-right: 10px;
    text-decoration: none;
    border-style: solid;
    border-radius: 3px;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;    
}
#header {
    background-color: #FFFF;
    height: 80px;
}

MaxMix 15 май 2014, в 13:10

Источник

1

вам нужен отзывчивый HTML?
AlexPrinceton 15 май 2014, в 11:03
1

Используйте медиа-запросы
AlexPrinceton 15 май 2014, в 11:05

Теги:

html

css

layout

1 ответ

Ещё вопросы

RossBille · Answer 1 · 2014-05-15T09-53-00.000Z

Вам нужен отзывчивый дизайн. Есть много способов сделать это, некоторые простые правила:

Избегайте фиксированных размеров (px) и начинайте использовать единицы измерения масштаба (em,% и т.д.).
Использовать мультимедийные запросы CSS

Обоснование:

Единицы фиксированного размера - это только фиксированный размер. Ваш макет будет отлично смотреться на 1 размер экрана/окна, но будет непредсказуемым в других
Некоторым размерам экрана требуются значительные изменения макета, которые не могут быть достигнуты с помощью модулей масштабирования, для этого вам понадобится другой набор CSS и способ применить этот набор CSS к соответствующему размеру экрана, следовательно, к медиа-запросам.

Однако есть много рамок, которые делают все это для вас, см. Скелет и Boostrap