Solved

How can I get this content to scroll?

Posted on 2015-02-05
7
75 Views
Last Modified: 2015-02-12
Head out to http://www.brucegust.com/campaign/OOP/csv_upload/commentary.php

If you look at line 43 of the source code, you'll see how I've got my content within the <div id="site_content"> div.

My stylesheet, which is at http://www.brucegust.com/campaign/OOP/csv_upload/css/style.css has that set as "overflow:auto;"

I was always under the impression that by incorporating that dynamic into your div, any content that spills outside the height of your browser, a scroll bar appears and while everything else remains fixed, only the content within that div scrolls.

Right now, the whole page scrolls and I don't know what I'm doing wrong.

How can I get my internal conent to scroll and leave my header etc in tact?
0
Comment
Question by:brucegust
7 Comments
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 167 total points
Comment Utility
thats an incorrect assumption

overflow auto will expand the div to accommodate its content. it affect the whole page height.

if you want a scrolling div, give it a height and overflow:scroll
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 167 total points
Comment Utility
Instead of setting the height of your content, which varies on every screen, I would set the top margin to -200px (height of the header) on the content and wolud set position to fixed on the header.
Header stays at the top and the whole content is scrollable without having to set overflow to scroll.

NB You probably need to make the header 100% wide and set the z-index to at least 1 or higher.
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
You just need to se a value for the height of the div: if you don't do it, the div is expanded a needed, but if you set the height, than a scrollbar will be added if the div content exceeds the height set.
To see this, just set the height to 500px and voilà, the scrollbar will appear :-)
I uggest to use Firefox and Firebug: opening Firebug you can browe through your html, select an element and change the related style rules in the right panel seeing the effect of the change in real-time.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 33

Expert Comment

by:Slick812
Comment Utility
greetings brucegust, , I looked at your page for "CSV Upload Station Page", , I can see maybe why you want to have your content scroll in a <div>, BUT, from some of what I have seen, you may do better to re examine your entire page presentation, If you do have the <div id="site_content"> as a set height with it scrolling, the Div scroll bar will be near (or maybe next to) the usual Entire Normal page scroll bar, which to me, would be confusing and not good page user design.  You might think about doing a more modern web design, where you have "titled" page horizontal "Subject" areas, that scroll individually, that way the user can more quickly scroll entire page to see the "Subjects" there, and then scroll on the subject info in a separate <div>
(some sites use a different variation where they reduce the <div> height from full, and then add a "Read More" touch-click point at bottom of <div> , so the touch will expand the <div> to full height.)

I can not help myself, but I have to say you method of Code presentation in your <div id="code_container"> is extremely inefficient, , I have done much Line numbered Code displays, and to use you numbered list method is a royal pain to  set up or modify,
using the -
&nbsp;&nbsp;&nbsp;&nbsp;
as you do, is bad HTML these days, any way I look at it.
I have found success in using a two column <table> and the <pre> tag. you might look at how EE sets up their Code block
0
 

Author Comment

by:brucegust
Comment Utility
Albert, I'm trying to incorporate your suggestion and I am poised on the threshold of greatness, but I'm stuck and I wanted you or some other ninja to take a look at it.

I've got all my code below, just so you've got the whole picture, but the bottom line is that I've made my header and my navbar "fixed," along with my footer. Had no problem in adjusting the margins so everything is positioned correctly, but when I get to my content, it seems no matter how I attempt to adjust the "site_content" div, I can't get it to move.

Of course, this is all with an eye torwards breaking my page into three separate sections: header, body, footer with the body section being scrollable.

So, here's my code as well as a screen shot of my dilemma. What do I need to change in order to be able to correctlyl position my "site_content" div. Right now it's stuck with some of the content hidden behind my header. I need to move it down and I don't know how.

Stylesheet:

html { 
  height: 100%;
}

