Jump to content

padding changes with higher resolutions

pepelepew1962

By pepelepew1962
in CSS Help

 Share

Recommended Posts

pepelepew1962 Member

pepelepew1962

Posted
Posted

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/

<!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*/
   ; /*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"> <img src="pmFlash.gif" width="17" height="12" alt="fuk"> 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.

Link to comment
https://forums.phpfreaks.com/topic/280447-padding-changes-with-higher-resolutions/
Share on other sites
floridaflatlander Regular Member

floridaflatlander

Posted
Posted

You need to get firefox's firebug and use it. But when I look at it in firebug page_body has no padding or margins and the space between the page_body and the footer comes from the padding of a div inside another div inside page_body.

 

Look at the class "left_Text" in firebug and see what happens to it's padding ... I don't know what happens to it when you increase the screen size. After you do that you could also try getting rid of left_text bottom padding and use a margin bottom for page_body.

 

I'm assuming this isn't your code, or maybe you've gotten pieces from this or that or the other. Also it has a God awful amount of divs in it and you can't name id's the same name in the same file. Always run your css through here http://jigsaw.w3.org/css-validator/ and your html through here http://validator.w3.org/ .

 

PS you're not closing your image tag on line 310 and .... I think you can use chrome to look at the code and style too.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.