Wstawianie flagi kraju z odnośnikiem - błahy problem, nie działa odnośnik + jak ustawić ikonę w rogu

Question

Cześć. Mam bardzo błahy problem, lecz nie potrafię go obejść.

Chciałbym na swojej stronie dodać kilka wersji językowych. Chciałbym dodać trzy flagi w prawym górnym rogu. Problem polega na tym, że gdy ustawię odnośnik - ikona nie pojawia się na stronie. Gdy usuwam a href - ikona pojawia się. 

</head>
<a href="www.mojastrona.pl/en/"><img src="images/enicon.png" border="0" alt="EN" /></a>
<a href="www.mojastrona.pl/nl/"><img src="images/nlicon.png" border="0" alt="NL" /></a>
<a href="www.mojastrona.pl/"><img src="images/plicon.png" border="0" alt="PL" /></a>

 

Ponadto jak już wspomniałem, chciałbym umieścić to w prawym górnym rogu - niestety udaje mi się umieścić ikony tylko pojedynczym alignem - top LUB right, a chciałbym top-right + kilka pikseli obok rogu, żeby minimalnie odstawało od krawędzi strony.

O co tu chodzi? 

Answer 1

Tutaj przykład, wszystko wygląda okej.

https://codepen.io/Czeran/pen/qPzEMr

Daj może więcej tego kodu to zobaczymy w czym leży problem.

Comments

Po skopiowaniu tego kodu + dodaniu linka również nie ma odsyłacza

---

I strona to zwykły szablon z Internetu

https://codepen.io/anon/pen/WZqveq

---

Ciężko powiedzieć, jak wstawiłem Twój kod i dodałem linki to się wyświetliło poprawnie, aczkolwiek używasz wielu js'ów i wielu zewnętrznych stylów, zatem masz 2 wyjścia:

• wrzucasz gdzieś cały projekt i wtedy badamy problem
• powyłączaj wszystkie zewnętrzne style/js i sprawdź, który powoduje Ci taki błąd

---

Dobra, widzę, że w złym miejscu wstawiam ten kod po prostu - gdzie powinienem go wstawić, żeby było dobrze?

https://i.imgur.com/TrkuBgd.jpg

---

Jeżeli chcesz je ustawić w górnym rogu możesz użyć złapać wszystkie flagi razem i użyć 

position: absolute;

przykład: https://codepen.io/Czeran/pen/LzKEgy

Pamiętaj tylko o jednym - position: absolute ustawić w stosunku do body, a nie jakiegoś kontenera wewnątrz.

Answer 2

Aby było łatwiej zrozumieć, Twój problem oparłem o jakiśtam szablon, który kiedyś zaprojektowałem.

https://codepen.io/radek024/pen/oGeYLw

Zobacz: header(wypozycjonowany absolutnie) posiada ul.lang-list, który również posiada position: absolute. Dzięki temu jesteś w stanie bez problemu ułożyć dany element w rodzicu. Jeżeli pójdziemy krok dalej, to w sumie można tak kodować szablony... i tak kiedyś było. Teraz się tego nie stosuje ze względu na responsywność - jest ją bardzo trudno utrzymać.

Dalej; nadając right oraz top dla  ul.lang-list pozycjonuję go w rodzicu. Operuję na jego wielkościach, więc jeżeli header zajmuje 100% szerokości strony to lista ta będzie po niemal skrajnie prawej. Każdy z elementów jest wyświetlany w tej samej linii oraz posiada margin-left o wartości 5px. 

Twój codepen niestety nie otwiera mi się poprawnie(ciągle się odświeża, nie mam pojęcia dlaczego) ale niezależnie od istniejącego kodu takie rozwiązanie powinno działać. Pamiętaj tylko o nadaniu lang dla html, jeżeli język się zmieni! :)