nobodyshere nobodyshere - 4 months ago 10
Javascript Question

Positioning this div is a nightmare please assist

enter image description here

In this JSFiddle https://jsfiddle.net/Please_Reply/Lj0x38f2/6/, you can see that this line of code...

<div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>


causes an issue because it is supposed to be directly above the navigation bar whilst still floating to the right, but instead it pushes the navigation bar out from the right hand side, when the navigation bar should be sitting underneath that div in alignment with the base of the header.

When I say the navigation bar, I am indeed referring to all of the code below...

<div style="float:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div>
</div>
</div>


Please keep in mind that the navigation bar is easily ruined when repositioning the divs.

All the code together is...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/cssfile.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container"> <!-- This is the container -->
<div class="header"> <!-- This is the header -->
<div style="float:left"> <!-- This is the logo -->
<img src="images/mattsubishilogowhite.png" height="120px"/>
</div>
<div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
<div style="float:right; clear:both"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div>
</div>
</div>
<div class="body"> <!-- This is the body -->
</div>
<div class="footer"> <!-- This is the footer -->
</div>
</div>
</body>
</html>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);

$(".item").hover(function() {
$("#slider").stop();
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});

$(".item").on("mouseout", function() {
$("#slider").stop();
$("#slider").animate({
"left": $('#one').position().left + "px",
"width": $('#one').width() + "px"
}, 500);
});
});
</script>
<script>
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isAtLeastIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
if(isChrome){
alert("Your using Chrome, please be aware that using Chrome will reduce some functionality of this website therefore you should use Internet Explorer version 11 or higher.");
}else{
if(!isAtLeastIE11){
alert("Your version of Internet Explorer is below 11. It needs to be 11 or higher for some aspects of this website's functionality to work. Please update or use Chrome.");
}
}
</script>

Answer

If you add a clear:both to your navigation div it will come down and you should remove the height of your .header to fit the content. so it will just fit the provided image. here is the code:

$(document).ready(function() {
  $("#slider").animate({
    "left": $(".item:first").position().left + "px",
    "width": $(".item:first").width() + "px"
  }, 0);

  $(".item").hover(function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });

  $(".item").on("mouseout", function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $('#one').position().left + "px",
      "width": $('#one').width() + "px"
    }, 500);
  });
});
body{ /* Applies to the <body> tag */
	margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
	width:100%; /* This sets the width */
	height:100%; /* This sets the height */
	background-color:black; /* Sets the background colour */
}
.header{ /* The header class */
	width:100%;
	background-color:#323232;
	color:white; /* The sets the colour of the font */
}
.body{
	width:100%;
	height:495px;
	background-color:white;
	color:black;
}
.footer{
	width:100%;
	height:50px;
	background-color:#323232;
	color:white;
}
div{
    display: inline-block;
    float:left;
}
#one, #two, #three, #four{
    background-color:#323232;
    height:96px;
	color:white;
	text-align:center;
	font-size:25px;
	font-family:"Myriad Pro";
}
#slider{
    background-color:#ed1c24;
    height:10px;
    width:100px;
    position: absolute;
    left: 0;
    bottom:0;
}
.inside{
	margin-left:30px;
	margin-right:30px;
	padding-top:7px;
	pointer-events:none;
	margin-top:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <!-- This is the container -->
	<div class="header"> <!-- This is the header -->
    	<div style="float:left"> <!-- This is the logo -->
        	<img src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" height="100px">
        </div>
        <div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
        <div style="float:right; clear:right"> <!-- This is the navigation menu -->
        	<div style="position:relative"> <!-- This is the container of the navigation menu -->
            	<div id="slider"></div> <!-- This is the slider bar -->
            	<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
    			<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
    			<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
    			<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
            </div>
        </div>
    </div>
    <div class="body"> <!-- This is the body -->
    </div>
    <div class="footer"> <!-- This is the footer -->
    </div>
</div>

Comments