0

hi i have a problem with absolute positioning , i want max/min-width/height and centering for page that has background; this is my css code but doesent work for centering ... i need align body to center with this coditions

css code : 

body
 {
     position:absolute;
     font-family: "b nazanin","b roya", times new roman;
     font-size:16px;

         min-width:948px;
     min-height:550px;

     width:1280px;
     height:700px;


 }

html
{
     background: fixed -webkit-linear-gradient(red, blue); /* For Safari */
     background: fixed -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
     background: fixed -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
     background: fixed -webkit-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
     background: fixed linear-gradient(red, blue);

}
user3052570
  • 1
  • 1
  • 1
    Why would you position:absolute the body? Makes no sense. Anyway: http://stackoverflow.com/questions/6464592/how-to-align-entire-html-body-to-the-center – Mörre Nov 30 '13 at 16:51
  • 1
    It's fairly unusual to style the html element. Why not apply it to the body? – Pippin Nov 30 '13 at 16:57
  • @Mörre otherwise min/max width/height doesn't work :\ – user3052570 Nov 30 '13 at 17:08
  • @Pippin because body element has max/min for width and height – user3052570 Nov 30 '13 at 17:10
  • all the content sized by percent , If body is not absolute all the page will getting cluttered on resizing – user3052570 Nov 30 '13 at 17:20
  • well min-width is to prevent the children element from being cluttered. – Tom Chung Nov 30 '13 at 17:22
  • @user3052570 max height for body is... very strange at best. If you don't need to scroll you can do so without, and if you DO need to scroll you don't gain anything - now the scrollbars are within the abs. pos. body tag, no difference. You seriously need to reevaluate your approach IMHO. – Mörre Nov 30 '13 at 18:09
  • Why not use a div and position it with `margin: 0 auto;`? – Athoxx Nov 30 '13 at 19:43

3 Answers3

0

min-width, min-height are used only when width and height is dynamic.

Check it no http://jsfiddle.net/Ur6ZR/8/

body {
    font-family:"b nazanin", "b roya", times new roman;
    font-size:16px;
    outline:10px solid white;
    margin:0 auto;
    min-width:948px;
    min-height:550px;
    width:100%;
    height:100%;
}
html {
    background: fixed -webkit-linear-gradient(red, blue);
    background: fixed -o-linear-gradient(red, blue);
    background: fixed -moz-linear-gradient(red, blue);
    background: fixed -webkit-linear-gradient(red, blue);
    background: fixed linear-gradient(red, blue);
}

See if it can help you.

Tom Chung
  • 1,364
  • 8
  • 11
  • thank's for yout attention. it doesn't work for me . my bigest problem is the resizing of page cause content in body are sizing by percentage and absoulte positions , that's cause i use absolute for body- otherwise page on resizing getting cluttered – user3052570 Nov 30 '13 at 17:31
  • then why not directly use width:948px;height:550px;? – Tom Chung Nov 30 '13 at 17:33
  • so if i use absolute body with directly sizing how can i show body in center of the page for bigger screens ? – user3052570 Nov 30 '13 at 17:56
  • Add this to body,left:50%;margin-left:-474px; – Tom Chung Nov 30 '13 at 17:59
0

For centering the body, you just need this :

body{
     margin:0 auto;
     width:1000px;
}

This code works fine and with all browsers (Firefox, Chrome, IE[7-11], Opera(Presto too)). You not need nothing more (for this aim).
This code is an example. So, maybe you will need to make some (little) adjustment.

You shouldn't use position:absolute. This a bad way. Such as Mörre says, it doens't make a sense also to me. And I advice you also to reevaluate your approach. The position:absolute could be useful sometimes but for this case it's totally useless.

Wagner_SOFC
  • 129
  • 4
0

Your probably better off using a <div> instead. Formatting the <html> tag is usually discouraged.

CSS: 

body {
    background: fixed -webkit-linear-gradient(red, blue); /* For Safari */
    background: fixed -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: fixed -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: fixed -webkit-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: fixed linear-gradient(red, blue);
    border: 0; /* removes the default body border */
    font-family: 'b nazanin', 'b roya', Times New Roman;
    font-size: 18px;
}

div /* replace with the elements class */ {
    height: 700px;
    margin: auto; /* will cause the element to be center aligned */
    /* min-height and min-width are useless with a fixed height and width */
    width: 1280px;
}

And if you want a page with the content centered try this:

body {
    border: 0;
}

.wrapper {
    margin: auto;
    width: 960px; /* 960px is probably the max width you would want to use */
}

The Html would look like this:

<body>
    <div class="wrapper">
        <!-- content -->
    </div>
</body>
Bondanr
  • 19
  • 4