https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element’s content box.
so you need a block-level element
nav ul {
text-align: center;
}
nav li {
display: inline-block;
font-size: large;
text-transform: uppercase;
width: 160px;
}
nav li ul {
display: inline-flex;
width: 100px;
}
nav li ul li {
display: inline-block;
background-repeat: no-repeat;
text-indent: -9999999px;
}
#english a {
background-image: url('images/languages/english.png');
}
#german a {
background-image: url('images/languages/german.png');
}
#chinese a {
background-image: url('images/languages/chinese.png');
}
<nav>
<ul>
<li>Home</li>
<li>Biografie</li>
<li>Termine</li>
<li>Medien</li>
<li>Kontakt</li>
<li>
<ul>
<li id="english"><a href="en/home.html">english</a></li>
<li id="german"><a href="deutsch.html">german</a></li>
<li id="chinese"><a href="chinesisch.html">chinese</a></li>
</ul>
</li>
</ul>
</nav>
I’m really new to CSS and I’m trying to hide some text with with the “text-indent” method but after adding an <a> -tag it just wouldn’t work anymore.
I now got my img and the the text
with #english{} i get no text but the <a> doesn’t work.
stuff like text-transform works just fine so I think I’m targeting the right part.
I tried to text-align: none; before the text-indent:.
nav ul {
text-align: center;
}
nav li {
display: inline-block;
font-size: large;
text-transform: uppercase;
width: 160px;
}
nav li ul {
display: inline-flex;
width: 100px;
}
#english a {
background-image: url('images/languages/english.png');
background-repeat: no-repeat;
text-indent: -9999999px;
}
#german a {
background-image: url('images/languages/german.png');
background-repeat: no-repeat;
text-indent: -9999999px;
}
#chinese a {
background-image: url('images/languages/chinese.png');
background-repeat: no-repeat;
text-indent: -9999999px;
}
<nav>
<ul>
<li>Home</li>
<li>Biografie</li>
<li>Termine</li>
<li>Medien</li>
<li>Kontakt</li>
<li>
<ul>
<li id="english"><a href="en/home.html">english</a></li>
<li id="german"><a href="deutsch.html">german</a></li>
<li id="chinese"><a href="chinesisch.html">chinese</a></li>
</ul>
</li>
</ul>
</nav>
I’m trying to make just the text go sideways not the images, to make a nav where you can click on a flag to change the language
