Lisa Nielsen Bred Lisa Nielsen Bred - 7 months ago 21
HTML 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)

Picture of page:

enter image description here

<!DOCTYPE html>
<html>

<a href="https://www.facebook.com/Lindrideklub/?fref=ts" target="_blank">
<img src="LOGO.png" style="margin-left:130%; width:42px; padding-top:1px; height:42px;border:0">
</a>

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

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

<div id="main">
<h1>Lindeg&aring;rdens Rideklub</h1>
<h2>Velkommen!</h2>
<br>
<p>Sp&oslash;rgsm&aring;l kan viderestilles til drakenia7@gmail.com</p>
<footer id="foot01"></footer>
</div>

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

</body>
</html>


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 {
width:100%;
}

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>" +
"</ul>";

/*var img = new Image();
img.src = 'LOGO.png';
img.onclick = function() {
window.location.href = 'https://www.facebook.com/Lindrideklub';
};
document.body.appendChild(img);*/

Answer

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