Center align a div?



Programming Help Forums
Home       Members    Calendar    Who's On
Welcome Guest ( Login | Register )
        



Center align a div? Expand / Collapse
Author
Message
Posted 1/28/2007 7:13:39 AM
Junior Member

Junior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior Member

Group: Forum Members
Last Login: 3/3/2007 6:14:43 AM
Posts: 16, Visits: 12
Hi guys,

I need to create a div that is in the centre of the page using styles. The div needs to have gray border.

Anyone?

Post #130
Posted 1/28/2007 8:21:42 AM
Forum Member

Forum MemberForum MemberForum MemberForum MemberForum MemberForum MemberForum MemberForum Member

Group: Forum Members
Last Login: 2/8/2007 8:41:42 AM
Posts: 45, Visits: 35
Pretty simple, try this out

<div style="position: relative;">
<div style="position: absolute; left: 25%; width: 50%; border: 1px solid #c0c0c0;">Something</div>
</div>

Post #140
Posted 1/28/2007 9:22:22 AM
Junior Member

Junior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior Member

Group: Forum Members
Last Login: 3/3/2007 6:14:43 AM
Posts: 16, Visits: 12
Thanks chillywilly, your code looks good, but it didn't center my object.  I'm using a flash .swf object and trying to get it centered.  Any ideas?
Post #145
Posted 1/28/2007 10:07:30 AM
Forum Member

Forum MemberForum MemberForum MemberForum MemberForum MemberForum MemberForum MemberForum Member

Group: Forum Members
Last Login: 2/7/2007 11:36:07 AM
Posts: 38, Visits: 35
ASsuming you need a fixed width for the flash file, you'll need client side script for this.

<script type="text/javascript">
window.onload = WindowLoad;
function WindowLoad(event) {
   var objDiv = document.getElementById( "MainContainer" );
   objDiv.style.left = parseInt((document.body.clientWidth-objDiv.clientWidth)/2)+"px";
}
</script>
<div style="position: relative;">
<div id="MainContainer" style="position: absolute; border: 1px solid #c0c0c0;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="800" height="600" id="preloader_v03" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="preloader_v03.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="preloader_v03.swf" quality="high" bgcolor="#ffffff" width="800" height="600" name="preloader_v03" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>

Post #149
Posted 1/28/2007 9:32:52 PM
Junior Member

Junior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior Member

Group: Forum Members
Last Login: 3/3/2007 6:14:43 AM
Posts: 16, Visits: 12
That did it, you're the best!

Cheers!

Post #157
Posted 8/28/2007 1:34:18 PM
Junior Member

Junior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior MemberJunior Member

Group: Forum Members
Last Login: 12/14/2007 9:52:59 AM
Posts: 10, Visits: 4
great help thnx

complexity is a symptom of confusion not a cause
Post #1458
Posted 6/28/2009 1:51:12 AM
Forum Newbie

Forum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum Newbie

Group: Forum Members
Last Login: 6/28/2009 1:56:02 AM
Posts: 8, Visits: 2
night_day (1/28/2007)
ASsuming you need a fixed width for the flash file, you'll need client side script for this.



<script type="text/javascript">
window.onload = WindowLoad;
function WindowLoad(event) {
var objDiv = document.getElementById( "MainContainer" );
objDiv.style.left = parseInt((document.body.clientWidth-objDiv.clientWidth)/2)+"px";
}
</script>
<div style="position: relative;">
<div id="MainContainer" style="position: absolute; border: 1px solid #c0c0c0;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="800" height="600" id="preloader_v03" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="preloader_v03.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="preloader_v03.swf" quality="high" bgcolor="#ffffff" width="800" height="600" name="preloader_v03" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>



this is nice answer thanks night day


try the other side
Post #4055
Posted 7/14/2009 10:48:28 AM
Forum Newbie

Forum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum Newbie

Group: Banned Members
Last Login: 7/15/2009 9:45:40 AM
Posts: 2, Visits: 14
thanksssssssss
Post #4193
Posted 1/16/2010 9:04:10 PM
Forum Newbie

Forum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum Newbie

Group: Forum Members
Last Login: 1/16/2010 8:53:26 PM
Posts: 3, Visits: 1
I like this :


Something

Post #4918
Posted 5/31/2010 3:14:33 AM
Forum Newbie

Forum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum NewbieForum Newbie

Group: Forum Members
Last Login: 6/4/2010 9:03:18 AM
Posts: 5, Visits: 7
I've always used the old "Centering Trick" when i code my templates up for the web. I use "margin: auto 0" in the css page. It is a great way to center your content and haven't to worry about how to center other stuff because it automatically centers all the content within that div.

Company
Post #5215
« Prev Topic | Next Topic »


Reading This Topic Expand / Collapse
Active Users: 0 (0 guests, 0 members, 0 anonymous members)
No members currently viewing this topic.
Forum Moderators: ProgrammingHelp, Viral Unity, Matt.Hill, DaveL, Alex.D

Permissions Expand / Collapse

All times are GMT -5:00, Time now is 3:37am

Powered By InstantForum.NET v4.1.4 © 2010
Execution: 0.062. 9 queries. Compression Disabled.