36 users online (1 members and 35 guests)  


  Results 1 to 2 of 2

Related

  1. Css or html tables?    Forum: CSS Forum
    Replies: 1
  2. I dislike html tables    Forum: HTML Forum
    Replies: 2
  3. Replies: 6
  4. How do I align two or more HTML tables?    Forum: HTML Forum
    Replies: 6
  5. Aligning Text in Tables    Forum: HTML Forum
    Replies: 5
  1. #1
    MercyBreeze's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    1

    Quick Question

    Hey everyone!

    I've been getting more and more familiar with HTML over the past four or five months, but I don't do it everyday and from week to week as I work on building things, I don't always do the same thing. One aspect of HTML that I've never quite figured out is how to put images where I want them when it comes to putting them next to a table. I have duplicate images on each side of a javascript table and I can't get the three items (two images and the table) to center nicely without screwing up the rest of it. I've fiddled with it for some time, but perhaps you could take a look.

    This is the code that I've been using in the body for the section I'm trying to figure out:

    <img src="http://www.homeofmercy.com/images/bible.gif" align="left" HSPACE="145%" VSPACE="25%" width="100" height="100">
    <center>
    <script language="JavaScript">
    function goToURL() { history.go(-1); }
    </script>
    <style>
    .menu
    {
    background-color:#6699FF;
    border:1px solid black;
    width:150px;
    font-size:11px;
    font-family:verdana;
    position: absolute;
    font:bold;
    color: white;
    cursor: hand;
    }
    .item_panel
    {
    width:150px;
    border-left:1px solid black;
    border-right:1px solid black;
    clip:rect(0,150,0,0);
    position:absolute;
    }
    .item_panel a
    {
    text-decoration:none;
    color:black;
    cursor:hand;
    }
    .item
    {
    background-color: #E9F0F8;
    width: 148px;
    font-size: 10px;
    font-family: verdana;

    }
    </style>
    <script language="JavaScript">
    var height = 20; // height of the menu headers
    var iheight = 15; // height of the menu_items
    var bgc = "#E9F0F8" // background color of the item
    var tc = "black" // text color of the item
    var over_bgc = "white";
    var over_tc = "#004891";
    var speed = 0;
    var timerID = "";
    var N = (document.all) ? 0 : 1;
    var width = 152;
    var self_menu = new Array();
    function write_menu()
    {
    smc = 0; // count the position of the self_menu
    document.write("<div style='position:absolute'>");
    mn = 0;
    mni = 1;
    start = -1;
    for(i=0;i<Link.length;i++)
    {
    la = Link[i].split("|");
    if (la[0] == "0")
    {
    if(start == 0)
    {
    document.write("</div>");
    h = csmc * iheight;
    tmn = mn; //-h
    self_menu[smc] = new Array(tmn,h,0,-2);
    smc++;
    mn--;
    }
    csmc = 0;
    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
    }
    else
    {
    if(start == 1)
    {
    if(N)mn+=2;
    document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
    start = 0;
    }

    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
    csmc++;
    }
    }
    if (start == 0)
    {
    document.write("</div>");
    h = csmc * iheight;
    tmn = mn + 5; //-h
    self_menu[smc] = new Array(tmn,h,0);
    name = "down" + (self_menu.length-1);
    obj = document.getElementById(name);
    obj.style.borderBottomColor = "darkblue";
    obj.style.borderBottomWidth = 1;
    obj.style.borderBottomStyle = "solid";
    }
    document.write("</div>");}
    function color(obj)
    {
    document.getElementById(obj).style.backgroundColor = over_bgc;
    document.getElementById(obj).style.color = over_tc
    }

    function uncolor(obj)
    {
    document.getElementById(obj).style.backgroundColor = bgc;
    document.getElementById(obj).style.color = tc
    }

    function pull_down(nr,c)
    {
    if (timerID == "")
    {
    to = self_menu[nr+1][1]
    begin = nr + 2;
    if (timerID != "") clearTimeout(timerID);
    if (self_menu[nr+1][2] == 0)
    {
    self_menu[nr+1][2] = 1;
    if(nr == self_menu.length-2) {to++;}
    epull_down(begin,to,0);
    }
    else
    {
    to = 0;
    self_menu[nr+1][2] = 0;
    name = "down"+(nr+2);
    open_item = 0;
    for(i=0;i<nr;i++)
    {
    if(self_menu[i][2] == 1)
    {open_item += self_menu[i][1];
    }
    }
    if (N == false) {open_item-= (c*1)};
    if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
    else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
    epull_up(begin,to,val);
    }
    }
    }

    function epull_down(nr,to,nowv)
    {
    name = "down" + (nr-1);
    obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
    for (i=nr;i<self_menu.length;i++)
    {
    name = "down" + i;
    obj = document.getElementById(name);
    obj.style.top = parseInt(obj.style.top)+1;
    }
    nowv++;
    if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
    else timerID = "";
    }

    function epull_up(nr,to,nowv)
    {
    name = "down" + (nr-1);
    obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
    for (i=nr;i<self_menu.length;i++)
    {
    name = "down" + i;
    obj = document.getElementById(name);
    obj.style.top = parseInt(obj.style.top)-1;
    }
    nowv--;
    if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
    else timerID = "";
    }

    function startup(nr)
    {
    write_menu();
    if (nr != 0)
    {
    for(i=0;i<self_menu.length;i++)
    {
    if(self_menu[i][3] == nr) pull_down(i,nr)
    i==self_menu.length;
    }
    }
    }
    </script>
    <table width=150 align="left"><tr>
    <td>
    <script language="JavaScript">
    //Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)"
    var Link = new Array();
    Link[0] = "0|<center>Discussion Board</center>";
    Link[1] = "1|<center>Main Page</center>|http://homeofmercy.com/discussionboard/index.php?act=idx|";
    Link[2] = "1|<center>Register</center>|http://homeofmercy.com/discussionboard/index.php?act=Reg&CODE=00|";
    Link[3] = "1|<center>Introduce Yourself</center>|http://homeofmercy.com/discussionboard/index.php?showforum=3|";
    Link[4] = "0|<center>Forums</center>";
    Link[5] = "1|<center>Welcome Boards</center>|http://homeofmercy.com/discussionboard/index.php?c=2|";
    Link[6] = "1|<center>Encouragement Boards</center>|http://homeofmercy.com/discussionboard/index.php?c=3|";
    Link[7] = "1|<center>Discussion Boards</center>|http://homeofmercy.com/discussionboard/index.php?c=4|";
    Link[8] = "1|<center>Bored Boards</center>|http://homeofmercy.com/discussionboard/index.php?c=5|";
    Link[9] = "0|<center>Mercy's Movie Review</center>";
    Link[10] = "1|<center>The Passion of the Christ</center>|http://homeofmercy.com/discussionboard/index.php?showtopic=60&st=0&#entry114|";
    Link[11] = "0|<center>Helpful Links</center>";
    Link[12] = "1|<center>Concordance</center>|http://www.crosswalk.com|";
    Link[13] = "1|<center>Dictionary</center>|http://www.dictionary.com|";
    Link[14] = "0|<center>Latest Pictures</center>";
    Link[15] = "1|<center>West Coast Trip 2004</center>|http://www.homeofmercy.com/pictures.html|";
    Link[16] = "0|<center>Games</center>";
    Link[17] = "1|<center>Tic Tac Toe Challenge</center>|http://www.homeofmercy.com/tictactoe.html|";
    startup(1);
    </script>
    </td>
    </tr>
    </table>
    </center>
    <img src="http://www.homeofmercy.com/images/bible.gif" align="right" HSPACE="100%" VSPACE="25%" width="100" height="100">
    You can also find the larger link by going to www.homeofmercy.com/example.html to see how it does and does not align with the text above and below. I'm not sure what I'm doing wrong in the centering of it, so if anyone can help me fix the sloppiness, I'd be appreciative.

    Thanks,

    Mercy

  2. #2
    krak_d's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Mar 2004
    Location
    Liverpool
    Posts
    166
    Its the 'absolute' positioning of your JavaScript menu that is causing you problems not the html centering, although to be honest your code is in a bit of a mess to say the least.

    I suggest tidying it up http://validator.w3.org/ before doing anything else!

    krak_d



Tags for this Thread