body { 
  font-family: Helvetica, Microsoft Sans Serif;
  font-size: 11pt;
  background: #FFF;
  color: #000;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  }
  
.body_wrapper {
width:100%;
height:100%;
}
  
 .header {
 position:fixed;
 height:189px;
 width:100%;
 min-width:1260px;
 margin:0px;
 background-image:url(../images/background.jpg);
 background-repeat: repeat-x;
 }
 
 #left_graphic {
 width:566px;
 height:189px;
 position:relative;
 z-index:2; 
 }
 
 #right_graphic {
 width:688px;
 height:189px;
 position:relative;
 float:right;
 z-index:2; 
 background-image:url(../images/right_header.png);
 }
 
 #right_tabs {
 width:528px;
 height:53px;
 position:relative;
 margin-left:160px;
 }
 
 #clockwork {
 position:relative;
 width:210px;
 height:35px;
 margin-left:466px;
 margin-top:17px;
 z-index:4;
 font-family:arial;
 size:10pt;
 color:#ffffff;
 text-align:right;
 }
 
 #search_box {
width:154px;
height:27px;
margin-top:0px;
margin-left:530px; 
 }
 
 #search_button {
 position:relative;
 height:27px;
 width:26px;
 margin-top:-27px;
margin-left:650px; 
 }
 
 input.search_box {
margin-top:3px;
margin-left:1px;
width:113px;
height:18px;
border:#ffffff; 
}

input.clock {
width:100px;
height:18px;
border:none; 
text-align:right;
background:transparent;
color:#ffffff;
}

.nav_bar {
position:fixed;
margin-top:159px;
background-image:url(../images/nav_bar_background.png);
height:29px;
width:100%;
min-width:1300px;
background-repeat:repeat-x;
z-index:5;
}

.navcontainer {
margin:auto;
width:1300px;
height:29px;
position:relative;
z-index:6;
}

.navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
.navcontainer ul li {
position: relative;
display: block;
float: left;
margin-left:35px;
z-index:10;
}

.navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
.navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
.navcontainer ul ul {
display: none;
background: none;
margin-top: 0px;
padding-top: 0;
position: absolute;
background: rgba(204,204,204, .7);
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
border-radius:6px;
-moz-border-radius:6px;
}

.navcontainer ul ul li {
float:none;
margin:0px;
padding:0;
}

.navcontainer ul ul li a {
display: block;
float:none;
margin: 0 0 0 10px;
padding: 0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
padding-left:0px;
z-index:10;
}	

.navcontainer ul ul li:hover > ul 
{
display: block;
}

.navcontainer ul ul li:hover {
display:block;
}

.navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

a.home {
display:inline-block; /**** important ****/
margin-top:2px;
width:39px;
height:12px;
background-image:url(../images/button_home.png);
background-repeat:no-repeat;
}

a.regions {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:51px;
height:29px;
background-image:url(../images/button_regions.png);
background-repeat:no-repeat;
}

a.planning {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:58px;
height:29px;
background-image:url(../images/button_planning.png);
background-repeat:no-repeat;
}

a.budget {
display:inline-block;
margin-top:2px;
margin-left:25px;
width:189px;
height:29px;
background-image:url(../images/button_budget.png);
background-repeat:no-repeat;
}

a.system_perf {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:150px;
height:29px;
background-image:url(../images/button_system_perf.png);
background-repeat:no-repeat;
}

a.network_ops {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:132px;
height:15px;
background-image:url(../images/button_network_ops.png);
background-repeat:no-repeat;
}

a.reference {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:66px;
height:29px;
background-image:url(../images/button_reference.png);
background-repeat:no-repeat;
}

a.reports {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:120px;
height:15px;
background-image:url(../images/button_reports.png);
background-repeat:no-repeat;
}

a.footer_link {
color:white;
text-decoration:none;
}

a.faq {
color:#000000;
font-weight:bold;
text-decoration:none;
}

a.faq:hover {
color:#000000;
text-decoration:underline;
}

a.faq:visited {
color:#000000;
text-decoration:none;
}

a.nav_menu_th {
text-decoration:none;
color:#ffffff;
}
a.nav_menu_th:hover {
text-decoration:underline;
color:#ffffff;
}

a.nav_menu_th:visited {
text-decoration:none;
color:#ffffff;
}

a.nav_menu_td {
text-decoration:none;
color:#000000;
}
a.nav_menu_td:hover {
text-decoration:underline;
color:#000000;
}

a.nav_menu_td:visited {
text-decoration:none;
color:#000000;
}

