What happened to the Messenger Plus! forums on msghelp.net?
Shoutbox » MsgHelp Archive » General » General Chit Chat » CSS Help!

Pages: (2): « First [ 1 ] 2 » Last »
CSS Help!
Author: Message:
Eddie
Veteran Member
*****


Posts: 2078
Reputation: 30
30 / Male / Flag
Joined: Oct 2005
Status: Away
O.P. CSS Help!
Ok then, after talking with Nathan a bit i decided to move into a DIV / CSS Based layout instead of tables everywhere, and its been going pretty well and the code looks better to me but i'm not sure...

i have hit a small problem, i am wanting to get the 'container' in the exact middle of the page no matter what resolution, how would i do this? [code is below], btw im only making this for IE6/7 and Firefox based users for now :)
code:
#maincontainer {
    left: 30%;
    top: 200px;
    width: 400px;
    height: auto;
    margin: 0 auto;
    vertical-align: middle;
    padding: 5px;
    position: absolute;
    background-color: #FFFFFF;
    -moz-opacity: 0.65;
    filter: alpha(opacity=65);
}
The website can be found here, any other comments would be appreciated, but be aware its only a temporary page :P
...there used to be a signature here :)
06-09-2007 09:50 AM
Profile PM Web Find Quote Report
ayjay
Senior Member
****

Avatar

Posts: 850
Reputation: 58
– / Male / Flag
Joined: Mar 2004
RE: CSS Help!
add margin-left: -200px; (half of the div width) and left: 50%; to the div properties. That way, you're making it 50% from the left of the page to the middle of the div.


EDIT: You'll probably wanna use this too to make sure it acts properly :P...

code:
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

This post was edited on 06-09-2007 at 10:16 AM by ayjay.
06-09-2007 10:12 AM
Profile PM Find Quote Report
Eddie
Veteran Member
*****


Posts: 2078
Reputation: 30
30 / Male / Flag
Joined: Oct 2005
Status: Away
O.P. RE: CSS Help!
Sorry you misunderstood i think, thats the css code of the box, i want that box centred on the page, not content inside of that centred directly, i also want it completely centered on the page from the top and the side.

Also...Is it possible that the height be specified by how much writing there is?? *-)

This post was edited on 06-09-2007 at 11:37 AM by Eddie.
...there used to be a signature here :)
06-09-2007 11:34 AM
Profile PM Web Find Quote Report
Nathan
Veteran Member
*****

Avatar
Yeah, "large dimensions" ;)

Posts: 2984
Reputation: 76
– / Male / Flag
Joined: Apr 2005
RE: CSS Help!
just get rid of the height atribute.
Touch Innovation - touch friendly programs/applications for the windows mobile!


06-09-2007 12:01 PM
Profile E-Mail PM Web Find Quote Report
Supersonicdarky
Veteran Member
*****

Avatar

Posts: 2317
Reputation: 48
– / – / Flag
Joined: Feb 2005
Status: Away
RE: CSS Help!
cant you do margin: auto; for ff and text-align: center; in parent for ie?

i'm not sure if auto margin works for vertical align

also you will need to have set height and width
06-09-2007 12:25 PM
Profile E-Mail PM Find Quote Report
Nathan
Veteran Member
*****

Avatar
Yeah, "large dimensions" ;)

Posts: 2984
Reputation: 76
– / Male / Flag
Joined: Apr 2005
RE: CSS Help!
no it doesnt, i asked him to try that too. And its not margin: auto, its margin: 0 auto;  ;)
Touch Innovation - touch friendly programs/applications for the windows mobile!


06-09-2007 12:30 PM
Profile E-Mail PM Web Find Quote Report
hmaster
Senior Member
****

Avatar

Posts: 716
Reputation: 24
31 / Male / Flag
Joined: Nov 2004
RE: CSS Help!
Try this: http://exanimo.com/examples/css/vertical-centerin...-floated-shim.html

Source: http://exanimo.com/css/vertical-centering-with-a-floated-shim/
[Image: sig.png]
06-09-2007 12:32 PM
Profile PM Web Find Quote Report
Lou
Veteran Member
*****

Avatar

Posts: 2475
Reputation: 43
– / Male / Flag
Joined: Aug 2004
RE: CSS Help!
for the vertical alignment:
code:
div {
vertical-align:middle;
}
[Image: msghelp.net.png]
The future holds bright things in it\\\'s path, but only time will tell what they are and where they come from.
Messenger Stuff Forums
06-09-2007 12:33 PM
Profile PM Web Find Quote Report
Nathan
Veteran Member
*****

Avatar
Yeah, "large dimensions" ;)

Posts: 2984
Reputation: 76
– / Male / Flag
Joined: Apr 2005
RE: CSS Help!
Here's an example I just coded up: You should be able to learn from it ;)

http://skoolfun.com/center.htm

Hope it helps :)
Touch Innovation - touch friendly programs/applications for the windows mobile!


06-09-2007 12:39 PM
Profile E-Mail PM Web Find Quote Report
ayjay
Senior Member
****

Avatar

Posts: 850
Reputation: 58
– / Male / Flag
Joined: Mar 2004
RE: CSS Help!
quote:
Originally posted by Eddie
Sorry you misunderstood i think, thats the css code of the box, i want that box centred on the page, not content inside of that centred directly
That's exactly what it does. To do it centered from the top, just do the same but with margin-top and top:50%.

EDIT: oh, just seen it's not a specified height, nvm :P


quote:
Originally posted by Napbree
Here's an example I just coded up: You should be able to learn from it ;)

http://skoolfun.com/center.htm

Hope it helps :)
Doesn't work in IE.

This post was edited on 06-09-2007 at 12:49 PM by ayjay.
06-09-2007 12:45 PM
Profile PM Find Quote Report
Pages: (2): « First [ 1 ] 2 » Last »
« Next Oldest Return to Top Next Newest »


Threaded Mode | Linear Mode
View a Printable Version
Send this Thread to a Friend
Subscribe | Add to Favorites
Rate This Thread:

Forum Jump:

Forum Rules:
You cannot post new threads
You cannot post replies
You cannot post attachments
You can edit your posts
HTML is Off
myCode is On
Smilies are On
[img] Code is On