Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

center contence of a restored window

Options
  • 20-06-2007 3:55pm
    #1
    Registered Users Posts: 36


    im using margin on left and right in my style sheet to centre the contence of my page, but when i restore down the window, i can c more space on the left than right.

    any suggestions how to fix this
    thanks


Comments

  • Registered Users Posts: 3,594 ✭✭✭forbairt


    Hmm... is this just a case of the sidebar popping up ... ? when you're making it smaller ? or have you an example of your code/link ?


  • Registered Users Posts: 36 or89


    some of my style sheet and screen shot of screen when its not at full size

    <style type="text/css">
    html, body{ height:100%;
    min-height:100%
    }

    #container{
    min-height:100%;
    height: auto;
    width:770px;
    margin-left:10%;
    margin-right:10%;
    }

    #content { width:770px;
    padding-bottom:15%;
    padding-top:2%;
    margin-bottom:5px;
    margin-left:100px;
    margin-right:100px;
    min-height:100%;
    }

    * html #container{
    height:100%;
    }

    #footer { width:770px;
    text-align:center;
    margin:0 100px;
    height:100px;
    border-top: #999999 dotted thin; PADDING-LEFT: 7px; FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; PADDING-TOP: 7px; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none; text-align:center; font-style:italic
    }

    /*
    main menu
    */
    #menu { height:29px; width:770px; background-color:#FFFFFF; border-bottom:#999999 solid 1px; margin-left:100px; margin-right:100px
    }

    #title { text-align:left; height:29px; width:180px; float:left; FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #932222; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }

    #rightMenu { text-align:right; height:29px; width:590px; background-color:#FFFFFF; float:right; padding-top:5px
    }

    .divisionlink {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:link {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:visited {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:hover {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #ec8026; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:active {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }


    </style>
    <script type="text/javascript">


  • Registered Users Posts: 36 or89


    if i add in <centre> tags i get the following screen shot, if i remove the following it centres, but then the footer does not stay at the end anymore

    <script type="text/javascript">
    function resizer(){
    iHeight = 0;

    if( typeof window.innerHeight != "undefined" ) {
    iHeight = window.innerHeight;
    }

    if( typeof document.documentElement.clientHeight != "undefined" ) {
    iHeight = ( document.documentElement.clientHeight > iHeight ) ? document.documentElement.clientHeight : iHeight;
    }

    if( typeof document.getElementsByTagName( "body" )[ 0 ].clientHeight != "undefined" ) {
    iHeight = ( document.getElementsByTagName( "body" )[ 0 ].clientHeight > iHeight ) ? document.getElementsByTagName( "body" )[ 0 ].clientHeight : iHeight;
    }

    div = document.getElementById( "footer" );
    iTop = div.offsetTop;
    d = div;
    while( d = d.offsetParent ) {
    iTop += d.offsetTop;
    }

    div = document.getElementById( "footer" );
    div.style.position = "absolute";
    if( iHeight > iTop ) {
    div.style.top = ( iHeight - ( 125 + div.style.height ) ) + "px";
    }

    div.style.display = "block";
    }
    </script>


  • Registered Users Posts: 3,594 ✭✭✭forbairt


    Hmm ... I'd need to see the actual full code to be of much use ..

    I'm guessing your container is just inside the body ?

    What I don't like about this is you're giving it fixed margins of 100px ...

    try giving it a margin ...
    margin: 0 auto 5px auto; 
    

    My guess is fixed width margins are going to cause problems as I'm viewing at 1650 width here ... 770px + 100px + 100px = 970px ... so possibley you're using a center tag .. but I'd advise against that

    Edit: you've got a couple of margins in there .. which are confusing me actually .. the #container has margins which in my opinion should be
    margin: 0 auto 0 auto;
    

    Then your #content should have no side margins ...


  • Registered Users Posts: 36 or89


    home.asp

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html, body{ height:100%;
    min-height:100%
    }

    #container{
    min-height:100%;
    height: auto;
    width:770px;

    }

    #content { width:770px;
    padding-bottom:15%;
    padding-top:2%;
    margin-bottom:5px;
    margin-left:100px;
    margin-right:100px;
    min-height:100%;
    }

    * html #container{
    height:100%;
    }

    #footer { width:770px;
    text-align:center;
    margin:0 100px;
    height:100px;
    border-top: #999999 dotted thin; PADDING-LEFT: 7px; FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; PADDING-TOP: 7px; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none; text-align:center; font-style:italic;
    }

    /*
    header
    */
    #header { width:770px;
    text-align:center;
    margin:0 100px;
    height:100px
    }

    #topOfHeader { float:left;
    width:568px;
    height:65px;
    }

    #topLinks{ text-align:left; float:left;
    width:568px;
    height:10px;
    background-color:#FFFFFF
    }

    #imageHeader{ float:left;
    width:568px;
    height:55px;
    background-color:#FFFFFF
    }

    #NameAndLogo{float:right;
    width:202px;
    height:65px;
    background-color:#FFFFFF;
    }

    #novartisName{float:right;
    width:170px;
    height:65px;
    background-color:#FFFFFF
    }

    #logo{float:left;
    width:30px;
    height:65;
    background-color:#FFFFFF
    }

    #PathHeaderbar { width:770px;
    height:25px;
    background-color: #7c6756;
    float:left; margin-top:3px; text-align:left
    }

    #theColorBar{ width:770px;
    height:7px;
    float:left;
    }

    .pathHeaderBar { color: #FFFFFF; font-size:8px; text-decoration:none
    }

    a.pathHeaderBar: hover { color: #FFFFFF; font-size:8px; text-decoration:underline
    }

    .divisionlink {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:link {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:visited {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:hover {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #ec8026; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:active {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }

    /*
    main menu
    */
    #menu { height:29px; width:770px; background-color:#FFFFFF; border-bottom:#999999 solid 1px; margin-left:100px; margin-right:100px
    }

    #title { text-align:left; height:29px; width:180px; float:left; FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #932222; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }

    #rightMenu { text-align:right; height:29px; width:590px; background-color:#FFFFFF; float:right; padding-top:5px
    }

    .divisionlink {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:link {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:visited {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:hover {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #ec8026; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.divisionlink:active {
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }

    .quicklinks {
    FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: underline
    }
    A.quicklinks:link {
    FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.quicklinks:visited {
    FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.quicklinks:hover {
    FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #ec8026; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }
    A.quicklinks:active {
    FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #999999; FONT-FAMILY: Verdana, arial,Helvetica; TEXT-DECORATION: none
    }

    </style>
    <script type="text/javascript">
    function resizer(){
    iHeight = 0;

    if( typeof window.innerHeight != "undefined" ) {
    iHeight = window.innerHeight;
    }

    if( typeof document.documentElement.clientHeight != "undefined" ) {
    iHeight = ( document.documentElement.clientHeight > iHeight ) ? document.documentElement.clientHeight : iHeight;
    }

    if( typeof document.getElementsByTagName( "body" )[ 0 ].clientHeight != "undefined" ) {
    iHeight = ( document.getElementsByTagName( "body" )[ 0 ].clientHeight > iHeight ) ? document.getElementsByTagName( "body" )[ 0 ].clientHeight : iHeight;
    }

    div = document.getElementById( "footer" );
    iTop = div.offsetTop;
    d = div;
    while( d = d.offsetParent ) {
    iTop += d.offsetTop;
    }

    div = document.getElementById( "footer" );
    div.style.position = "absolute";


    if( iHeight > iTop ) {
    div.style.top = ( iHeight - ( 125 + div.style.height ) ) + "px";
    }


    }
    </script>

    <%
    dim theTitle
    theTitle="HomePage"
    %>

    <!--#include file="../includes/theHead.asp" -->

    </head>


    <body onload="resizer();">

    <center>
    <SCRIPT type=text/javascript>
    <!--
    var theForm = document.forms;
    if (!theForm) {
    theForm = document.aspnetForm;
    }
    function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    theForm.__EVENTTARGET.value = eventTarget;
    theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
    }
    }
    // -->
    </SCRIPT>

    <div id="container">

    <%
    session("page_Link_from_help") = "http://phieri-s2018/sitePhilip/home/copg_home.asp&quot;
    %>

    <%
    session("page_Link") = "http://phieri-s2018/sitePhilip/home/copg_home.asp&quot;
    session("page_Name") = "Home"
    %>

    <!--#include file="../includes/header.asp" -->

    <div id="menu">


    <div id="title">Homepage</div>

    <div id="rightMenu">
    <p class="divisionlink">
    <a class=quicklinks href="http://phieri-s2018/site/home/cop_admin_home.asp">Administration</a&gt; | 
    <a class=quicklinks href="http://phieri-s2018/site/home/cop_pipe_home.asp">Pipelines </a> | 
    <a class=quicklinks href="http://phieri-s2018/site/home/cop_reports_home.asp">Reports </a>
    </p>
    </div>

    </div>

    <div id="content">

    <p>Cork City F.C. is an Irish football (soccer) club playing in the Football League of Ireland. Founded and elected to the league in 1984 to continue the long tradition of Association Football in Cork, it's traditional colours are green and white with red trim. It was one of the first clubs in Ireland to field a team of professional footballers and certainly the first in Cork. With this and further professionalism being implemented off the field, their home stadium Turner's Cross due to become Ireland's first all-covered, all-seated soccer ground in 2008, and the development of a specialised training facility for the club on the banks of the River Lee, Cork City F.C. are rising in popularity among the sports-fanatical Cork public.
    </p>

    </div>

    <!--#include file="../includes/contactA.asp" -->

    <!--#include file="../includes/footer.asp" -->

    </div>
    </center>
    </body>
    </html>


    =======================================================
    footer.asp

    <div id="footer">
    <center>
    <p>AIT Dep.</p>
    <p>Last update 09/06/2004.</p>


    <p>For more information contact
    <a href=
    <%
    response.write( email )
    %>
    >
    <%
    response.write( name )
    End Sub
    GetInfo()
    %>
    </a>
    </p>
    <span id=ctl00_LblCopyright> 2006 Company Ltd.</span>
    </center>
    </div>


    =================================================

    header.asp

    <div id="header">

    <div id="topOfHeader">

    <div id="topLinks">
    <%
    gotName = session("page_Name")
    gotLink = session("page_Link")
    %>
    <a class=divisionlink href=
    <%
    response.write( gotLink )
    %>
    >
    <%
    response.write( gotName )
    %>
    </a>
    <b class="divisionlink">|</b>
    <a class=divisionlink href="http://www.company.com/">company.com</a&gt;
    <b class="divisionlink">|</b>
    <a class=divisionlink href="http://www.intra/">Intranet</a&gt;
    <b class="divisionlink">|</b>
    <a class=divisionlink href="http://logout/copg_logout.asp">logout</a&gt;
    <b class="divisionlink">|</b>
    <a class=divisionlink name="tooltip" href="http://home/copg_about_home.asp&quot; title='Version: 1.1.0 (Build Date: 28.06.2007)'>About</a>
    <b class="divisionlink">|</b>
    <a class=divisionlink name="tooltip" href="#" title='Version: 1.1.0 (Build Date: 28.06.2007)'>Version</a>
    <b class="divisionlink">|</b>
    <b class=divisionlink style="color:#f8b213">You are logged in as: <%=Ucase(Session("MM_Username"))%></b>
    </div>

    <div id="imageHeader"><img align="left" src="../images/copgtool2.JPG"></div>

    </div>

    <div id="NameAndLogo">
    <div id="Name"><img src="../images/m_text.gif" width="164" height="64" align="left"></div>
    <div id="logo"><img src="../images/m_logo.gif" width="26" height="62" align="left"></div>
    </div>

    <p>
    <div id="theColorBar">
    <table>
    <tr>
    <td height="7" bgcolor="#e74b10" width="597px" style="float:left"></td>
    <td height="7" bgcolor="#f8b213" width="170px"></td>
    </tr>
    </table>
    </div>

    <div id="PathHeaderbar">
    <p style="color:#FFFFFF">
    <a style="color: #FFFFFF; font-size:11px; text-decoration:none" href=
    <%
    response.write( gotLink )
    %>
    >
    <%
    response.write( gotName )
    %>
    </a> 
    <%
    For i=0 to size - 2
    %>
    >
    <a style="color: #FFFFFF; font-size:11px; text-decoration:none" href=
    <%
    response.write( links(i) )
    %>
    >
    <%
    response.write( linkName(i) )
    %>
    </a> 
    <%
    Next
    %>
    </p>
    </div>
    </p>

    </div>


    ====================================================

    theHead.asp

    <%
    Response.write("<title>"& theTitle &"</title>")
    %>

    <script language=javascript>
    //the following fixes an image flicking problem that occurred
    //on IE6 when there are images referenced within the css file
    try {
    document.execCommand("BackgroundImageCache", false, true);
    } catch(err) {}
    </script>




    <!--
    style sheets
    -->
    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <META content="MSHTML 6.00.2900.2914" name=GENERATOR>


  • Advertisement
Advertisement