Позиционирование

@Gode · Регистрация: 13.05.2015

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

Здравствуйте, возможно задам совершенно глупый вопрос, но я новичок и мне важно разобраться, заранее спасибо за понимание.
Так вот, верстаю макет, установил адаптивную фоновую картинку и теперь хочу поверх нее расположить логотип и навигацию.
Создал структуру элементов и в родитель разместил .header_topline > img а в дочерний элемент разместил навигацию и логотип. Но они появляются у меня под картинкой.

Подскажите где я совершил ошибку? Планировал разместить с помощью float:left и float:right но так надо использовать позиционирование.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title>Заголовок</title>
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="libs/bootstrap/bootstrap-grid-3.3.1.min.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/media.css" />
</head>
<body>
    <header class="top_header">
    <img src="img\about\cd-intro-about-bg.png" class="img-responsive center-block" alt="Logoimage">
    <div class="header_topline logo_image">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                        <div class="menu">
                            <nav>
                                <ul class="menu_drop">
                                    <li><a href="">Work</a></li>
                                    <li><a href="">Project</a></li>
                                    <li><a href="">Blog</a></li>
                                    <li><a href="">About us</a></li>
                                    <li><a href="">Сontact</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="logo">
                            <a href="#">1</a>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    </header>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
*::-webkit-input-placeholder {
    color: #666;
    opacity: 1;
}
*:-moz-placeholder {
    color: #666;
    opacity: 1;
}
*::-moz-placeholder {
    color: #666;
    opacity: 1;
}
*:-ms-input-placeholder {
    color: #666;
    opacity: 1;
}
 
body input:focus:required:invalid,
body textarea:focus:required:invalid {
    
}
body input:required:valid,
body textarea:required:valid {
    
}
body {
    font-family: "RobotoRegular", sans-serif;
    font-size: 16px;
}

@vnmslf · 08.04.2016, 23:15

CSS
1
position: absolute

И хорошо бы вам классы, которые имеют одинаковые стили, указывать через запятую. Так можно немного место сократить

И... что такое *:: ?????

@dimon888951 · 09.04.2016, 06:39

Не нужно никаких абсолютов. Усвойте правило, если это фон, то и делать его нужно фоном и никак иначе. То есть положите фоновое изображение на страницу посредством css - background-image, тогда эта картинка будет действительно фоном и все последующие блоки которые находятся в контейнере у которого фон, будут именно на нем а не под ним.

@Gode · 09.04.2016, 16:29 **[ТС]**

Спасибо буду пробовать!

Добавлено через 50 минут
Размещаю картинку в классе top_header но отображения нет, хочу чтобы она адаптировалась под размер эрана.

CSS
1
2
3
4
5
6
.top_header {
    display: block;
    max-width: 100%;
    height: auto;
    background: url('img\about\cd-intro-about-bg.png') no-repeat;
}

Подскажите что я пропустил?

@dimon888951 · 10.04.2016, 17:04

Ну во первых видимо путь неверный... Я бы сделал так:

HTML5
1
2
3
4
.top_header {
    background-size: 100% 100%;
    background-image: url('../img/about/cd-intro-about-bg.png') no-repeat;
}

@Gode · 11.04.2016, 20:50 **[ТС]**

Как сделать чтобы картинка не превышала своих собственных размеров, в тоже время при уменьшении окна она уменьшала под размер окна а при увеличении не превышала своих собственных?

@t1m0n · 11.04.2016, 23:23

в справочниках читать про width, min-width, max-width, @media

@Gode · 12.04.2016, 12:01 **[ТС]**

Спасибо, буду разбираться

@usrash · 13.04.2016, 03:55

обычно пишут для компов с размерами в пикселях а для телефонов вот типа такой фигни

CSS
1
2
3
4
5
6
7
8
9
@media(max-device-width:480px)  {
header, #contentwrapper, body, footer
    {
    width: 100%;
    margin: 0;
    overflow: hidden; 
    }
 
}

Добавлено через 7 минут
для компов

CSS
1
2
3
4
5
6
7
.logo img, .slogan img 
            {   
            display:block;
            margin:0 auto; 
            max-width: 400px;
            height:auto;
            }

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	09.04.2016, 06:39
	Не нужно никаких абсолютов. Усвойте правило, если это фон, то и делать его нужно фоном и никак иначе. То есть положите фоновое изображение на страницу посредством css - background-image, тогда эта картинка будет действительно фоном и все последующие блоки которые находятся в контейнере у которого фон, будут именно на нем а не под ним. 0

@Gode 0 / 0 / 0 Регистрация: 13.05.2015 Сообщений: 13
	11.04.2016, 20:50 [ТС]
	Как сделать чтобы картинка не превышала своих собственных размеров, в тоже время при уменьшении окна она уменьшала под размер окна а при увеличении не превышала своих собственных? 0

@t1m0n 638 / 416 / 27 Регистрация: 03.11.2009 Сообщений: 1,855
	11.04.2016, 23:23
	в справочниках читать про width, min-width, max-width, @media 0

@Gode 0 / 0 / 0 Регистрация: 13.05.2015 Сообщений: 13
	12.04.2016, 12:01 [ТС]
	Спасибо, буду разбираться 0