Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/40: Рейтинг темы: голосов - 40, средняя оценка - 5.00
8 / 8 / 2
Регистрация: 25.12.2014
Сообщений: 62
1

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

15.04.2015, 21:55. Показов 8140. Ответов 8
Метки нет (Все метки)

Доброго времени суток!

Начал вот изучать html/css и столкнулся с такой проблемой.
Не могу разобраться с форматированием хидера, враппера(в моем случае) и лого с навигационным меню.
Позиционирование logo в header


1. Не могу понять, как корректно завести область враппера(выделенную желтым), сам враппер обвиден красным под хидер(обвиден зеленым).
2. И не могу разобраться, как сдвинуть лого(выделено сиреневым) и навигационное меню в центр, чтобы они всегда занимали область враппера, при любом браузере, при любом уменьшении страницы скролом, или увеличении, но background хидера чтобы оставался на всю ширину сайта.

Запутался в z-index, position и display.


Заранее всем благодарен.
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.04.2015, 21:55
Ответы с готовыми решениями:

Не могу создать 2 класса header-composition и header-social
При создании 2 классов. например header-composition и hedaer-social первый работает, а второй уже...

Logo on CSS
В процессе изучения HTML/CSS наткнулся на такую штуку: http://cssdeck.com/labs/android-logo....

Div Logo в позиции Z
Добрый день всем! Подскажите пожалуйста, как настроить <div>Logo</div> таким образом, чтобы он...

Logo сайта картинкой
В общем суть вопроса, как вставить кликабельную картинку, чтобы она не влияла на другие элементы(не...

8
8 / 8 / 2
Регистрация: 25.12.2014
Сообщений: 62
16.04.2015, 12:34  [ТС] 2
Попробовал поставить хидеру position: absolute и z-index: 1 - сработало, картинка "заехала" под хидер, но сбился весь хидер на остальных страницах
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
<div class="header">
        <div class="navigation">
            <!-- <a href="#" class="button">Login</a> -->
                 <input type="submit" class="button" name="push" value="Login"> 
                <ul class="nav-menu">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="spoffers.html">SPECIAL OFFERS</a></li>
                    <li><a href="cars.html">CARS</a></li>
                    <li><a href="locations.html">LOCATIONS</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
        </div>
        <div class="logo">
            <a href="#"><img src="images/wheel.png" alt="#"></a>
        </div>
    </div>
<div class="wrapper">
    <div class="img">
        <img src="images/mainpic.png" alt="#">
            <div class="txt">
                <span>Rent a car in few seconds</span>
                </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper {
    width: 1214px;
    margin: 0 auto;
    /*height: auto;*/
    background: #f6f7f0;
}
.header {
    /*margin: 0;
    padding: 0;*/
    width: 100%;
    margin: 0 auto;
    height: 80px;
    background: #14263d;
    /*position: absolute;
    z-index: 1;*/
}
0
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
16.04.2015, 20:33 3
Ballu, z-index нужен только если у вас в одном месте несколько блоков с position absolute и нужно какой то положить сверху display не относится к тому как расположить блок внутри другого блока. используйте margin-left в процентах (нужно поэкспериментировать)
1
8 / 8 / 2
Регистрация: 25.12.2014
Сообщений: 62
16.04.2015, 22:12  [ТС] 4
Цитата Сообщение от Давран Посмотреть сообщение
z-index нужен только если у вас в одном месте несколько блоков с position absolute и нужно какой то положить сверху display не относится к тому как расположить блок внутри другого блока. используйте margin-left в процентах (нужно поэкспериментировать)
Разобрался слегка. Добавил еще один div, ну и с z-index и position absolute.

Есть другой вопрос.. как можно или с помощью чего зафиксировать размер, например input type="submit". Потому как сделал, добавил в форму, но при скроле, вылазит за пределы формы. У формы фиксированные значения ширины и высоты.
0
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
16.04.2015, 22:16 5
Цитата Сообщение от Ballu Посмотреть сообщение
зафиксировать размер, например input type="submit"
задавать размер в пикселях.
Цитата Сообщение от Ballu Посмотреть сообщение
но при скроле, вылазит за пределы формы
что вылазит и за приделы какой формы?
0
8 / 8 / 2
Регистрация: 25.12.2014
Сообщений: 62
17.04.2015, 09:24  [ТС] 6
Цитата Сообщение от Давран Посмотреть сообщение
задавать размер в пикселях.
Задаю в пикселях.

Цитата Сообщение от Давран Посмотреть сообщение
что вылазит и за приделы какой формы?
На рисунке выше, на изображении размещена форма(закращена белым), её размер в пикселях, на ней пара input и кнопка, так вот, при скроле на уменьшение, кнопка слегка смещается вниз, как бы выходя за пределы формы.
Название: form with input.jpg
Просмотров: 88

Размер: 6.1 Кб
0
8 / 8 / 2
Регистрация: 25.12.2014
Сообщений: 62
20.04.2015, 14:46  [ТС] 7
Код вот, до сих пор не могу разобраться.. с этой формой и кнопкой.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.Form{background: #fff;
    color: #14263d;
    height: 458px;
    padding-top: 8px;
    width: 308px;
 
.buttonFormH {    /*кнопка*/
    width: 260px;
    height: 40px;
    margin-bottom: 23px;
    margin-left: 25px;
    margin-top: 19px;
    background: #e8554e;
    color: #fff;
    font: 18px Raleway-Regular;
    border: 0;
}
.buttonFormH:hover { background:#e67d78; } /* при наведении курсора мышки */
.buttonFormH:active { background: #bd453f; } /* при нажатии */
Добавлено через 2 минуты
Цитата Сообщение от Ballu Посмотреть сообщение
1. Не могу понять, как корректно завести область враппера(выделенную желтым), сам враппер обвиден красным под хидер(обвиден зеленым).
2. И не могу разобраться, как сдвинуть лого(выделено сиреневым) и навигационное меню в центр, чтобы они всегда занимали область враппера, при любом браузере, при любом уменьшении страницы скролом, или увеличении, но background хидера чтобы оставался на всю ширину сайта.
С этим пунктами разобрался, решил, как писал выше через дополнительный div и пришлось поиграться с z-index.
0
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
21.04.2015, 21:23 8
Ballu, времени нет совсем отвечать. Получилось?
0
8 / 8 / 2
Регистрация: 25.12.2014
Сообщений: 62
07.05.2015, 09:46  [ТС] 9
Цитата Сообщение от Давран Посмотреть сообщение
Ballu, времени нет совсем отвечать. Получилось?
Я же выше описал, всё, или нет?
С формой так и не получилось.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.05.2015, 09:46

Как поставить logo и меню в ряд?
Как поставить logo и меню в ряд?Да это может для кого то казаться банальным,подскажите если не...

Как расположить меню сразу за logo
Вопрос такого характера. Менюшка горизонтальная вылетает в самый верх, как я понял это из-за float...

Aside идет после logo, хотя он должен идти под ним
Здравствуйте, нарисовал себе макет пытался сверстать, вроде бы простой, а сварил кашу =( 1:...

как мне сделать так, чтобы LOGO и навигатор меню был расположен по левую сторону
.logo {position: absolute;top:0px;left:0px;text-indent:-9999px;} .logo-wrap...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru