CODEWITHSUNDEEP
htmlcss
user2547576
user2547576

Reputation: 117

Trouble floating text to right alongside images

I'm currently having some trouble coding the navigation bar for a new website. I currently have it set up so that each 'link' (not currently hyperlinked) is in the form of an image. I am then using some free javascript code to display the current UTC time.

I want the links (images) to display in the center of the navigation bar and the outputted time to appear on the right of the navigation bar. I have managed to do this using the float:right; attribute on the

tag however this then causes the centered images to move to the left slightly. I have been trying to stop them from moving but I've been unsuccessful, hence why I'm asking here. If anyone knows how I can keep the images completely centered with the javascript time to the right that would be great. Thanks!

HTML:

<html>
<head>
  <title>Personnel Tracking System - E-3+</title>
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" />

  <script language="JavaScript">
    function tS(){ x=new Date(tN().getUTCFullYear(),tN().getUTCMonth(),tN().getUTCDate(),tN().getUTCHours(),tN().getUTCMinutes(),tN().getUTCSeconds()); x.setTime(x.getTime()); return x; }
    function tN(){ return new Date(); }
    function lZ(x){ return (x>9)?x:'0'+x; }
    function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) }
    function dT(){ if(fr==0){ fr=1; document.write('<font size=2 face=Arial color=white><b><span id="tP">'+eval(oT)+'</span></b></font>'); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
    var mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),fr=0,oT="tS().getDate()+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+'~'+' '+lZ(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+' '";
  </script>

</head>
<body>

<div id="navbar">
  <center>
    <img src="images/homebutton.png" />
    <img src="images/e-3button.png" />
    <img src="images/resignedbutton.png" />
    <img src="images/firedbutton.png" />
    <img src="images/desertersbutton.png" />
    <img src="images/mosrosterbutton.png" />
    <img src="images/divider.png" />
    <p style="float:right;"><script language="JavaScript">dT();</script></p>
  </center>
</div>

</body>
</html>

CSS:

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #bababa;
}

#navbar {
    background: url(images/navbarbg.png);
    width: 100%;
    height: 55px;
    vertical-align: middle;
    margin: 0;
}

img {
    margin: 0;
    padding: 0;
}

Upvotes: 2

Views: 51

Answers (1)

koosa
koosa

Reputation: 3040

Maybe something like this:

#navbar {
  position: relative;
    background: url(images/navbarbg.png);
    width: 100%;
    height: 55px;
    vertical-align: middle;
    margin: 0;
}

#navbar p{
  position: absolute;
  top: 0;
  right: 0;
}

Then remove the float from the p tag. Positioning something absolute will remove it from the flow of the container, so it won't push everything else around.

Upvotes: 2

Related Questions