Lisa Nielsen Bred Lisa Nielsen Bred - 6 months ago 13
Javascript Question

Moving image link out of head in html?

As you can see I have icons in the top right corner (these icons are part of the background image I have in my CSS code). I want to move the little horse icon (red) up over the "DRF Go!" icon, but I can't get it over the green line. The things in the blue square are all my html and the rest is not.

I've tried to do it in the JS code (which I've added in as a comment here), but then I don't know how to move or change the size of it.

(If there is an easier code to use or if it can be done in my CSS or JS code please tell me)

Thank you!

Picture of page

<!DOCTYPE html>

<a href="" target="_blank">
<img src="LOGO.png" style="margin-left:130%; width:42px; padding-top:1px; height:42px;border:0">

<title>Our Company</title>
<link href="Forside.css" rel="stylesheet">

<nav id="nav01"></nav>
<div style="margin-left:20%;padding:1px 16px;height:1000px;">

<div id="main">
<h1>Lindeg&aring;rdens Rideklub</h1>
<p>Sp&oslash;rgsm&aring;l kan viderestilles til</p>
<footer id="foot01"></footer>

<script src="script.js"></script>


And here is the CSS code if you need it

body {
background-image: url("Forside.jpg");
background-repeat: no-repeat;
background-size: 1920px;
background-attachment: scroll;
background-position: top;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: #cccccc;
color: #696969; /*tekst*/
padding: 230px; /*Ryk side ned*/
padding-left: 180px; /*Ryk side mod højre*/
padding-right: 420px; /*Ryk side mod venstre*/

#main {
padding: 5px; /*Ryk tekst ned*/
padding-left: 15px; /*Ryk tekst mod højre*/
padding-right: 15px; /*Ryk tekst mod venstre*/
background-color: #ffffff; /*Baggrunds farve til felt*/
border-radius: 0 0 5px 5px;

h1 {
font-family: Georgia, serif;
border-bottom: 3px solid green; /*Linje under overskrift*/
color: #666666; /*Overskrifts farve*/
font-size: 30px;

table {

table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;

th {
text-align: left;

table tr:nth-child(odd) {
background-color: #f1f1f1;
table tr:nth-child(even) {
background-color: #ffffff;

ul#menu {
padding: 0;
margin-bottom: 11px;
padding-left: 333px;

ul#menu li {
display: inline;
margin-right: 3px;

ul#menu li a {
/*background-color: #ffffff;*/
padding: 10px 20px;
text-decoration: none;
color: #000000;
border-radius: 4px 4px 0 0;

ul#menu li a:hover {
color: white;
background-color: black;

And the JS code

document.getElementById("foot01").innerHTML =
"<p>" + new Date().getFullYear() + " LNB. All rights reserved.</p>";

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Forside.html'>Forside</a></li>" +
"<li><a href='Omos.html'>Om os</a></li>" +
"<li><a href='maps.html'>Find os</a></li>" +
"<li><a href='nyheder.html'>Nyheder</a></li>" +
"<li><a href='Kontakt.html'>Kontakt</a></li>" +

/*var img = new Image();
img.src = 'LOGO.png';
img.onclick = function() {
window.location.href = '';


Try using position:absolute and set top and left so it matches the 'box' you want.