Hi all; I'm having difficulty with the placement of two objects on a web page. One is a "Flag Counter" and the other is a webring "Nav Bar". I simply want the Flag Counter on the left and the Nav Bar the same height, on the right. I would be very much obliged if one of you knowledgeable folks could alter the code to my humble web page to achieve my objective.

If you wish to see the page in question, it's shrrms.com

Thank You in advance for any help received. Robert M Sharpe

  • erm, put them both in the same table? it's been a long time since I worked with html like yours. Tony Crockford about 7 years ago
  • Hi Tony! I have no clue what you mean to put them in the same table? I can't seem to place the navbar any other place but center. Robert M Sharpe about 7 years ago
  • Are using Microsoft Word to make the page? Tony Crockford about 7 years ago
  • Yes Tony, 7 or 8 years ago. Robert M Sharpe about 7 years ago
  • what are you using now? i.e. can you edit the html directly? if so I'll have a stab at a suggested change for you. Tony Crockford about 7 years ago
  • I edit the html directly, but my knowledge of html is basic. I can make the flag counter position on the left side of the page, however I can't move the nav bar from the center position. Robert M Sharpe about 7 years ago

3 answers

danwellman 5600
0
points
This was chosen as the best answer

Hi Robert,

Ok, first of all, the nav bar is in a <center> tag, which is deprecated. Using this element will force the nav bar to be in the center of the page, which it is. You;ll need to replace this with a <div> element instead. Give this <div> an id of 'nav' and then use the following CSS:

#nav { width:352px; float:left; margin-right:100px; }

Next give the <p> that follows the nav bar an id of 'flag' and use the following CSS:

#flag { width:372px; float:left; }

This will make the two boxes stack up next to each other and the right margin on the first element will spae them out a little. This will make both boxes float as far left as they can, so the first box will then be flush up against the left of the page, but we can easily fix this too - all you need to do is put both the nav box and the flag box into a single container <div> (that encapsulates both boxes), give this an id of 'boxContainer' and use the following CSS:

#boxContainer { width:822px; margin:auto; }

That should then center the container of the two boxes.

If you're interested in making accessible, clean code you should consider updating your DOCTYPE from HTML 3.2 (stopped being effective like a decade ago) and use the current HTML 4.01 instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Also consider validating your code, currently it has many warnings and errors

Answered about 7 years ago by danwellman
  • Thanks for the advice Dan; I will save your answer and keep the page the way it is for now; I'm grateful the site still even works allowing me to share some of my works to those who are interested. Robert M Sharpe about 7 years ago
1
point

try adding this and removing the appropriate old bits:

<div id="wrapper" style="margin: 0 auto; width: 90%">
    <div class="col1" style="width: 40%; float: left">
        <script type="text/javascript"
        src="http://ss.webring.com/navbar?f=j;y=shrrms;u=defurl"></script>
        Powered by <a href="http://dir.webring.com/rw" target=_top>WebRing</a>.</center>

        <!--optional-->
        <noscript><center><table bgcolor=gray cellspacing=0 border=2 bordercolor=red>
        <tr><td><table cellpadding=2 cellspacing=0 border=0><tr><td align=center>
        <font face=arial size=-1>This site is a member of WebRing. 
        To browse visit <a href="http://ss.webring.com/navbar?f=l;y=shrrms;u=defurl">
        here</a>.</font></td></tr></table></td></tr></table></center></noscript>
    </div>
    <div class="col2" style="width: 40%; float: right">
        <a href="http://s04.flagcounter.com/more/FmjF">
            <img src="http://s04.flagcounter.com/count/FmjF/bg=FFFFCC/txt=000000/border=F50C0C/columns=4/maxflags=36/viewers=Page+Visitors+Since+23+July+2009/labels=1/" alt="free counters" border="0"></a>
    </div>
</div>
Answered about 7 years ago by Tony Crockford
0
points

I will give it a shot and see what happens! Thank You for Your time spent on My issue. Robert

Answered about 7 years ago by Robert M Sharpe
  • Tony, the code works! I just need to play with it a bit. Thanks again for your time. Robert M Sharpe about 7 years ago