<a href="https://bytes.com/topic/html-css/answers/873385-content-remain-middle-page">content remain middle of the page

8,658

Expert Mod 8TB

basic pattern:

Expand|Select|Wrap|Line Numbers

 div#my_id {

    width: 500px; /* or whatever is appropriate */

    margin: auto;

}

Aug 27 '09 #2

245

100+

Thanks for replying. I apply that property on my container named as #container but it is not working. Plz find my code and CSS Code. May be it will more help out to sort out my problem

Here is my HTML Source

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Div</title>

        <link type="text/css" rel="stylesheet" href="includes/styles.css" />

        <script type="text/javascript">

        <!--

        function MM_swapImgRestore() { //v3.0

          var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

        }

        function MM_preloadImages() { //v3.0

          var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

        }

        function MM_findObj(n, d) { //v4.01

          var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

            d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

          if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

          for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

          if(!x && d.getElementById) x=d.getElementById(n); return x;

        }

        function MM_swapImage() { //v3.0

          var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

           if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

        }

        //-->

        </script>

    </head>

    <body onload="MM_preloadImages('images/vision-active.png','images/history-active.png','images/mission-active.png','images/home-active.png','images/about-active.png','images/portfolio-active.png','images/services-active.png','images/contact-active.png')">

    <!--start container-->

    <div id="container">

        <div id="error-fzf">

            <div id="general">

                <div id="general-left">

                    <div style="text-align:right;" class="heading"><img src="images/imagine-a-design-logo.png" width="212" height="183" alt="Image a Design" title="Image a Design" /></div>

                </div>

                <div id="general-right">

                    <div><img src="images/spacer.gif" width="1" height="70" alt="" /></div>

                    <div><img src="images/oops-error-404.png" width="203" height="18" border="0" alt="OOOPS! ERROR 404" title="OOOPS! ERROR 404" /></div>

                    <div><img src="images/spacer.gif" width="1" height="5" alt="" /></div>

                    <div><img src="images/bottom-line-small.png" width="302" height="2" border="0" alt="" /></div>

                    <div><img src="images/spacer.gif" width="1" height="5" alt="" /></div>

                    <div class="text-gray-10">You found this page becouse you somehow found a<br />page that doesn’t exist. Weird?</div>

                    <div><img src="images/drop-shadow.png" width="227" height="20" border="0" alt="" /></div>

                </div>

            </div>

            <div class="fixer">&nbsp;</div>

           </div>

          <? include("bottom-menu.php");?>

    </div>

    <!--end container-->

    </body>

</html>

and this my CSS

Expand|Select|Wrap|Line Numbers

 
@charset "utf-8";

/* CSS Document */

body{

    margin:0px;

    margin-top:100px;

    padding:0px;

    background:url(../images/img-01.png) top left;

}

form{margin:0px;}

img{border:0px;}

#container{

    width:954px;

    font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

    font-size:13px;

    color:#666666;

    margin:0px auto;

    position:relative;

}

#error-fzf{

    height:225px;

    clear:both;

    padding: 0px 5px 10px 10px;

}

#body{

    background-image:url(../images/img-02.png);

    height:602px;

    clear:both;

    padding: 0px 5px 10px 10px;

}

#body a { font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:13px; color: #61C2D2; text-decoration:underline;}

#body a:link {text-decoration: underline;}

#body a:visited { text-decoration: underline; color: #61C2D2;}

#body a:hover {text-decoration: none; color: #61C2D2;}

#body a:active {text-decoration: underline; color: #61C2D2;}
 
#general{ clear:both; padding-top:10px;}

#general #general-left{

    float:left;    

    width:460px;

}

#general #general-right{

    float:right;

    width:478px;

}

#general .heading{

    height:24px;

}

#general .subheading{

    height:19px;

}

#general .text-gray-10{

    font-family: Arial, Helvetica, sans-serif;

    font-size:10px;

    color: #A2A2A2;

}

#general .text-orange-10{

    font-family: Arial, Helvetica, sans-serif;

    font-size:10px;

    color: #FE6400;

}

#general .ul-customised{

    padding-left: 15px;

    margin-left: 0px;

    list-style-image:url(../images/bullet.png);

}

#general .ul-customised li{

    line-height:20px;

}

#general .contactus-padding-15{

    padding-left:15px;

}

.general-input{

    width:435px;

    border:1px #181818 solid;

    background-color:#141414;

    font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

    font-size:12px;

    color: #474747;

    padding-left:10px;

    padding-right:10px;

    height:20px;

}

.general-textarea{

    width:355px;

    border:1px #181818 solid;

    background-color:#141414;

    font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

    font-size:12px;

    color: #474747;

    padding-left:10px;

    padding-right:10px;

}

#contact{ clear:both;}

#contact #contact-left{

    float:left;    

    width:350px;

}

#contact #contact-right{

    float:right;

    width:85px;

}

#bottom-menu{

    clear:both;

    padding: 0px 0px 10px 0px;

}

#bottom-menu #bottom-menu-left{

    float:left;

    width:630px;

}

#bottom-menu #bottom-menu-right{

    float:right;

    width:324px;

}

.fixer {

    visibility: hidden;

    clear: both;

    display: block;

    font-size: 1px;

}

Aug 27 '09 #3

8,658

Expert Mod 8TB

@neovantage
it’s working for me (though I have to stretch my window quite some bit to see that), but I don’t use IE either…

Aug 27 '09 #4

245

100+

Well i am using Firefox Mozilla and it is not even working there too. :(

Aug 27 '09 #5

8,658

Expert Mod 8TB

I’m using FF 3.5 / Mac and it’s working fine, although 954px is quite some width.

Aug 27 '09 #6

245

100+

I am also using Firefox 3.5.2.
I think i cant explain you my problem. My Web page content is in center of the page. But i want to keep my data in the middle of the page too at any resolution.
i mean my data must not be at top position or bottom position of the page. I want it must remains at the middle of the page at any resolution. So is there any solution of it?

Aug 27 '09 #7

8,658

Expert Mod 8TB

tested the given link in Opera and Safari too, no problems. unless we have a different understanding of “in the middle of the page”.

EDIT:
and of course the window width must be larger than 1000px to see the effect at all.

Aug 27 '09 #8

245

100+

Plz fine the attached image. you will see that my content is not in the middle of the page(Browser window.

Attached Images

problem.jpg (10.5 KB, 334 views)

Aug 27 '09 #9

8,658

Expert Mod 8TB

@neovantage
you mean vertical aligned?

I think there you need to use negative margins, but I can’t remember exactly right now.

Aug 27 '09 #10

245

100+

Yeh vertical aligned that's what i mean. so how is that possible?

Aug 27 '09 #11

8,658

Expert Mod 8TB

there’s a bunch of options in this thread.

Aug 27 '09 #12

by: Catherine Lynn Wood | last post by:

I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references...

Help using CSS to position content to bottom of page

by: chris ciotti | last post by:

Hello all - I'm trying to position content at the bottom of a page (I'd like to anchor it there). The majority of the code was generated using Photoshop CS and then hand edited. I'm having...

master pages - header, content, footer

Collapsible Content?

by: clintonG | last post by:

Can somebody direct me to documents or source that supports the use of collapsible content that is collapsed by default when the page is loaded? The secondary objective would of course be...

Javascript

by: xkeops | last post by:

Thinking of creating a website, most of the pages will have a general toolbar menu, a content and a footer. The content will be the only one who's gonna change but the rest (header,footer) will...

ASP.NET

Layout Breaking Up With Stretchable Content

by: PB | last post by:

Hi, I need some CSS layout guidance because I think I've been staring at this too long! I designed my layout using Photoshop, then sliced everything up and saved as a CSS web page. My...

What is the offending non 'Content' control...?

by: =?Utf-8?B?am9uZWZlcg==?= | last post by:

I keep getting the message after I converted a regular aspx page to now be based on a master page: "Only Content controls are allowed directly in a content page that contains Content controls."...

ASP.NET

Possible Firefox CSS content problem - Refresh fixes it

by: autospanker | last post by:

Ladies and Gentleman, I have been having this problem that has been driving me insane. I have a website that when viewed in Firefox first, the content in the body area is pushed down. Then when...