Solved

Div Tag - Centre Horizontal and Vertical?

Posted on 2004-09-27
14
3,122 Views
Last Modified: 2013-11-19
Hi there,

I wonder if someone can help?

I have a Div Tag which is a holder for my page, its an entry page...

I am still quite new to CSS but gaining ground... I got the Horizontal working perfect...

But vertical won't center..

here is my CSS (external attached)..

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
}


the margin-left and margin-right set to auto ensures my horizontal works but the vertical is still stuck at the top of the screen..

While I am on the subject, does anyone know of any good books on CSS (postioning etc).. I got "more on eric meyer" but this really by example, i was looking for a reference type tutorial book. Most of what i have learnt is by playing around and reading stuff on the net....


Thanks again

Ian
0
Comment
Question by:ianinspain
  • 8
  • 5
14 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 12159169
If the div which is supposed to be centered has a fixed size, you could use:

<div id="container" style="position:relative;height:100%;width:100%:">
  <div id="centereddiv" style="position:absolute;top:50%;left:50%;height:200px;width:200px;
       margin-left:-100px;  /* -0.5 * width */
       margin-top:-100px;  /* -0.5 * height */
       ">
       this is a 200x200 div
   </div>
</div>

You could also use
<div style="display:table-cell;vertical-align:middle;text-align:center;">
 <div style="text-align:left;">
  centered
 </div>
</div>

Regards

-r-
0
 

Author Comment

by:ianinspain
ID: 12159373
Thanks for the info, but I thought the 50% didn't give a true center???

And also if i am not wrong ... it appears that the above style uses CSS Level 2...

I wanted if possible to stick with CSS 1 as I am using PURE css for positioning i.e. No tables and what as many browsers as possible to be able to display the content

Ian
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 12163113
Like many other things that need to be dynamic, you will need to use scripting to make it cross-resolution, and cross-size friendly.  It would be nice if the browsers would implement auto for the top and bottom margins, but until they do you have to help them along with scripting that lets the page stay flexibile and responsive to user preferences.  For this particular problem you need to add this scripting to the head of your page:

<script type="text/javascript">
function setPos()
{
DB=document.body;
obj=document.getElementById('yourdiv');
y=(DB.scrollHeight>DB.offsetHeight)? DB.scrollHeight : DB.offsetHeight;
hgt=obj.offsetHeight;
y=Math.round((y/2)-(hgt/2));
obj.style.marginTop=y+'px';
}
onload=setPos;
onresize=setPos
</script>

Cd&
0
 

Author Comment

by:ianinspain
ID: 12163532
Hi coboldinosaur,

Great, thats cool thanks...

Sorry to sound stupid, but all i need to put is the script .... don't i need to update my attached style as such?? or delete the style altogether?

I prefer to use attached style sheets rather than inline ones....

To remind to you again.. currently my attached style is

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
}


I sort of understand it... this line

obj.style.marginTop=y+'px';

if the thing that applies a style to my div.... but this is inline isn't it??

So what should my attached style sheet be then if i use this way..

Again ... thanks once again for the help on the above

Can you recommend any good reference books either?? I have "more with eric meyer" but it is really an example type book and is missing a lot of the pure info....

thanks anyway..

ian
0
 

Author Comment

by:ianinspain
ID: 12163558
Hi coboldinosaur,

forgot to mention I am trying to keep within css1 rather css2 .. due to the fact that  i want as much cross browser support as possible... I presume this is the right way to go?

I notice that the following isn't supported with css1, so i would need an alternative

position:absolute;

top:

left:

thanks

Ian
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12163958
You can leave the stylesheet as is.

Just ad the script to the head of the page.  

The code executes after the stylesheet has been loaded or when the page gets re-sized.  The code just modifies the rule for #main.  It is neither inline or a permanent part of the stylesheet. It is just a dynamic bit that reacts to the browser environment.

Cd&
0
 

Author Comment

by:ianinspain
ID: 12168467
Thanks Coboldinosaur!