.marquee_background {
position:relative;
height:250px;
width:100%;
background-image:url(../images/marquee_background.jpg);
background-repeat:repeat-x;
z-index:4;
}

.marquee {
width:1367px;
height:250px;
margin:auto;
background-image:url(../images/marquee.png);
}

.global_watermark {
margin:auto;
position:relative;
width:1367px;
height:640px;
background-image:url(../images/globe_watermark.jpg);
background-repeat:no-repeat;
}

.column_headings {
position:relative;
width:1367px;
height:113px;
background-image:url(../images/column_headings.png);
margin:auto;
margin-top:-25px;
z-index:5;
}

.column_wrapper {
width:1367px;
height:250px;
margin:auto;
}

.app_month {
margin-left:65px;
position:relative;
height:250px;
width:400px;
float:left;
overflow:auto;
}

.headlines {
margin-left:15px;
position:relative;
height:250px;
width:400px;
float:left;
overflow:auto;
}

.faqs {
margin-left:15px;
position:relative;
height:250px;
width:400px;
float:left;
}

.text_boxes {
clear:both;
width:1359px;
height:214px;
margin-top:10px;
margin:auto;
background-image:url(../images/text_boxes.png);
overflow:auto;
}

.important {
position:relative;
float:left;
margin-top:23px;
margin-left:85px;
width:562px;
height:153px;
}

.meet_team {
position:relative;
float:left;
margin-top:23px;
margin-left:65px;
width:562px;
height:153px;
}

.site_content {
clear:both;
margin-top:500px;
width:1000px;
margin-bottom:-30px;
overflow:auto;
margin:auto;
background-color:#cccccc;
}

.main_body {
width:1000px;
height:auto;
overflow:auto;
margin:auto;
}

.title_text {
font-size:16pt;
font-weight:bold;
}

.footer {
position:fixed;
bottom:0;
height:30px;
width:100%;
background-image:url(../images/footer.jpg);
background-repeat:repeat-x;
font-size:9pt;
color:#ffffff;
text-align:center;
}

.sub_menu {
position:relative;
float:right;
width:600px;
text-align:right;
margin-top:15px;
}

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:auto;
border: 1px solid #d7d4d4;
 }
 
 table.page_display {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:650px;
border: 1px solid #d7d4d4;
 }
 
 td.csv_sample {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#cccccc;
 }
 
  td.csv_sample_black {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#000000;
 color:#ffffff;
 font-weight:bold;
 }
 
 td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
 }
 
 td.title {
 text-align:right;
 }
 
 table.regions {
border:none;
 margin:auto;
 }
 
 table.regions th {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 width:auto;
 }
 
  table.regions td.regions_header {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 white-space:nowrap;
 }
 
 
 table.regions td {
 line-height:20px;
 text-align:center;
 vertical-align:top;
 width:300px;
 height:20px;
 white-space:nowrap;
 }
 
 table.regions_list {
 border-radius:6px;
-moz-border-radius:6px;
background-color:#ffffff;
 border: 1px solid #cccccc;
 }
 
 table.regions_list td {
 text-align:left;
 line-height:20px;
 height:20px;
 }
  
 .conclusion {
width:750px;
margin:auto;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}

 .callout {
width:250px;
margin-right:10px;
position:relative;
float:left;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}

#code_container {
border:1px solid #000000; 
width:807px; 
height:250px; 
overflow:auto; 
background-color: #013c76;
font-family:Arial; 
color:#ffffff; 
font-size:10pt; 
margin:auto;
}

ol {
background-color:#ffc; 
color:#ffffff; 
padding-left:8px;
padding-right:10px;
margin-top:0px; 
margin-bottom:-12px;
}

ol li {
line-height:8px;
padding-top:3px; 
padding-bottom:3px; 
padding-left:3px;
}

ol li span {
color:#000000;
}

.slidingDiv {
	margin-top:10px;
	margin-bottom:10px;
    height:auto;
	padding-left:10px;
	padding-right:10px;
	background-color:#ffffff;
	box-shadow: 5px 5px 10px #cccccc;
	border:1px solid #cccccc; 
	 border-radius:6px;
	-moz-border-radius:6px;

}
 
