proper spacing between html code

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I have some spacing issues in my html. Should I use css or html to solve the problem? When using a non breaking space, the letters do not line up properly. Here is the code I am using. The are of concern is towards the bottom of the code you will see letters of the alphabet. When you view the code, you will see that the letters are stuck together. I want to put some space between them so they look proper when viewing my web page.




<style type="text/css">

#topbar{
position:absolute;
border: 0px solid black;
padding: 2px;
background-color: red
width: 20px;
visibility: hidden;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 90 //set x offset of bar in pixels
var startY = 20 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

<div id="topbar">
<a href="" onClick="(); return false"><h5>Back to top</h5></a>

<a href="#a">A</a><a href="#b">B</a><br/>
<a href="#c">C</a><a href="#d">D</a><br/>
<a href="#e">E</a><a href="#f">F</a><br/>
<a href="#g">G</a><a href="#h">H</a><br/>
<a href="#i">I</a><a href="#j">J</a><br/>
<a href="#k">K</a><a href="#l">L</a><br/>
<a href="#m">M</a><a href="#n">N</a><br/>
<a href="#o">O</a><a href="#p">P</a><br/>
<a href="#q">Q</a><a href="#r">R</a><br/>
<a href="#s">S</a><a href="#t">T</a><br/>
<a href="#u">U</a><a href="#v">V</a><br/>
<a href="#w">W</a><a href="#x">X</a><br/>
<a href="#y">Y</a><a href="#z">Z</a><br/>
<br/><br/><br/>
<a href="http://www.mcran.com" target="_self"><b>HOME</b></a><br/>
<a href="http://www.mcran.com/bio-test-page.php" target="_self"><b>BIO</b></a><br/>
<a href="http://www.mcran.com/interviews.php" target="_self"><b>INTERVIEWS</b></a><br/>
<a href="http://www.mcran.com/playlistsshowtable.php" target="_self"><b>PLAYLISTS</b></a><br/>
<a href="http://www.mcran.com/2010-2006showstable.php" target="_self"><b>RADIO SHOWS</b></a><br/>
<a href="http://www.mcran.com/favorite-sites.php" target="_self"><b>RESOURCES</b></a><br/>
<a href="http://www.mcran.com/contact.php" target="_self"><b>CONTACT ME</b></a><br/>
<a href="http://www.mcran.com/ihtsb.php" target="_self"><b>IHTSB</b></a><br/>
<a href="http://www.mcran.com/thebennettarchives.php" target="_self"><b>BENNETT ARCHIVES</b></a><br/>
</div>

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • Trying to solve a spacing problem and am very hopeful I will find the correct answer!

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

I know how to get it on all pages of your site through the site tracking code. You'll have to add one line of code to each page, but once you do that, you will be able to change stuff in the menu from the site tracking code.

Do you want your custom menu to be something like the following site's menu?

http://www.crestviewah.com/

I designed that menu for them :)

I can make you a menu like that too if you want.

Kind regards,
Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I really like that menu!! Is it possible to have the ability to adjust the speed in which the menu displays?

That sounds great having all the code in the site tracking code. I don't mind adding the additional code to every page.

Thanks so much!!!!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Randy! :) Yes, it is possible to change the speed. That menu is very customizable. You can change every single color, speed, border-radius (rounded corners) and more.

Before I design your menu, could you answer the following questions:

- The color (HEX value) that you want your menu to be (You can pick a color on the Color Picker and get the HEX for it there)
- The color you want on rollover

Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan,

Menu: 88ADB3

Roll over: 34737D
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Okay, I'm making it! :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Great!! Thanks Nathan!!

Randy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Just wanted to give you an update - I'm almost done with it!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Great!!

Thanks Nathan!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan,

How is it going with the code?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Randy,

I'm so sorry for the wait! I'll post the codes below soon :-)

Kind regards,
Nathan
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Nathan

How is it going with the code?

Randy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow... I have been so busy with all of this other stuff that I forgot to finish it. I am truly sorry, Randy. I will post it soon. If you would like to contact me personally (this topic is getting pretty long!) you can do so by clicking here.

Kind regards,
Nathan