Coding help with column width please should be very simple

Discussion in 'CSS' started by BLieve, May 22, 2007.

  1. #1
    I'd like to adjust the width so the left side of the page is about 1/3 (300 px?) from the edge. Right now I think its about 200px. Can anyone please tell me how to adjust the following code to change this? My site is Systemrebels.com. Thanks.


    #content {
    height: 100%;
    min-height: 100%;

    text-align: left;
    }

    #content,
    #width {
    /* max-width hack for IE since it doesn't understand the valid css property */
    width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");
    max-width: 1000px;
    margin: 0 auto;
    }

    #content[id],
    #width[id] {
    width: 94%;
    height: auto;
    }




    /**************************************************************
    #header: Holds the site title and header images
    **************************************************************/

    #header {
    position: relative;
    height: 193px;
    }

    /* Holds the site title and subtitle */
    #header #title {
    position: absolute;
    z-index: 3;
    top: 5px;
    left: 135px;

    padding: 5px;
    text-align: right;
    }

    #header h1 {
    margin: 0;
    padding: 0;

    font: 700 4em "trebuchet ms", serif;
    letter-spacing: -3px;
    text-transform: lowercase;
    color: #FFF;
    }

    #header h2 {
    position: absolute;
    top: 10px;
    right: 5px;

    margin: 0;
    padding: 0;

    font: 700 1em "trebuchet ms", serif;
    text-transform: lowercase;
    color: #00F0EC;
    }
    #quoteoftheday{


    position: absolute;

    z-index: 0;

    top: 0;
    right: 0;
    }



    /* Sets where the header images will go */
    #header img.left {
    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;
    }

    #header img.right {
    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;
    }

    #header img.balloons {
    position: absolute;
    z-index: 2;

    top: 70px;
    right: 400px;
    }



    /**************************************************************
    #mainMenu: The top level site menu
    **************************************************************/

    #mainMenu {
    /* float: right;
    width: 100%;
    clear: both; */
    }

    #mainMenu ul {
    margin: 0;
    padding: 0;
    }

    #mainMenu li {
    display:table-cell;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #mainMenu li a {
    float: left;
    margin: 0 2px;
    padding: 5px 0.5em;

    font: 400 1.6em "trebuchet ms", serif;
    text-decoration: none;
    text-transform: lowercase;
    color: #FFF;
    }

    #mainMenu li a:hover,
    #mainMenu li a.here {
    color: #65EBFF;
    border-top: 5px solid #000;
    }

    #mainMenu li a.last {
    margin-right: 0;
    }




    /**************************************************************
    .sideMenu: The side bar menu
    **************************************************************/

    ul.sideMenu {
    margin: 0;
    padding: 0;
    }

    .sideMenu li {
    display: inline;

    /* Needed since IE fails when you give it list-style: none; */
    list-style-image: url(foo.gif);
    font: 400 1.3em "trebuchet ms", serif;
    }

    .sideMenu li a {
    display: block;
    margin: 0.2em 0;
    padding: 3px 5px;

    text-decoration: none;
    color: #FFF;
    }

    .sideMenu li a:hover {
    color: #65EBFF;
    background: #5F5F5F;
    }

    /* Active menu item */
    .sideMenu li.here {
    display: block;
    padding: 5px;
    color: #65EBFF;
    background: #555;
    }

    /* Submenu of active menu item */
    .sideMenu li.here ul {
    margin: 0;
    padding: 0;
    }

    .sideMenu li.here ul li a {
    padding-left: 35px;
    font: 400 0.55em verdana, arial, sans-serif;
    color: #FFF;
    background: url(/templates/zonecopper/images/bg/bullet.gif) no-repeat 10px 0px;
    }

    .sideMenu li.here ul li a:hover {
    color: #9FF3FF;
    background: #5F5F5F url(/templates/zonecopper/images/bg/bullet.gif) no-repeat 10px 0px;
    }



    /**************************************************************
    #page: Holds the main page content.
    **************************************************************/

    #page {
    float: left;
    width: 100%;
    clear: both;

    padding-bottom: 4em;
    }




    /**************************************************************
    #footer: The page footer - will stick to the bottom if not
    enough content.
    **************************************************************/

    #footer {
    float: left;
    width: 100%;
    clear: both;

    margin-top: -3.8em;
    background: #000 url(/templates/zonecopper/images/bg/footer.jpg) repeat-x top left;
    }

    /* Sets the width of the footer content */
    #footer #width {
    position: relative;
    z-index: 3;
    font-size: 0.85em;
    padding-top: 27px;
    }



    /**************************************************************
    Width classes used by the site columns
    **************************************************************/

    .width100 {
    width: 100%;
    }

    /*.width75 {
    width: 74%;
    }
    */
    .width75 {
    width: 84%;
    }

    .width50 {
    width: 49.7%;
    }

    .width33 {
    width: 32.7%;
    }

    /*.width25 {
    width: 24.7%;
    }
    */
    .width25 {
    width: 14.7%;
    }


    /**************************************************************
    Alignment classes
    **************************************************************/

    .floatLeft {
    float: left;
    }

    .floatRight {
    float: right;
    }

    .alignLeft {
    text-align: left;
    }

    .alignRight {
    text-align: right;
    }



    /**************************************************************
    Generic display classes
    **************************************************************/

    .clear {
    clear: both;
    }

    .block {
    display: block;
    }

    .small {
    font-size: 0.8em;
    }

    .green {
    color: #A1FF45;
    }

    .red {
    color: #EA1B00;
    }

    .grey {
    color: #666;
    }

    .grey a {
    color: #999;
    }

    .grey a:hover {
    color: #EEE;
    }

    .gradient {
    margin-bottom: 2em;
    background: #555 url(/templates/zonecopper/images/bg/gradient.jpg) repeat-x bottom left;
    }

    .moduletable-banner {
    margin-top:20px;
    }
     
    BLieve, May 22, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Whoa, that's a lot of absolutely positioned code. What does the HTML code that's supposed to go with look like?
     
    Dan Schulz, May 22, 2007 IP
  3. BLieve

    BLieve Peon

    Messages:
    158
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Not sure what positioned code mean and Im guessing the HTML code is index.php right? This is what it looks like. Really appreciate the help Dan.

    // Set flag that this is a parent file
    define( '_VALID_MOS', 1 );

    // checks for configuration file, if none found loads installation page
    if (!file_exists( 'configuration.php' ) || filesize( 'configuration.php' ) < 10) {
    $self = str_replace( '/index.php','', ( $_SERVER['PHP_SELF'] ) ). '/';
    header("Location: http://" . $_SERVER['HTTP_HOST'] . $self . "installation/index.php" );
    exit();
    }

    require( 'globals.php' );
    require_once( 'configuration.php' );
    require_once( 'includes/joomla.php' );

    //Installation sub folder check, removed for work with SVN
    if (file_exists( 'installation/index.php' ) && $_VERSION->SVN == 0) {
    define( '_INSTALL_CHECK', 1 );
    include ( $mosConfig_absolute_path .'/offline.php');
    exit();
    }

    // displays offline/maintanance page or bar
    if ($mosConfig_offline == 1) {
    require( $mosConfig_absolute_path .'/offline.php' );
    }

    // load system bot group
    $_MAMBOTS->loadBotGroup( 'system' );

    // trigger the onStart events
    $_MAMBOTS->trigger( 'onStart' );

    if (file_exists( $mosConfig_absolute_path .'/components/com_sef/sef.php' )) {
    require_once( $mosConfig_absolute_path .'/components/com_sef/sef.php' );
    } else {
    require_once( $mosConfig_absolute_path .'/includes/sef.php' );
    }
    require_once( $mosConfig_absolute_path .'/includes/frontend.php' );

    // retrieve some expected url (or form) arguments
    $option = strval( strtolower( mosGetParam( $_REQUEST, 'option' ) ) );
    $Itemid = intval( mosGetParam( $_REQUEST, 'Itemid', null ) );

    if ($option == '') {
    if ($Itemid) {
    $query = "SELECT id, link"
    . "\n FROM #__menu"
    . "\n WHERE menutype = 'mainmenu'"
    . "\n AND id = '$Itemid'"
    . "\n AND published = '1'"
    ;
    $database->setQuery( $query );
    } else {
    $query = "SELECT id, link"
    . "\n FROM #__menu"
    . "\n WHERE menutype = 'mainmenu'"
    . "\n AND published = 1"
    . "\n ORDER BY parent, ordering"
    ;
    $database->setQuery( $query, 0, 1 );
    }
    $menu = new mosMenu( $database );
    if ($database->loadObject( $menu )) {
    $Itemid = $menu->id;
    }
    $link = $menu->link;
    if (($pos = strpos( $link, '?' )) !== false) {
    $link = substr( $link, $pos+1 ). '&Itemid='.$Itemid;
    }
    parse_str( $link, $temp );
    /** this is a patch, need to rework when globals are handled better */
    foreach ($temp as $k=>$v) {
    $GLOBALS[$k] = $v;
    $_REQUEST[$k] = $v;
    if ($k == 'option') {
    $option = $v;
    }
    }
    }
    if ( !$Itemid ) {
    // when no Itemid give a default value
    $Itemid = 99999999;
    }

    // mainframe is an API workhorse, lots of 'core' interaction routines
    $mainframe = new mosMainFrame( $database, $option, '.' );
    $mainframe->initSession();

    // trigger the onAfterStart events
    $_MAMBOTS->trigger( 'onAfterStart' );

    // checking if we can find the Itemid thru the content
    if ( $option == 'com_content' && $Itemid === 0 ) {
    $id = intval( mosGetParam( $_REQUEST, 'id', 0 ) );
    $Itemid = $mainframe->getItemid( $id );
    }

    /** do we have a valid Itemid yet?? */
    if ( $Itemid === 0 ) {
    /** Nope, just use the homepage then. */
    $query = "SELECT id"
    . "\n FROM #__menu"
    . "\n WHERE menutype = 'mainmenu'"
    . "\n AND published = 1"
    . "\n ORDER BY parent, ordering"
    ;
    $database->setQuery( $query, 0, 1 );
    $Itemid = $database->loadResult();
    }

    // patch to lessen the impact on templates
    if ($option == 'search') {
    $option = 'com_search';
    }

    // loads english language file by default
    if ($mosConfig_lang=='') {
    $mosConfig_lang = 'english';
    }
    include_once( $mosConfig_absolute_path .'/language/' . $mosConfig_lang . '.php' );

    // frontend login & logout controls
    $return = strval( mosGetParam( $_REQUEST, 'return', NULL ) );
    $message = intval( mosGetParam( $_POST, 'message', 0 ) );
    if ($option == 'login') {
    $mainframe->login();

    // JS Popup message
    if ( $message ) {
    ?>
    <script language="javascript" type="text/javascript">
    <!--//
    alert( "<?php echo _LOGIN_SUCCESS; ?>" );
    //-->
    </script>
    <?php
    }

    if ( $return && !( strpos( $return, 'com_registration' ) || strpos( $return, 'com_login' ) ) ) {
    // checks for the presence of a return url
    // and ensures that this url is not the registration or login pages
    mosRedirect( $return );
    } else {
    mosRedirect( $mosConfig_live_site .'/index.php' );
    }

    } else if ($option == 'logout') {
    $mainframe->logout();

    // JS Popup message
    if ( $message ) {
    ?>
    <script language="javascript" type="text/javascript">
    <!--//
    alert( "<?php echo _LOGOUT_SUCCESS; ?>" );
    //-->
    </script>
    <?php
    }

    if ( $return && !( strpos( $return, 'com_registration' ) || strpos( $return, 'com_login' ) ) ) {
    // checks for the presence of a return url
    // and ensures that this url is not the registration or logout pages
    mosRedirect( $return );
    } else {
    mosRedirect( $mosConfig_live_site.'/index.php' );
    }
    }

    /** get the information about the current user from the sessions table */
    $my = $mainframe->getUser();

    // detect first visit
    $mainframe->detect();

    // set for overlib check
    $mainframe->set( 'loadOverlib', false );

    $gid = intval( $my->gid );

    // gets template for page
    $cur_template = $mainframe->getTemplate();
    /** temp fix - this feature is currently disabled */

    /** @global A places to store information from processing of the component */
    $_MOS_OPTION = array();

    // precapture the output of the component
    require_once( $mosConfig_absolute_path . '/editor/editor.php' );

    ob_start();

    if ($path = $mainframe->getPath( 'front' )) {
    $task = strval( mosGetParam( $_REQUEST, 'task', '' ) );
    $ret = mosMenuCheck( $Itemid, $option, $task, $gid );

    if ($ret) {
    require_once( $path );
    } else {
    mosNotAuth();
    }
    } else {
    header( 'HTTP/1.0 404 Not Found' );
    echo _NOT_EXIST;
    }

    $_MOS_OPTION['buffer'] = ob_get_contents();

    ob_end_clean();

    initGzip();

    header( 'Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
    header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
    header( 'Cache-Control: no-store, no-cache, must-revalidate' );
    header( 'Cache-Control: post-check=0, pre-check=0', false );
    header( 'Pragma: no-cache' );

    // display the offline alert if an admin is logged in
    if (defined( '_ADMIN_OFFLINE' )) {
    include( $mosConfig_absolute_path .'/offlinebar.php' );
    }

    // loads template file
    if ( !file_exists( $mosConfig_absolute_path .'/templates/'. $cur_template .'/index.php' ) ) {
    echo _TEMPLATE_WARN . $cur_template;
    } else {
    require_once( $mosConfig_absolute_path .'/templates/'. $cur_template .'/index.php' );
    echo '<!-- '. time() .' -->';
    }

    // displays queries performed for page
    if ($mosConfig_debug) {
    echo $database->_ticker . ' queries executed';
    echo '<pre>';
    foreach ($database->_log as $k=>$sql) {
    echo $k+1 . "\n" . $sql . '<hr />';
    }
    echo '</pre>';
    }

    doGzip();
    ?>
     
    BLieve, May 22, 2007 IP
  4. liamvictor

    liamvictor Peon

    Messages:
    127
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The content is floating so it's partially dependent on the width of the page, and also on the positioning of the container element.
     
    liamvictor, May 22, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That would be the PHP source code. What does it look like in a browser? (a simple View Source and then copy/paste would help me out a lot)
     
    Dan Schulz, May 22, 2007 IP
  6. BLieve

    BLieve Peon

    Messages:
    158
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Figured it out, I had to adjust the .25 width and .75 width
     
    BLieve, May 22, 2007 IP