Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    78
    Thanks
    1
    Thanked 0 Times in 0 Posts

    page width is wider then normal on drupal

    I added this code to layout-fixed.css, after adding the code everything fit inside the browser but it created couple small issues in which I dont know what file coding to look at to fix this problem this particular css file.

    Code:
    body {
      background-image: url('images/images/background2.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: auto;
    }
    Issue #1
    Is when the browser size is smaller, the links get stacked up one another.

    Issue #2
    The background is showing but below the background is still some spacing how can I correct this problem, I included an image link to better understand.

    http://tinypic.com/r/2mx4fw9/5

    layout-fixed.css file:
    Code:
    /**
     * @file
     * Layout Styling (DIV Positioning)
     *
     * Define CSS classes to create a table-free, 3-column, 2-column, or single
     * column layout depending on whether blocks are enabled in the left or right
     * columns.
     *
     * This layout is based on the Zen Columns layout method.
     *   http://drupal.org/node/201428
     *
     * Only CSS that affects the layout (positioning) of major elements should be
     * listed here.  Such as:
     *   display, position, float, clear, width, height, min-width, min-height
     *   margin, border, padding, overflow
     */
    
    
    /*
     * Body
     */
    body {
      background-image: url('../images/background2.jpg');  
      background-repeat: no-repeat;  
      background-size: 100% 100%;
      margin: auto;
    }
    
    #page-wrapper,
    .region-bottom {
      /*
       * If you want to make the page a fixed width and centered in the viewport,
       * this is the standards-compliant way to do that. See also the ie6.css file
       * for the necessary IE5/IE6quirks hack to center a div.
       */
      margin-left: auto;
      margin-right: auto;
      width: 960px;
    }
    
    #page {
    }
    
    /*
     * Header
     */
    #header {
    }
    
    #header .section {
    }
    
    .region-header {
    }
    
    /*
     * Main (container for everything else)
     */
    #main-wrapper {
      position: relative;
    }
    
    #main {
    }
    
    /*
     * Content
     */
    #content,
    .no-sidebars #content {
      float: left; /* LTR */
      width: 960px;
      margin-left: 0; /* LTR */
      margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
    }
    
    .sidebar-first #content {
      width: 760px;
      margin-left: 200px; /* LTR */ /* The width of .region-sidebar-first. */
      margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
    }
    
    .sidebar-second #content {
      width: 760px;
      margin-left: 0; /* LTR */
      margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
    }
    
    .two-sidebars #content {
      width: 560px;
      margin-left: 200px; /* LTR */ /* The width of .region-sidebar-first */
      margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
    }
    
    #content .section {
      margin: 0;
      padding: 0;
    }
    
    /*
     * Navigation
     */
    #navigation {
      float: left; /* LTR */
      width: 100%;
      margin-top: 50px; /* LTR */
      margin-left: 20px; /* LTR */
      margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
      height: 3em; /* The navigation can have any arbritrary height. We picked one
                        that is the line-height plus 1em: 1.3 + 1 = 2.3
                        Set this to the same value as the margin-top below. */
    }
    
    .with-navigation #content,
    .with-navigation .region-sidebar-first,
    .with-navigation .region-sidebar-second {
      margin-top: 3em; /* Set this to the same value as the navigation height above. */
    }
    
    #navigation .section {
    }
    
    /*
     * First sidebar
     */
    .region-sidebar-first {
      float: left; /* LTR */
      width: 200px;
      margin-left: 0; /* LTR */
      margin-right: -200px; /* LTR */ /* Negative value of .region-sidebar-first's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-first .section. */
    }
    
    .region-sidebar-first .section {
      margin: 0 20px 0 0; /* LTR */
      padding: 0;
    }
    
    /*
     * Second sidebar
     */
    .region-sidebar-second {
      float: left; /* LTR */
      width: 200px;
      margin-left: 760px; /* LTR */ /* Width of content + sidebar-first. */
      margin-right: -960px; /* LTR */ /* Negative value of .region-sidebar-second's width + left margin. */
      padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-second .section. */
    }
    
    .region-sidebar-second .section {
      margin: 0 0 0 20px; /* LTR */
      padding: 0;
    }
    
    /*
     * Footer
     */
    .region-footer {
    }
    
    /*
     * Page bottom
     */
    .region-bottom /* See also the #page-wrapper declaration above that this div shares. */ {
    }
    
    /*
     * Prevent overflowing content
     */
    #header,
    #content,
    #navigation,
    .region-sidebar-first,
    .region-sidebar-second,
    .region-footer,
    .region-bottom {
      overflow: visible;
      word-wrap: break-word; /* A very nice CSS3 property */
    }
    
    /*
     * If a div.clearfix doesn't have any content after it and its bottom edge
     * touches the bottom of the viewport, Firefox and Safari will mistakenly
     * place several pixels worth of space between the bottom of the div and the
     * bottom of the viewport. Uncomment this CSS property to fix this.
     * Note: with some over-large content, this property might cause scrollbars
     * to appear on the #page-wrapper div.
     */
    /*
    #page-wrapper {
      overflow-y: hidden;
    }
    */
    Last edited by rusty813; 03-03-2012 at 12:20 AM.

  • #2
    New Coder
    Join Date
    Oct 2010
    Posts
    78
    Thanks
    1
    Thanked 0 Times in 0 Posts
    does anyone know what could be wrong?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,085
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Rusty, you gave us the css file, that adds position and style to the html, but you never gave us the html. We need both.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •