padding changes on higher resolutions [Archive]

pepe_lepew1962

07-24-2013, 02:28 AM

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*/
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>

<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>

<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>

<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>
<div id="left_Body"><div class="left_Text"><script type="text/javascript">filltext(45)</script></div>
</div>
</div>

</div>

<div id="page_Rite">
<div id="rite_Body"><script type="text/javascript">filltext(14)</script>
</div>
</div>

<div id="head_Foot">FOOTER</a>
</div>

</div>

</div>

</body>
</html>

Any help regarding this would greatly be appreciated.

Beverleyh

07-24-2013, 08:19 AM

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.