画像との相対的なHTML/CSSテキスト

画像の特定の点からテキストを開始しようとしています（画像は明瞭です）。しかし、私はそれを把握しているようです。私は何を達成しようとしているが、なぜそれが不可能であるかはわかりません。私はちょうどあなたが見ることができるように動作するようにしましたが、それは頼りになりません。 JSFiddleを追加しました。あなたが自分でそれをテストすることに躊躇しているのならば、私はJSFiddleを追加しました。画像との相対的なHTML/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>

：

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

ナビゲーションバー

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

そしてheaderpic CSSのためのCSS：ここは、ナビゲーションバーのコードです

出典

2016-10-26 Jari Flederick

あなたは私にあなたが –

がさらにrefrence、後にJSfiddleを追加しましたあなたのレイアウトをテストすることができるように使用しているヘッダ-logo.jpgを送ることができます –

ナビゲーションにコンテナクラスを追加します。このよう：

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

出典

2016-10-26 08:40:32 lisarko8077

画像との相対的なHTML/CSSテキスト

答えて

関連する問題