Question

我试图从图像中的某个点开始创建文本（请参阅图像以获得清晰度）。但我似乎无法弄明白。它非常奇怪我试图实现，但我不明白为什么它不可能。我有点让它工作，你可以看到，但它没有重新定位。如果你有兴趣自己测试一下，我添加了一个JSFiddle。

这是调整大小时的样子。以下是导航栏的代码：

<nav id="primary_nav_wrap">
<img src="header-logo.jpg" class="headerPic" />
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="scouts_news.html">Nieuws</a></li>
    <li>
        <a href="scouts_takken.html">Takken &#x25BC;</a>
        <ul>
            <li><a href="scouts_kapoenen.html">Kapoenen (6-8 jaar)</a></li>
            <li><a href="scouts_kawellen.html">Kawellen (8-11 jaar)</a></li>
            <li><a href="scouts_jonggivers.html">Jonggivers (11-14 jaar)</a></li>
            <li><a href="scouts_givers.html">Givers (14-17 jaar)</a></li>
            <li><a href="scouts_leiding.html">Jin, leiding en VT (+17 jaar)</a></li>
        </ul>
    </li>
    <li>
        <a href="scouts_activiteiten.html" class="current-menu-item">Activiteiten &#x25BC;</a>
        <ul>
            <li><a href="scouts_kapoenena.html">Kapoenen</a></li>
            <li><a href="scouts_kawellena.html">Kawellen</a></li>
            <li><a href="scouts_jonggiversa.html">Jonggivers</a></li>
            <li><a href="scouts_giversa.html">Givers</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Praktisch &#x25BC;</a>
        <ul>
            <li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
            <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
            <li><a href="scouts_uniform.html">Uniform</a></li>
            <li><a href="scouts_technieken.html">Technieken</a></li>
            <li><a href="scouts_jaarthema.html">Jaarthema</a></li>
            <li><a href="scouts_rituelen.html">Rituelen</a></li>
        </ul>
    </li>
    <li><a href="scouts_afspraken.html">Algemeen</a></li>
    <li><a href="scouts_over.html">Over</a></li>
    <li><a href="scouts_fotos.html">Foto's</a></li>
    <li><a href="scouts_inschrijven.html">Inschrijven</a></li>
    <li><a href="scouts_verhuur.html">Verhuur</a></li>
    <li><a href="scouts_contact.html">Contact</a></li>
</ul>

NAVbar的CSS

#primary_nav_wrap {
text-align: center;
width: 100%;
color: white;
border-bottom: 5px solid darkgreen;
background-color: #706456;
}

#primary_nav_wrap ul {
    list-style: none;
    position: relative;
    display: inline-block;
    margin-left:-25px;
    margin-bottom: 2.7%;
    padding: 0;
    color: darkgreen;
}

    #primary_nav_wrap ul a {
        display: block;
        color: white;
        text-decoration: none;
        font-weight: 700;
        font-size: 20px;
        line-height: 32px;
        padding: 3px 15px;
        font-family: FuturaBold;
        color: darkgreen;
        background-color: white;
    }


    #primary_nav_wrap ul li {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        color: darkgreen;
    }

        #primary_nav_wrap ul li.current-menu-item a {
            background-color: #FFDE46;
            color: darkgreen;
        }

        #primary_nav_wrap ul li a:hover {
            background-color: darkgreen;
            color: black;
        }

    #primary_nav_wrap ul ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: white;
        color: darkgreen;
        padding: 0;
    }

        #primary_nav_wrap ul ul li {
            float: none;
            width: 200px;
            border: 1px solid #FFDE46;
            color: darkgreen;
        }

        #primary_nav_wrap ul ul a {
            line-height: 120%;
            padding: 10px 15px;
            color: darkgreen;
        }

        #primary_nav_wrap ul ul ul {
            top: 0;
            left: 100%;
            color: darkgreen;
        }

    #primary_nav_wrap ul li:hover > ul {
        display: block;
    }

标题CSS：

.headerPic{
height:250px;
width:auto;
}

＆＃13;

@font-face {
    font-family: Futura;
    src: url('FuturaOriginal.ttf');
}

@font-face {
    font-family: FuturaLight;
    src: url('FuturaLight.ttf');
}

@font-face {
    font-family: FuturaBold;
    src: url('FuturaBold.ttf');
}