It worked like a dream!... Just got one small query, wonder if you can help..

As you know by looking above at my posts... I want to use CSS ... I think this is the way to go rather than using tables, but I am trying to still appeal to as many browsers as possible so I am trying to stick with CSS1 - what do think about this?? the right way to go??

Anyway I use topstyle (css editor) which validate css for me and tells me if there are any potential problems..

I left my Css attached which is below but it gives the following warnings and errors, any ideas of how to get rouund this or is it just that Netscape Navigator has really bad support for CSS1, any ideas when NN4 was released, it  is very old now isn't it?? Should it be a worry for me do you think?

errors reported by Topstyle... just on NN4

 #main Netscape 4 doesn't center elements when using "auto" with margin-left/margin-right
  #main auto is not a valid value for margin-left
  #main Netscape 4 doesn't center elements when using "auto" with margin-left/margin-right
  #main auto is not a valid value for margin-right
  #main Netscape 4 adds extra line feeds when printing if margin-top is used.
  #main auto is not a valid value for margin-top
  #main auto is not a valid value for margin-bottom
  #main Netscape 4 handles "width" inconsistently, and sometimes not at all.
  #main Property height does not exist in this definition.

My attached CSS

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
}
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12171421
Netscrap 4 was originaly released as beta in Dec 1996, and the actual browser released in May 1997.  The technology has rmained basically the same. Even though there have been some cosmetic releases:  A real attempt at CSS support was made with 4.5 in Oct 1998; which was a total disater, and to this day there are those whow will argue the only browser in history that was more unreliable than 4.5 was 4.51; which was suppsot to be a "fixed" version.

Netscrap 4 was doomed from that point even though they continued to try and upgrade it:
4.6 Update May, 1999
4.7 Update Sep, 1999
4.79 Update Nov. 2001 (the same month Netscrap 6, debuted and set a record for the number of bug reports)
4.8 Update Aug. 2002 (It's rare to find anyone who actually "upgraded" to this final version)

Market share for N4 is less than 1%.  If you check your server logs you will probably find none of your visitors are using it, or the number is so low you cannot justify the extra development and maintenace costs to continue support the obsolete technology.

>>> is it just that Netscape Navigator has really bad support for CSS1,

Even HTML4 is not well implemented.  When Netscrap 4 was introduced HTML 3 was state of the art; CSS was little more than a good idea; DOM1 and XML were vague, strange concepts and a 14.4k modem was considered a high speed connection.  For that environment it was optimized, but Netscrap decide to spend their time taking Microslop to court instead of improving the technology; so the went from a 90% market share to little more than a blip.

The hope for the future is in Mozilla and open source.  Then next couple of years will be interesting.

Cd&
0
 

Author Comment

by:ianinspain
ID: 12171533
Thanks COBOLdinosaur,

Great insight... thanks .. thats what I figured...

SO TO SUMMARISE?

So ignore netscape 4 .. "BUT" design for CSS1 rather than CSS2 currently.... That way I hit more browsers???????




I am awarding points now, you were great!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12171687
You don't have to avoid CSS2.  Adoption of CSS in modern browser is evolutionary, and with each release more is there.  Modern browsers will ginore what they don't support, so it is possible to use an advanced feature that may only show up in the lastest release without harming the rendering of earlier releases.  The approach I take is to try something in Mozilla, if it works; then I look at it in IE6 and whether it works or not I keep it as long as it does not mess up the rendering in IE6.  Those are the only 2 browsers I worry about supporting; and because Mozilla is the superior browser I develop for that paltform, and then get it acceptable for IE.

Glad I could help.  Thanks for the A. :^)

Cd&
0
 

Author Comment

by:ianinspain
ID: 12216019
Msg for Coboldianosaur,

hi there,

Remember you helped me with this, and all seemed well but think i made a mistake...

I have uploaded the site to http://www.cuttingedgedesigns.biz/   it is actually on a page called default.aspx

I got the javascript in there but it doesn't seem to center vertically, i thought  it did

Sorry to be a pain... could you take a look for me??

Much appreciated, i probably made some silly mistake

This is the javascript as per your msg I inserted into the Head of my page

<script type="text/javascript">
function setPos()
{
DB=document.body;
obj=document.getElementById('main');
y=(DB.scrollHeight>DB.offsetHeight)? DB.scrollHeight : DB.offsetHeight;
hgt=obj.offsetHeight;
y=Math.round((y/2)-(hgt/2));
obj.style.marginTop=y+'px';
}
onload=setPos;
onresize=setPos

Just one thing, after the onresize .. should there not be a semi colon ; ???

Here is the MAIN css which i left as original per your instruction ..

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
}

Best regards

Ian

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12219227
Actually, it is working exactly correctly.  The problem is you are not asking the browser for what you actually. If you put a border around main you will see it has the correct margins all the way around.  The problem is that is not what you want centered. You want the content of main centered.  That is a complete different thing you have to add text-align:center to the style for main so that it move the content.
It ends up looking like this for the CSS:

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
text-align:center;
}

And the page code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
    <title>default</title><meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <link href="default_files/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function setPos()
{
obj=document.getElementById('main');
var x,y;
if (self.innerHeight) // all except Explorer
{
      x = self.innerWidth;
      y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
      // Explorer 6 Strict Mode
{
      x = document.documentElement.clientWidth;
      y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
      x = document.body.clientWidth;
      y = document.body.clientHeight;
}
wid=obj.offsetWidth;
hgt=obj.offsetHeight;
x=Math.round((x/2)-(wid/2))
y=Math.round((y/2)-(hgt/2));
obj.style.position='absolute';
obj.style.left=x+'px';
obj.style.top=y+'px';
}
onload=setPos;
onresize=setPos;
</script>
</head>
  <body>
    <form name="Form1" method="post" action="Default.aspx" id="Form1">
<input name="__VIEWSTATE"  value="dDwyOTg5NTI1OTE7O2w8SW1hZ2VCdXR0b24xOz4+/+JG4/2BEAPlL2bwrfqh33c4UvA=" type="hidden">

    <div id="main">
<p><a href="http://www.cuttingedgedesigns.biz/main.aspx"><img  src="default_files/total_care_large.gif" border="0" height="199" width="312"></a><br><img  id="Image1" alt="" border="0"><input name="ImageButton1" id="ImageButton1" alt="" border="0"  type="image">  
</p>
<p>        
        Recommended Browsers: IE 5.5+, NN 4.0+<br>
        Cookies are
exentesively used throught the site </p>
      </div>
  </form>
      
  </body></html>


Cd&
0
 

Author Comment

by:ianinspain
ID: 12219578
ahhh i see...

But i was keeping my eye on the Div displayed in IE (using the scrollbars :-)) and i couldn't see the div tag being centered Vertically.....

So basically this is going to center the contents inside? and Not actually the

Hi there,

THanks for your continued support on this... I just put a border around the div so i can actually see the DIV and if make the windows Grow and shrink Horizontally then its great i see the DIV tag moving as the window changes..

But vertically not.. I thought I would have been possible (using your method) to have the DIV center (not contents) vertically too.. hence if the DIV centers vertically also then everything inside would also move - no??

Or am I barking up the wrong tree?? I have uploaded my new css which now looks like this

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
border: 2px solid;
}

so hence you can see the border..

So now you can see how the border moves horizontal ie. Centers but vertically not..

cheers ian

0
 

Author Comment

by:ianinspain
ID: 12219610
oooppss. forget this
-----------
ahhh i see...

But i was keeping my eye on the Div displayed in IE (using the scrollbars :-)) and i couldn't see the div tag being centered Vertically.....

So basically this is going to center the contents inside? and Not actually the
---------------

I was making some notes to myself and sent it by accident :-) .. it starts with "Hi there"

www.cuttingedgedesigns.biz

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now