как создать опорную точку - PullRequest
Новая
       2

как создать опорную точку

0 голосов
/ 29 марта 2011

Я попытался создать опорную точку, используя: 

<a href="index-xxx.html#reference-name"> and

<a name="reference-name">

Проблема в том, что у меня есть плавающее поле сверху, а точка привязки переходит в верх страницы, скрывая верхнюю часть текста.

Есть ли простой способ добавить относительный интервал к верхнему полю с помощью HTML?

Я новичок в этом и использую шаблон, который нашел в Интернете. С тех пор я обнаружил, что было бы проще начать с нуля, а не использовать шаблон, но я сейчас слишком далеко, и я не совсем понимаю, как изменить CSS, чтобы сделать это. Есть ли более простой ответ?

Большое спасибо заранее кому-то, кто часами искал ответ.

1 Ответ

0 голосов
/ 29 марта 2011

РЕДАКТИРОВАТЬ: я обновил на основе предоставленного кода.

По сути, мы получили что-то такое: 

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
    #main {
        min-width: 980px;
        margin: 0 auto;
        font-size: 0.75em;
        padding:101px 0 37px 0;
    }
    header {
        height:101px;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:100;
    }
    footer {
        overflow: hidden;
        position:absolute;
        bottom:0;
        left:0;
        width:100%/*; height:37px*/;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        color:#9d9d9d;
        text-transform:uppercase
    }
</style>
</head>
<body>
<div id="main">
    <header>...</header>
    <section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
    <footer>...</footer>
</div>
</body>
</html>

Как написано, ссылки якорей скрыты подверхняя навигация.Кажется, единственное надежное решение - это использование «фреймов CSS» для корректного отображения контента, что требует следующих настроек CSS: 

#main 
{
    padding:0 0 37px 0;
}
section#content
{
    position:fixed;
    top:101px;
    width:100%;
    bottom:37px;
    overflow:auto;
}
footer 
{
    position:fixed;
    height:37px;
}

Так что я удалил верхний отступ из # main.

Затем я установил фиксированную позицию содержимого и нижнего колонтитула.Из-за этого содержимое должно быть перемещено вниз на 101 пикс., Следовательно, сверху.

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

Переполнение автоматически дает нам полосы прокрутки, а ширина 100% помещает эти полосы в разумное место.

Проверено на IE 9, Chrome 10, Firefox 4 и Opera 11.

Редактировать 2:И, к сожалению, я не могу найти много онлайн об этом конкретном методе.Эрик Мейер говорит об этом в Smashing CSS.Это не похоже ни на один из существующих онлайн-ресурсов, чтобы проверить, как якорные ссылки будут работать с контентом, что весьма прискорбно.

...