BODY {
    font-family: FuturaLight;
    /*background: white; color: #333;*/
    background-image: url("bos.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    margin: 0;
    padding: 0;
    min-height:100%;
}

.margin {
    margin-left: 300px;
    margin-right: 300px;
}

#primary_nav_wrap {
    text-align: center;
    width: 100%;
    color: white;
    border-bottom: 5px solid darkgreen;
    background-color: #706456;
}

    #primary_nav_wrap ul {
        list-style: none;
        position: relative;
        display: inline-block;
        margin-left:-25px;
        margin-bottom: 2.7%;
        padding: 0;
        color: darkgreen;
    }

        #primary_nav_wrap ul a {
            display: block;
            color: white;
            text-decoration: none;
            font-weight: 700;
            font-size: 20px;
            line-height: 32px;
            padding: 3px 15px;
            font-family: FuturaBold;
            color: darkgreen;
            background-color: white;
        }


        #primary_nav_wrap ul li {
            position: relative;
            float: left;
            margin: 0;
            padding: 0;
            color: darkgreen;
        }

            #primary_nav_wrap ul li.current-menu-item a {
                background-color: #FFDE46;
                color: darkgreen;
            }

            #primary_nav_wrap ul li a:hover {
                background-color: darkgreen;
                color: black;
            }

        #primary_nav_wrap ul ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            color: darkgreen;
            padding: 0;
        }

            #primary_nav_wrap ul ul li {
                float: none;
                width: 200px;
                border: 1px solid #FFDE46;
                color: darkgreen;
            }

            #primary_nav_wrap ul ul a {
                line-height: 120%;
                padding: 10px 15px;
                color: darkgreen;
            }

            #primary_nav_wrap ul ul ul {
                top: 0;
                left: 100%;
                color: darkgreen;
            }

        #primary_nav_wrap ul li:hover > ul {
            display: block;
        }

.side {
    position: fixed;
    width: 250px;
    border-right-style: solid;
    border-width: 5px;
    height: 100%;
    float: left;
}

.main {
    width: 100%;
    min-height:500px
}


H1 {
    font-size: 60px;
    margin-top: 0;
    padding-bottom: 50px;
    padding-top: 1px;
    text-align: center;
    list-style-type: none;
    position: fixed;
    width: 100%;
    top: 0;
    font-family: FuturaBold;
    color: green;
    background-color: #FFDE46;
}

/*Opmaak van je header2*/
H2 {
    font-family: Futura;
    font-size: 40px;
    /*Kleur toevoegen*/
    color: darkgreen;
    /*Tekst centreren*/
    text-align: center;
}

/*Opmaak header3*/
H3 {
    font-family: Futura;
    /*Kleur toevoegen*/
    font-size: 30px;
    color: darkgreen;
}

p.futura20 {
    font-family: Futura;
    font-size: 20px;
}

p.futura25 {
    font-family: Futura;
    font-size: 25px;
}

.spacer2 {
    height: 10px;
}

#footer {
    margin-bottom: 0px;
    height: 200px;
    background-color: #706456;
    position: relative;
}

.scoutsgidsen {
    height: 150px;
    position: absolute;
    left: 300px;
    bottom: 20px;
}

.logo {
    height: 150px;
    position: absolute;
    right: 300px;
    bottom: 20px;
}

.avondlied {
    font-family: Futura;
    font-size: 18px;
    text-align: center;
    font-weight: 800;
}

.fb-page{
    width:50%;
    float:right;
}

.headerPic{
    height:250px;
    width:auto;
}

＆＃13;

<BODY>
    <nav id="primary_nav_wrap">
    <img src="http://scoutsn195.195.axc.nl/header-logo.jpg" class="headerPic" />
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="scouts_news.html">Nieuws</a></li>
        <li>
            <a href="scouts_takken.html">Takken &#x25BC;</a>
            <ul>
                <li><a href="scouts_kapoenen.html">Kapoenen (6-8 jaar)</a></li>
                <li><a href="scouts_kawellen.html">Kawellen (8-11 jaar)</a></li>
                <li><a href="scouts_jonggivers.html">Jonggivers (11-14 jaar)</a></li>
                <li><a href="scouts_givers.html">Givers (14-17 jaar)</a></li>
                <li><a href="scouts_leiding.html">Jin, leiding en VT (+17 jaar)</a></li>
            </ul>
        </li>
        <li>
            <a href="scouts_activiteiten.html" class="current-menu-item">Activiteiten &#x25BC;</a>
            <ul>
                <li><a href="scouts_kapoenena.html">Kapoenen</a></li>
                <li><a href="scouts_kawellena.html">Kawellen</a></li>
                <li><a href="scouts_jonggiversa.html">Jonggivers</a></li>
                <li><a href="scouts_giversa.html">Givers</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Praktisch &#x25BC;</a>
            <ul>
                <li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
                <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
                <li><a href="scouts_uniform.html">Uniform</a></li>
                <li><a href="scouts_technieken.html">Technieken</a></li>
                <li><a href="scouts_jaarthema.html">Jaarthema</a></li>
                <li><a href="scouts_rituelen.html">Rituelen</a></li>
            </ul>
        </li>
        <li><a href="scouts_afspraken.html">Algemeen</a></li>
        <li><a href="scouts_over.html">Over</a></li>
        <li><a href="scouts_fotos.html">Foto's</a></li>
        <li><a href="scouts_inschrijven.html">Inschrijven</a></li>
        <li><a href="scouts_verhuur.html">Verhuur</a></li>
        <li><a href="scouts_contact.html">Contact</a></li>
    </ul>
</nav>
    <div class="main">
        <H2>Kapoenen Activiteiten</H2>
    </div>
    <div class="spacer2"></div>
    <div id="footer">
        <img src="logo_Scouts_en_Gidsen_Vlaanderen.png" class="scoutsgidsen" />
        <img src="logo.png" class="logo" />
    </div>
</BODY>

＆＃13;

Answer 1

向nav添加容器类。像这样：

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 }

相对于图像的HTML / CSS文本

1 个答案: