Centering web page with shared borders

**condora** · Aug 7, 2006, 21:59

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.

**babyboy808** · Aug 8, 2006, 00:43

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

**condora** · Aug 8, 2006, 08:46

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.

**babyboy808** · Aug 8, 2006, 13:34

Hi,

You are using frames.

Can you post the code please...

**condora** · Aug 8, 2006, 14:09

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>

<script type="text/javascript">

</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">

<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>

<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>    
</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">    </span></font></a><br>- <a href=""><font color="#CC3300"
face="Gautami" size="2">Product5<br><span style="text-decoration: none">    </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">    </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>

The SitePoint Forums have moved.

User Tag List

Thread: Centering web page with shared borders

Thread Tools

Display

Centering web page with shared borders

Bookmarks

Bookmarks

Posting Permissions