.show_hide {
    display:none;
}

a.show_hide {
color:#7c7c7c;
text-decoration:none;
}

a.show_hide:hover {
color:#000000;
text-decoration:none;
}

 .hide-row tr { display:none; }

Open in new window


HTML:

<?php require_once('set_up_header.php'); ?>
	<div class="site_content"><!-- this is the area that you want to scroll, in order to ensure that the -->
	
	<br><br><span class="title_text">South Area Network FAQs</span><br><br>Below is a list of faqs, many of which will be especially helpful to a newcomer who's trying to get familiar with the acronymns that are common in the wireless industry.<br><br><hr><br><table width=100%>
<script type="text/javascript">
 $(document).ready(function(){
 
		$(".slidingDiv").hide();
		$(".show_hide").show();
 
	$('.show_hide').click(function(){
	$(this).next().slideToggle();
	});
	
});
 </script>
<tr><td><b>1)&nbsp;Throughput, Uplink and Downlink...</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br>Throughput - the amount of traffic that's flowing through a connection <br />Uplink - traffic that's going from device to tower <br />Downlink - traffic that's going from tower to device<br><br></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><b>2)&nbsp;What are Antenna Planning Tools and Additional RF Tools</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br>The "Verizon Planning Instrument" (VPI), tracks performance and forecasts future network needs by using a series of advanced statistical models. It's broken down into two main sets of tools: <br /><br /><strong>I)</strong> <span class="blue"><strong>Antenna Planning Tools</strong></span><strong> and <span class="blue">Additional RF Tools</span></strong> <br /><br />&nbsp;&nbsp;&nbsp;&nbsp; <strong>A) Antenna Planning Tools</strong> <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>1) LTE</strong> <br /><br />Estimates future data usage using the following LTE measurements. LTE stands for "Long Term Evolution" which is more commonly known as "4G." It's a standard of wireless communication. <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>a) The measurements that are being taken are:</strong>
<ul>
<li>Physical Resource Block Utilization (PRBU)</li>
<li>Average Eligible User per TTI (ASEU)</li>
<li>Forward Data Volume (MByte) (FDV)</li>
<li>Average Active Connections (AvgAC)</li>
<li>Max Active Connectinos (MaxAC)</li>
<li>Forward Throughput (Mbps) (Fwd TP)</li>
</ul>
You retrieve data by running a scenario. You'll choose either an Area, an Area / Vendor, Area / Region or a Switch. Switch output is displayed within the tool, all other options result in a link that is then used to download the requested info. Once you've got the data in front of you, you're looking at overall usage, comparing FDV (Foward Data Volume) versus FDV Capacity. When you look at the graphical representation of these values, you can get a good idea of the "exhaust date" (the time where the usage has exceeded capacity). One term that comes up is "CPT," otherwise known as "Contactless Power Transfer." It's the CPT Output that's your defining value. <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>b) Four Sections Provided...</strong> <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>i) Trend Settings</strong>:
<ul>
<li>Projected Data: indicates the date you want to forecast to</li>
<li>Percentile Offset: adjusts trend line / projected usage based on Busy-Hour Actual and Normalized (BhUsgActl / BhUsgNrm)</li>
<li>Smoothing Window: gives you a visual "median" so you can better appreciate the overall curve of the graph / data. It's also very helpful in identifying dramatic changes.</li>
<li>Delta Sensitivity: allows user to adjust how "sensitive" the graph should be in illustrating discontinuities</li>
</ul>
<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ii) Settings</strong>: <br /><br />Allows you to adjust the targeted user throughput. The minimum user (MinUsrTP) and the maximum user connection (MxUsrConn) <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>iii) Market Growth Factor</strong> <br /><br />The estimated growth factor is based on external sources, such as Headquarters, Business Development and / or Marketing projections. Check with HQ Planning or Area Planning before changing these fields. <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>iv) Toolbox</strong> <br /><br />Allows you to export the results in Excel or PDF. You can also access the maps and user guide in this section.&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>2) DO</strong> <br /><br />Estimates future data usage in carrier planning using least-squares linear regression (LSLR). You're going to use the same kind of interface as you did with LTE. You do have another option with "Carr Harvest Factor." <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>a) Carr Harvest Factor</strong> <br /><br />Allows you to set a threshold used to identify excess carriers. <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>3) APT (1X)</strong> <br /><br />Estimates future data usage in carrier planning using least-squares linear regression (LSLR). You're going to use the same kind of interface as you did with LTE. You do have another option with "Scaling Factor." <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>a) Scaling Factor</strong> <br /><br />Used to scale sector capacity. <br /><br />&nbsp;&nbsp;&nbsp;&nbsp; <strong>B) Additional RF Tools</strong> <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>1) Channel Element Planning Tools</strong> <br /><br />Estimate future voice uage for use in channel elements planning. Terms that are used in this tool include LSLR (Least Squares Linear Regression) and some others... The data generated is used to determine how many channel elements are being used at a specific site. <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>2) Frame Configuration Tool</strong> <br /><br />Gathers and presents cell configuration information in order to assess hardware growth and path constraints. This aids in planning upgrades, change-outs and the necessary budget to cover those expenses.<br><br></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><b>3)&nbsp;What does ALU NDT mean?</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br>ALU NDT = Alcatel Lucent Network Design Tool (This is for the LTE Markets that use Alcatel Lucent (ALU equipment) which are the 3 regions in the western part of the South Area (Central Texas, Houston Gulf Coast, and South Central)<br><br></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><b>4)&nbsp;What does AWS stand for?</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br><p>AWS&nbsp;stands for Advanced Wireless Services</p><br><br></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><b>5)&nbsp;What does LTE stand for?</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br>LTE stands for "Long Term Evolution." It's commonly marketed as <strong>4G LTE</strong>, is a standard for wireless communication of high-speed data for mobile phones and data terminals. Read more about it by clicking <a href="http://en.wikipedia.org/wiki/LTE_(telecommunication)" target="_blank">here</a>.<br><br></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><b>6)&nbsp;What is ODAS?</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br><p>ODAS stands for Outdoor Distributed Antenna System</p><br><br></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><b>7)&nbsp;What is PCI?</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br>PCI - Physical Cell Identity<br><br></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><b>8)&nbsp;What is VPI?</b>&nbsp;<a href="#" class="show_hide">show / hide</a><div class="slidingDiv"><br>The "Verizon Planning Instrument" (VPI), tracks performance and forecasts future network needs by using a series of advanced statistical models. It's broken down into two main sets of tools: <span class="blue"><strong>Antenna Planning Tools</strong></span><strong> and <span class="blue">Additional RF Tools</span></strong>.West<br><br></div></td></tr><tr><td>&nbsp;</td></tr></table>
</div> <!-- close site_content -->


