Results 1 to 3 of 3

Thread: padding changes on higher resolutions

  1. #1
    Join Date
    Nov 2008
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default padding changes on higher resolutions

    Hello:

    I am having problems with what I think is a fluid page that I thought worked, but it doesn't. I basically have 3 problems, 1 major, 2 minor that are keeping me up at night.

    The first problem ( major ) is that my "rite content" loses it's bottom padding when the screen res goes beyond 1400px. I don't know all that much about css, but I wonder why it would work on smaller res but changes on higher. I basically want a bottom padding of 10px above my footer. If the left content is larger, well the right padding would not matter, but when the left is shorter than the right, then the right padding should kick in.

    Second problem is cosmetic in that the space between the "home" section and "footer" section have 10px, but the space between the first portion of the left content and the second is greater. I would like to get it to be the space, 10px for example. There could be more sections, so it needs to look uniform regardless of how many sections I have.

    Third problem, and again, it is minor and perhaps not worth mentioning, but looking at the code below, I would like to have the "rite page" within the "page body". Why??? I just think that it belongs to the main content section and should follow the "left page".

    http://www.pepelepew1962.x10.mx/

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Test Page</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <meta name="author" content="Blank">
    
    <style type="text/css">
    
    body
    {
       margin: 0px;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 15px;
       background: #4A4A4A;
       background-image: url(homeback.jpg);
    }
    
    img
    {
       border: none;
    }
    
    a
    {
       outline: none;
       color: #0091E8;
       text-decoration: none;
    }
    
    a:visited
    {
       color: #0091E8;
    }
    
    a:hover
    {
       color: #666;
       text-decoration: underline;
    }
    
    #head_Main
    {
       background: url(homehead.png) repeat-x;
       height: 112px;
    }
    
    #head_Wrap
    {
       width: 90%;
       margin: 0px auto;
       height: 112px;
    }
    
    #head_Logo
    {
       float: left;
       height: 112px;
       width: 90px;
       padding-top: 6px;
    }
    
    #head_News
    {
       margin-top: 0px;
       padding: 0px;
       color: #0FF;
       font-size: 20px;
       height: 44px;
       width: 0 auto;
       margin-left: 90px;
       line-height: 44px;
       padding-left: 5px;
    }
    
    #head_Menu
    {
       text-align: center;
       font-weight: bold;
       height: 44px;
       width: 0 auto;
       margin-left: 90px;
    }
    
    #head_Menu ul
    {
       margin: 0;
       padding: 0;
    }
    
    #head_Menu li
    {
       margin: 13px 5px 10px 0;
       padding: 0;
       list-style: none;
       display: inline-block;
       *display: inline; /* ie7 */
    }
    
    #head_Menu a
    {
       padding: 3px 12px;
       text-decoration: none;
       color: #999;
       line-height: 100%;
       border-radius: 5px;
       background: #151515;
       border: 1px solid #262626;
    }
    
    #head_Menu a:hover
    {
       color: #000;
       border: 1px solid #383838;
       border-radius: 5px;
       background-color: #666666;
    }
    
    #head_Menu #current a
    {
       color: #fff;
       background: #999;
       border: 1px solid #383838;
       border-radius: 5px;
       background-color: #444444;
    }
    
    #head_Info
    {
       height: 22px;
       width: 0 auto;
       margin-left: 90px;
       color: #F00;
       font-size: 12px;
       padding-top: 6px;
    }
    
    #head_Lead
    {
       clear: both;
       height: 90px;
       text-align: center;
    }
    
    #page_Body
    {
       width: 100%;
       float: left;
       /* [disabled]margin-top: 25px; */
       /* [disabled]padding-bottom: 25px; */
       /* [disabled]padding-left: 10px; */
       /* [disabled]height: 100%; */
       /* [disabled]border: 2px solid #383838; */
       border-radius: 5px;
       /* [disabled]background-color:  #2C2C2C; */
    }
    
    #page_Left
    {
       margin-right: 210px; /*Set right margin to RightColumnWidth*/
       /* [disabled]background-color: #90EE90; */
    }
    
    #page_Rite
    {
       margin-top: 10px;
       width: 200px; /*Width of right column in pixels*/
       margin-left: -210px; /*Set left margin to -(RightColumnWidth) */
       background-color: #2c2c2c;
       float: left;
       color: #F00;
       border-radius: 5px;
       border: 2px solid #383838;
    }
    
    #page_Name
    {
       /* [disabled]margin-top: 0px; */
       /* [disabled]margin-left: 10px; */
       border: 2px solid #383838;
       border-radius: 5px;
       background-color: #333333;
       width: 100%;
       /* [disabled]height: 200px; */
       /* [disabled]margin-right: 200px; */
       /* [disabled]margin-bottom: 25px; */
       margin-left: 0px;
       padding: 4px 0;
       clear: left;
       /* [disabled]padding-right: -25px; */
    }
    
    #left_Body
    {
       margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
       margin-top: 0;
       padding-left: 10px;
       padding-right: 10px;
       padding-top: 10px;
       padding-bottom: 10px;
    }
    
    #rite_Body
    {
       margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
       margin-top: 0;
       padding-left: 10px;
       padding-right: 10px;
       padding-top: 10px;
    }
    
    .name_Text
    {
       /* [disabled]padding-right: 10px; */
       color: #FF0;
       font-weight: bold;
       text-align: left;
       padding-left: 25px;
    }
    
    .left_Text
    {
       margin-top: 25px;
       /* [disabled]margin-left: 10px; */
       border: 2px solid #383838;
       border-radius: 5px;
       background-color: #2c2c2c;
       /* [disabled]width: 97%; */
       /* [disabled]height: 200px; */
       /* [disabled]margin-right: 200px; */
       margin: 0px auto;
       padding: 10px;
       color: #CF6;
       /* [disabled]margin-bottom: 25px; */
       text-align: left;
    }
    
    .rite_Text
    {
    
    }
    
    /* 300 x 250 IMU - (Medium Rectangle) */
    /* 180 x 150 IMU - (Rectangle) */
    /* 160 x 600 IMU - (Wide Skyscraper) */
    /* 728 x 090 IMU - (Leaderboard) */
    
    #head_Foot
    {
       /* [disabled]margin-top: 0px; */
       /* [disabled]margin-left: 10px; */
       border: 2px solid #383838;
       border-radius: 5px;
       background-color: #333333;
       width: 100%;
       /* [disabled]height: 200px; */
       /* [disabled]margin-right: 200px; */
       /* [disabled]margin-bottom: 25px; */
       margin-left: 0px;
       color: #0F0;
       font-weight: bold;
       text-align: center;
       padding: 4px 0;
       clear: left;
    }
    
    #head_Foot a
    {
       color: #FFFF80;
    }
    
    
    </style>
    
    <script type="text/javascript"> 
       /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.", "the quick brown fox jumps over the lazy dog.", "PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS.", "pack my box with five dozen liquor jugs."]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*4)]+" ")
    }
    </script>
    
    </head>
    <body>
    <div id="head_Main">
    
       <div id="head_Wrap">
    
          <div id="head_Logo">
             <a href="http://www.webintersect.com">
                <img src="logo.png" alt="logo" title="Web Intersect Home">
             </a>
          </div><!--End of head_Logo -->
    
          <div id="head_News">THIS IS A MSG AREA!!!</div>
    
          <nav id="head_Menu">
             <ul>
                <li id="current"><a href="http://www.yahoo.com">HOME</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">CONTACT US</a></li>
                <li><a href="#">LOG IN</a></li>
             </ul>
          </nav><!--End of head_Menu -->
    
          <div id="head_Info">&nbsp;<img src="pmFlash.gif" width="17" height="12" alt="fuk">&nbsp;EMAILS ( 44 )</div>
    
          <div id="head_Lead"><img src="728x090_uap.gif" width="728" height="90"</div>
    
             <div id="page_Name"><div class="name_Text">HOME</div>
             </div><!--End of page_Name -->
    
             <div id="page_Body">
    
                <div id="page_Left">
                   <div id="left_Body"><div class="left_Text"><script type="text/javascript">filltext(45)</script></div>
                   </div><!--End of left_Body -->
                   <div id="left_Body"><div class="left_Text"><script type="text/javascript">filltext(45)</script></div>
                   </div><!--End of left_Body -->
                </div><!--End of page_Left -->
    
             </div><!--End of page_Body -->
    
             <div id="page_Rite">
                <div id="rite_Body"><script type="text/javascript">filltext(14)</script>
                </div><!--End of rite_Body -->
             </div><!--End of page_Rite -->
    
          <div id="head_Foot">FOOTER</a>
          </div>
    
       </div><!--End of head_Wrap Div -->
    
    </div><!--End of head_Main Div -->
    
    </body>
    </html>


    Any help regarding this would greatly be appreciated.
    Last edited by Beverleyh; 07-24-2013 at 05:03 AM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,970
    Thanks
    16
    Thanked 307 Times in 305 Posts
    Blog Entries
    11

    Default

    The first problem ( major ) is that my "rite content" loses it's bottom padding when the screen res goes beyond 1400px. I don't know all that much about css, but I wonder why it would work on smaller res but changes on higher. I basically want a bottom padding of 10px above my footer. If the left content is larger, well the right padding would not matter, but when the left is shorter than the right, then the right padding should kick in.
    There is no padding-bottom defined in the stylesheet for #rite_Body. But given that the bottom of the right hand panel meets with the footer bar when there is more content there than in the main body, you should probably add a margin-bottom:10px; on #page_Rite too.

    Second problem is cosmetic in that the space between the "home" section and "footer" section have 10px, but the space between the first portion of the left content and the second is greater. I would like to get it to be the space, 10px for example. There could be more sections, so it needs to look uniform regardless of how many sections I have.
    That is because you've defined both a padding-top:10px; and padding-botton:10px; on #left_Body so if you have more than one stacked on top of each other, the gap between will total 20px. To fix that, first change the ids to classes - ids need to be unique/only used once on a web page - and remove padding-top:10px; from the CSS. Then you'll need to replace the padding-top:10px; on the upper box only which can easily be done with an inline-style or by defining it on another class.

    Third problem, and again, it is minor and perhaps not worth mentioning, but looking at the code below, I would like to have the "rite page" within the "page body". Why??? I just think that it belongs to the main content section and should follow the "left page".
    The CSS works for the div structure you have so there's no need to move anything or worry about the side bar being outside of #page_Body. Is it just the naming association that's bothering you? Would you be giving it the same thought if its id was something else? It really shouldn't matter if its already in working order so don't let it worry you. And as far as Google is concerned, the side bar content does already follow that of the main page so the prioritisation of content is already fine.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    pepe_lepew1962 (07-25-2013)

  4. #3
    Join Date
    Nov 2008
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your time and solution.
    \_/ Cheers

Similar Threads

  1. Replies: 5
    Last Post: 01-18-2010, 06:01 PM
  2. number changing to higher integer
    By auriaks in forum PHP
    Replies: 5
    Last Post: 12-30-2009, 02:41 PM
  3. Replies: 4
    Last Post: 10-28-2005, 07:05 PM
  4. Replies: 2
    Last Post: 05-29-2005, 04:53 PM

Bookmarks

Posting Permissions

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