rootKID Posted January 11, 2013 Share Posted January 11, 2013 yoyo w3...ive been starting up on a project... but now the design is crap inside explore, and just finded out... this is how it SHOULD look like (notice the boxes are in the middle...): and this is how it IS looking right now.. : and that is the WRONG design.. i need the boxes to center in the middle...this is my setup skin: function stdhead($title = ""){global $MT;/*Stylesheet Mod...*/if($CURUSER){ $HWT['stylesheet'] = isset($CURUSER['stylesheet']) ? "{$CURUSER['stylesheet']}.css" : $MT['stylesheet'];}/*Stylesheet Mod...*/$HTMLOUT = "";/*Starting the variable...*/$HTMLOUT .= "<head><meta http-equiv='Content-Type' content='text/html'; charset='iso-8859-2' /><title>{$title}</title><link rel='shortcut icon' href='favicon.ico' /><link rel='stylesheet' href='styles/{$MT['stylesheet']}.css' type='text/css' /></head><body>";$HTMLOUT .= "<div id='header'>";$HTMLOUT .= "Header/Banner...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='status_bar'>";$HTMLOUT .= "Stats...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='menu'>";$HTMLOUT .= "Menu/Links...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='main_content'>";$HTMLOUT .= "Content Place...";return $HTMLOUT;}function stdfoot(){$HTMLOUT = "";/*Starting the variable...*/$HTMLOUT .= "</div>";//Ending main_content...$HTMLOUT .= "<div id='footer_bar'>";$HTMLOUT .= "MightyTracker © 2013-2014";$HTMLOUT .= "</div>";//Ending Footer...$HTMLOUT .= "</body></html>";/*Local HTML Ending...*/return $HTMLOUT;} and this is my CSS: @charset "iso-8859-2";/* CSS Document */* {margin:auto;padding:auto;font-size:8pt;}body {background-color:#151515;color:#FFF;}#header { background-color:#111111; color:#FFF; width:1000px; height:100px;/*Configure for banner place...*/ position:relative; margin:auto; padding:auto;}#status_bar { background-color:#222222; color:#CCC; width:1000px; height:auto; margin:auto; padding:auto;}#menu { background-color:#333333; color:#FFF; width:99%; margin:auto; padding:auto; height:auto;}#main_content { background-color:#444444; color:#FFF; width:99%; height:auto; margin:auto; padding:auto;}#footer_bar { background-color:#333333; color:#FFF; width:99%; height:auto; margin:auto; padding:auto;} and im not sure what i have done wrong... but i have tried almost everything i think i could come up with... so asking here now...note that i also have tried position:relative... nofthing... its like its just ignoring the damn css in the explore... ideas?... Link to comment Share on other sites More sharing options...
dsonesuk Posted January 12, 2013 Share Posted January 12, 2013 Did you declare a DOCTYPE?, IE requires this so it can work as other better browsers, without it, it remains in quirkes mode (stupid mode), and also there is no such thing as padding: auto;. Link to comment Share on other sites More sharing options...
rootKID Posted January 12, 2013 Author Share Posted January 12, 2013 i added these 2 lines: <!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml'> still dosent work's...and about the css... how would you else get them to the middle?... ive allways got told that to get a Divbox to the middle itself, then the star rule would be a margin/padding with both as auto... is that wrong maybe?... Link to comment Share on other sites More sharing options...
dsonesuk Posted January 12, 2013 Share Posted January 12, 2013 It works for me? you use margin: 0 auto; along with a defined width only, padding: auto; is not valid; the default value is 0; and padding is never used to centre a container block element such as div. Link to comment Share on other sites More sharing options...
rootKID Posted January 12, 2013 Author Share Posted January 12, 2013 (edited) hmm... weird... will try the margin/padding tomorrow, and see if its making any diffrence... and by the way... how would you get the boxes centered anyway if you did not use maring and padding?... just asking.. .. Edited January 12, 2013 by rootKID Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2013 Share Posted January 13, 2013 (edited) block elements: div, h2, P, when giving a width: with use of margin: 0 auto; Inline elements such as A, SPAN, and elements giving the style of display: inline-block whose block element parent is given text-align: center styling, similar in how you use text: align; to align normal text left, right center etc. Combination of position:relative; with left and right propeties of 50%, and float: left used on outer and inner block elements, usually used to centre floated horizontal menus. <div style="width:400px; min-height:400px; margin: 0 auto; background-color:#6699FF; text-align:center;">block element, margin: 0 auto;</div><div style="width:400px; min-height:400px; margin:20px auto; text-align: center; border: 1px solid #6699ff;">block element outer using text-align: center;<div style="width:200px; min-height:200px; display:inline-block; margin-top: 100px; background-color:#6699FF;">display: inline-block element</div></div><div style="width:400px; min-height:300px; margin: 20px auto; background-color:#6699FF;"><div style=" float:left;position:relative; left: 50%;"><div style="float:left; height: 50px; width:200px; position:relative; right:50%;background-color:#669933; margin: 20px 0;">floated element</div></div><div style="float:left; clear:both; min-height: 50px; width:200px; background-color:#669933; margin: 20px auto;">floated element even though has text-align: center parent element and uses fixed width along with margin: 20px auto; does not centre itself</div></div> Edited January 13, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now