CODEWITHSUNDEEP
htmlcsssizescreen
Mc Donald
Mc Donald

Reputation: 1

position a web page in the center for all screen size

I am using HTML and CSS. I can't display all of my content in the middle of the screen for varying display sizes. I have attempted to use % in place of PX but it's unsuitable for small screen size such as 800*600 pixels. Also I have performed web searches but my lack of in-depth knowledge of HTML is hindering my progress. my code is this:

<style type="text/css">
#Line5
{
   color: #7B7BC0;
   background-color: #7B7BC0;
   border-width: 0px;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #8B8B00 solid;
   padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>

can someone correct this piece of code for me?

Upvotes: 0

Views: 4015

Answers (5)

Mc Donald
Mc Donald

Reputation: 1

i thank all those who helped me. Problem was solved by adding the following code.

    <style type="text/css">
    div#container
    {
       width: 990px;
       position: relative;
       margin-top: 0px;
       margin-left: auto;
       margin-right: auto;
       text-align: left;
    }
    ....
    .....
    ........
    <body>
    <div id="container">
    ...
    ....

Thank you so much that help a rookie !

Upvotes: 0

Richard Shi
Richard Shi

Reputation: 625

Also not quite sure what you're asking for. I'm interpreting it as you wanting the div to be centered vertically and horizontally, so that's what I'm going for.

HTML

<div id="wb_Text1">
    <b>SAMPLE TEXT</b>
</div>

CSS

body {
    height: 100%; 
    width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
    height: 93px; //or whatever height you want
    width: 300px; //or whatever width you want (can be in %)
    background-color: #7B7BC0;
    border: 0px;
    padding: 0px;
    font: 32px Arial;
    line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
    color: #fff;
    text-align:center;
    margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
    margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}

Here's what's happening inside the calc():

50% gives you half the total height of the page,

46.5px is half of the div's height, which in this case is 93,

50% - 46.5px gives you the amount of space needed to center the div vertically

Fiddle here: http://jsfiddle.net/Shiazure/hA9KB/

Upvotes: 0

Sam
Sam

Reputation: 1643

Not clear about your question but I think Either of the examples below could work for you ; if you want it to be standards compliant, use this in your stylesheet:

body { 
text-align:center; 
} 
#mainContainer { 
margin:0 auto; 
}

the body thing makes it work in IE, the margin:0 auto; makes it center in most other browsers.

you might have to go in and reset some of your main containers to text-align:left; because the body text-align:center sometimes cascades down into the site content, but you can counteract that by adding

text-align:left; 
to #mainContainer

Or, There may be better methods, but this works in all browsers so far :

body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}

or set body width to 100% and then just make a container div for your page

#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}

Upvotes: 0

Pramod
Pramod

Reputation: 716

Here updated code and its working fine.

<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>

Upvotes: 0

Anup
Anup

Reputation: 9748

Don't know what your desired output is like. But check this out.

Click Here for Demo

<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>

Upvotes: 1

Related Questions