VPF::Проблема с однастраничным сайтом

di109

Дата 23.6.2014, 12:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 26.9.2012

Репутация: нет
Всего: нет

Здравствуйте, я сделал верстку для одностраничного сайта, и зафиксировал меню в верху, но при переходе по ссылкам данный блок наезжает на другие, вопрос в том как сделать так чтобы он не наезжал, а край к краю становился с другими блоками, похоже это довольно таки не простая задачка.

вот, сделал страничку на jsfiddle, посмотрите что неправильно.

Или код:

Код


html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
    <head>      
        <style type='text/css'>
            body {
                margin: 0;
            }
            header {
                background-color: #FFA1A1;
                height: 80px;
                position: fixed;
                width: 100%;
                top: 5px;
            }
            #content1 {
                background-color: #79a86f;
                height: 400px;
            }
            #content2 {
                background-color: #8c73ba;
                height: 400px;
            }
            #content3 {
                background-color: #2bc4bf;
                height: 400px;
            }
            footer {
                background-color: #eded9c;
                height: 100px;
            }
            li {
                display: inline;
            }
        </style>
    </head>
    <body>
        <header>
            Header
            <ul>
                <li><a href="#content1">Content one</a></li>
                <li><a href="#content2">Content two</a></li>
                <li><a href="#content3">Content three</a></li>
            </ul>
        </header>
        <div id="content1">
            Content one
        </div>
        <div id="content2">
            Content two
        </div>
        <div id="content3">
            Content three
        </div>
        <footer>
            Footer
        </footer>
    </body>
</html>

Это сообщение отредактировал(а) di109 - 23.6.2014, 13:10

Aliance

Дата 23.6.2014, 12:46 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

у #content1 прописать margin-top равный height у header`а (80 пикселей).

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

di109

Дата 23.6.2014, 12:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 26.9.2012

Репутация: нет
Всего: нет

Нет это не работает, это только создает видимость, я же написал структуру, скопируйте и посмотрите, сами все увидите.

ksnk

Дата 23.6.2014, 12:59 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(di109 @ 23.6.2014, 12:55

)

я же написал структуру, скопируйте и посмотрите, сами все увидите.

Не надо говорить "скопируйте". Надо говорить вот, сделал страничку на jsfiddle, посмотрите что неправильно.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

ksnk

Дата 23.6.2014, 17:03 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Разве что вот так

Код


#content1,#content2,#content3 {
    padding-top:90px;
}

На javascript можно что-то умное написать, наверное...

Или добавить внутренний контейнер для всех content# с собственным скролбаром. Не совсем ясно что нужно.

Это сообщение отредактировал(а) ksnk - 23.6.2014, 17:03

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

di109

Дата 23.6.2014, 17:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 26.9.2012

Репутация: нет
Всего: нет

Да именно это мне и надо, что бы красный блок не наезжал на все остальные блоки, но ни: padding-top: 80px; ни margin-top: 80px; не срабатывает когда когда осушествляется клик по ссылке! JS? да скорей всего, я пробывал ставить на клик ссылки выполнение - $( "#block-2" ).css( "margin-top", "80px" ); и это работает но только один раз, такие то дела.

ksnk

Дата 23.6.2014, 19:58 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Вот еще вариант

Код


#content1 {
    margin-top:90px;
}

и во все такие ссылки добавлен class="local" +

Код


$('a.local').click(function(){
    var x=$(this).attr('href');
    var dim=$(x).position();
    $('html, body').animate({'scrollTop':dim.top-90},400);
    return false;
})

если анимация не нужна - можно сразу присваивать нужное значение scrollTop'у, но с анимацией прикольнее

Это сообщение отредактировал(а) ksnk - 23.6.2014, 20:01

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

di109

Дата 24.6.2014, 11:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 26.9.2012

Репутация: нет
Всего: нет

ksnk спасибо Вам огромное, это действительно то что надо, наверняка это решение пригодится еще многим ребятам, спасибо.

shrek1993

Дата 29.8.2014, 18:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 29.8.2014
Где: Москва

Репутация: нет
Всего: нет

Точно такая же проблема была...
Так и не разобрался

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »