CODEWITHSUNDEEP
htmlcsssvg
John Smith
John Smith

Reputation: 6269

Display text over svg

How you can see i try to dispay an ul list over an svg.

enter image description here

I tried something with z-index but it wont work!

My html:

    <nav>
 <svg id="bigTriangleColor" style="z-index:-100;fill:rgb(0,0,255);" xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 0 L50 100 L100 0 Z" />
</svg>
  <ul>
   <li><a href="" title="Übersicht">Übersicht</a></li>
   <li><a href="" title="Leute">Leute</a></li>
   <li><a href="" title="Links">Links</a></li>
  </ul>
 </nav>

The css:

nav {background-color: rgb(14, 131, 205);}


nav{
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
nav li{
    display:inline;
}
nav a{
    display:inline-block;
    padding:15px;
    font-size: 17px;
    font-family: 'Open Sans', sans-serif;
    text-decoration:none;

Thanks for your help!

Upvotes: 7

Views: 26165

Answers (1)

Paulie_D
Paulie_D

Reputation: 115300

You would have to use positioning, I suspect.

JSFiddle Demo

nav{
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    height:250px; /* or some other number */
}

nav ul {
    position:absolute;
    top:0;
    width:100%;
}

Upvotes: 12

Related Questions