相对于图像的 HTML/CSS 文本

标签 html css image

我正在尝试让文本从图像中的某个点开始(为了清晰起见，请参见图像)。但我似乎无法弄清楚。 我试图实现的目标非常奇怪，但我不明白为什么它不可能实现。正如您所看到的，我有点让它工作，但它没有响应。如果您有兴趣自己测试一下，我添加了一个 JSFiddle。

enter image description here 这是调整大小时的样子。 enter image description here 这是导航栏的代码:

<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>

导航栏的 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;
}


@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;
}
<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>

最佳答案

将容器类添加到导航。 像这样:

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

关于相对于图像的 HTML/CSS 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40257192/

上一篇：html - 在 Bootstrap 中调整图像大小和填充

下一篇：css - 创建具有固定标题的 css 可滚动表

相关文章：

c# - Web 浏览器到 WPF 图像拖放

html - 如何使用 Bootstrap 4 使我的布局响应式

html - 窗口 html 框架中的窗口

javascript - 删除 Dygraphs 右侧的空白

javascript - 使自定义复选框与 css 一起工作 - 选择或检查不起作用

javascript - 如何连接声音和图像

html - css 颜色转换背后的数学原理是什么？

html - 我想将 svg 图像的大小调整为屏幕宽度的 100%。然后高度应该溢出，保持原始的高/宽比

jquery - 使用 JQuery 将 DIV 添加到事件菜单项

gwt - 覆盖为 GWT 图像定义高度/宽度的元素样式

©2024 IT工具网  联系我们