<div class="footer"><br>&copy; Verizon Wireless | South Area | All Rights Reserved | <a href="contact.php" style="color:#ffffff; text-decoration:none;">Contact</a></div>
		

Open in new window


screenshot
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 166 total points
Comment Utility
you have an "Override" for your top margin with your    margin:auto;     below it  try this -

.site_content {clear:both;
margin-top:500px;
width:1000px;
margin-bottom:-30px;
overflow:auto;
height: 14em; /* add a height for scroll */
background-color:#cccccc;}


leave out the  margin:auto;  , CSS will do the Last parameter spec in the CSS chain. You should be able to change the position in vertical placement with
margin-top:483px;

- - - - - -
If you need it centered, you can place the auto above th other margins -

.site_content {clear:both;
margin: auto;
margin-top:500px;
margin-bottom:-30px;
width:1000px;
overflow:auto;
height: 14em; /* add a height for scroll */
background-color:#cccccc;}

you can also use a 4 parameter call like
margin: 500px auto -30px auto;
0
 

Author Closing Comment

by:brucegust
Comment Utility
Figured it out guys! Thanks so much for your feedback.

It landed in a place that represents a hybrid of the input y'all gave. I went out and constructed some scaffolding of what I needed and played around with your suggestions until I was able to determine what I needed. Bottom line:

<style type="text/css">
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}

#subcontent {
width:1000px;
margin:auto;
}
</style>

At one point, I had the #content set to 100% which forced my scroll bard down past the footer. Once I eliminated that, it was all gold!

Thanks!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now