Jump to content

Div box trouble inside explore :/...

Recommended Posts

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...): ok.png and this is how it IS looking right now.. : not_ok.png 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 post
Share on other sites

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 post
Share on other sites

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.. :P..

Edited by rootKID
Link to post
Share on other sites

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 by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...