SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering web page with shared borders

    Hello,

    I'm having a problem with centering a web page in a browser. I use shared left and top borders in FrontPage. Somehow I centered my top border with <center></center> tags but my left border doesn't work that way. I use an expandable .js navigation menu with rollover images in my left border. Could anybody please give me an advice on how to center a web page with shared borders?

    Thanks in advance.

  2. #2
    SitePoint Guru babyboy808's Avatar
    Join Date
    Nov 2004
    Location
    dublin
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You can use css to accomplish this if needed. or a basic center div such as
    <div align="center"> My Content </div>

    If you want the CSS, just shout,
    Cheers

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by babyboy808
    Hi,

    You can use css to accomplish this if needed. or a basic center div such as
    <div align="center"> My Content </div>

    If you want the CSS, just shout,
    Cheers
    I'm not very familiar with building css, thus all my style settings are in my html files. I tried to use <div align="center"></div> tag in my shared left and top borders but it doesn't work. I have two separate files for _borders, left.htm and top.htm. My html page content does center with div tag but my borders still align to left. How can I align my borders to the center?

    Thanks.

  4. #4
    SitePoint Guru babyboy808's Avatar
    Join Date
    Nov 2004
    Location
    dublin
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You are using frames.

    Can you post the code please...

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a code of my left.htm which is shared for all of my pages:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="Content-Language" content="en-us">
    <title>Left Navigation Border</title>
    <meta name="GENERATOR" content="FrontPage">
    <meta name="ProgId" content="FrontPage">

    <style type="text/css">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:;
    color:#000000;
    width:140px;
    padding:2px;
    text-align:center;
    font-weight:bold;
    /*/*/border:;/* */
    }

    .submenu{
    margin-bottom: 0.5em;
    }
    </style>

    <script type="text/javascript">

    var persistmenu="yes"
    var persisttype="sitewide"
    if (document.getElementById){
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }

    function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span");
    if(el.style.display != "block"){
    for (var i=0; i<ar.length; i++){
    if (ar[i].className=="submenu") ar[i].style.display = "none";
    }
    el.style.display = "block";
    }else{
    el.style.display = "none";
    }
    }
    }

    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 onloadfunction(){
    if (persistmenu=="yes"){
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=get_cookie(cookiename)
    if (cookievalue!="")
    document.getElementById(cookievalue).style.display="block"
    }
    }

    function savemenustate(){
    var inc=1, blockid=""
    while (document.getElementById("sub"+inc)){
    if (document.getElementById("sub"+inc).style.display=="block"){
    blockid="sub"+inc
    break
    }
    inc++
    }
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
    document.cookie=cookiename+"="+cookievalue
    }

    if (window.addEventListener)
    window.addEventListener("load", onloadfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", onloadfunction)
    else if (document.getElementById)
    window.onload=onloadfunction

    if (persistmenu=="yes" && document.getElementById)
    window.onunload=savemenustate

    </script>
    <!-- ImageReady Preload Script -->
    <script type="text/javascript">
    <!--

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    Home_over = newImage("images/Home-over.gif");
    Products_over = newImage("images/Products-over.gif");
    Services_over = newImage("images/Services-over.gif");
    Support_over = newImage("images/Support-over.gif");
    preloadFlag = true;
    }
    }

    // -->
    </script>
    <!-- End Preload Script -->

    <meta name="Microsoft Theme" content="">
    <style fprolloverstyle>A:hover {font-weight: bold}
    </style>
    </head>

    <body onload="preloadImages();" style="background-image: url('images/left_nav.gif')" background="../images/left_nav.gif" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0"
    marginheight="0">
    <br><table border="0" cellpadding="0" style="border-collapse: collapse" width="157" id="table1"><tr>
    <td width="157" align="center">
    <!-- Search -->
    <form method="GET" action="search" target="_blank" style="text-align: center; word-spacing: 0; text-indent: 0; line-height: 100%; font-size: 8pt; margin: 0">
    <p style="text-align: left; margin-bottom: 0; margin-top:0"><font size="-2" face="arial, helvetica">
    <input type="text" name="p" size="11"
    style="text-align: left; word-spacing: 0; text-indent: 0; line-height: 100%; font-size: 11px; margin-left:5; margin-right:0; margin-top:0; margin-bottom:0"><input type="hidden" name="fr"
    value="yscpb"> <input type="submit" value="Search" style="font-size: 11px; text-align: center; word-spacing: 0; text-indent: 0; line-height: 100%; margin: 0"><br><font size="-2" face="arial, helvetica">
    <input type="radio" name="vs" value id="ysvs0" style="vertical-align: middle" checked><label for="ysvs0">Search the web</label></font></p>
    <p style="text-align: left; margin-top: 0; margin-bottom:0"><font size="-2" face="arial, helvetica"><input type="radio" name="vs" id="ysvs1" style="vertical-align: middle" value="site.com"><label
    for="ysvs1" style="margin-right: 25px">Search this site</label></p></font></td>
    </tr>
    </table>
    </form>
    <!-- End Search -->
    <p></p>
    <div id="masterdiv">
    <div class="menutitle" onclick="SwitchMenu('sub1')">
    <p style="margin-top: 0; margin-bottom: 0"><a href=""><img name="Home" src="images/Home.gif" width="128" height="21" border="0" alt=""
    onmouseover="changeImages('Home-over', 'images/Home-over.gif'); return true;" onmouseout="changeImages('Home-over', 'images/Home-over.gif'); return true;"
    onmousedown="changeImages('Home-over', 'images/Home-over.gif'); return true;" onmouseup="changeImages('Home-over', 'images/Home-over.gif'); return true;"
    longdesc="Home"></a>&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div class="menutitle" onclick="SwitchMenu('sub2')">
    <p style="margin-top: 0; margin-bottom: 0"><img name="Products" src="images/Products.gif" width="128" height="21" border="0" alt=""
    onmouseover="changeImages('Products', 'images/Products-over.gif'); return true;" onmouseout="changeImages('Products', 'images/Products.gif'); return true;"
    onmousedown="changeImages('Products', 'images/Products-over.gif'); return true;" onmouseup="changeImages('Products', 'images/Products-over.gif'); return true;"></div>
    <p style="margin-left: 10px; margin-top: 0; margin-bottom: 0" align="left"><span class="submenu" id="sub2"><font color="#CC3300">- </font><font face="Gautami" size="2">
    <a href""><font color="#CC3300">Product1</font></a></font><font color="#CC3300"><br>- </font><font face="Gautami" size="2">
    <a href""><font color="#CC3300">Product2</font></a></font><font color="#CC3300"><br>- </font><a href="">
    <font color="#CC3300" face="Gautami" size="2">Product3</font></a><font color="#CC3300"><br>- <a href=""><font color="#CC3300" face="Gautami"
    size="2">Product4<br><span style="text-decoration: none">&nbsp;&nbsp;&nbsp; </span></font></a><br>- <a href=""><font color="#CC3300"
    face="Gautami" size="2">Product5<br><span style="text-decoration: none">&nbsp;&nbsp;&nbsp; </span></font></a></font></span></p>
    <font color="#CC3300">
    <div class="menutitle" onclick="SwitchMenu('sub3')">
    <p style="margin-top: 0; margin-bottom: 0"><img name="Services" src="images/Services.gif" width="128" height="21" border="0" alt=""
    onmouseover="changeImages('Services', 'images/Services-over.gif'); return true;" onmouseout="changeImages('Services', 'images/Services.gif'); return true;"
    onmousedown="changeImages('Services', 'images/Services-over.gif'); return true;" onmouseup="changeImages('Services', 'images/Services-over.gif'); return true;"></div>
    <p style="margin-left: 10px; margin-top: 0; margin-bottom: 0"><span class="submenu" id="sub3">- <font face="Gautami" size="2"><a href="">
    <font color="#CC3300">Services<br><span style="text-decoration: none">&nbsp;&nbsp;&nbsp; </span>Design</font></a></font></span></p>
    <div class="menutitle" onclick="SwitchMenu('sub4')">
    <p style="margin-top: 0; margin-bottom: 0"><img name="Support" src="images/Support.gif" width="128" height="21" border="0" alt=""
    onmouseover="changeImages('Support', 'images/Support-over.gif'); return true;" onmouseout="changeImages('Support', 'images/Support.gif'); return true;"
    onmousedown="changeImages('Support', 'images/Support-over.gif'); return true;" onmouseup="changeImages('Support', 'images/Support-over.gif'); return true;"></div>
    <p style="margin-left: 10px; margin-top: 0; margin-bottom: 0"><span class="submenu" id="sub4">- <font face="Gautami" size="2"><a href=""><font color="#CC3300">Support1</font></a></font><br>- <font face="Gautami" size="2"><a href=""><font color="#CC3300">Support2</font></a></font><br>- <font face="Gautami" size="2">
    <a href=""><font color="#CC3300">Support3</font></a></font><br>- <font face="Gautami" size="2">
    <a href=""><font color="#CC3300">Contact</font></a></font></span></p>
    </div>
    </font>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •