Link to home
Start Free TrialLog in
Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America

asked on

Have white space grow / shrink

http://test.huskyshoponline.com/coursesearch.aspx
http://test.huskyshoponline.com/login.aspx

See how there is a bunch of white space before the footer at the bottom?

For example, on this page:

http://test.huskyshoponline.com/login.aspx

the footer should be visible perhaps half an inch below the last of the links on the left hand side.  So you have the link for Publisher Reps and then a little bit of white space, and then the links for "join email list", twitter and facebook, etc.


How can I have this space grow and shrink according to content needs?
SOLUTION
Avatar of askurat1
askurat1
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jonahzona
jonahzona
Flag of United States of America image
Well, try this.

I changed a bunch, so take a look and see if you like it.

Make sure you back up before using.



  
body {
    background-image: url("images/background.png");
    background-position: center center;
    background-repeat: repeat;
    font-family: Arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
.C {
    clear: right;
    float: left;
    height: 211px;
    position: relative;
    width: 1024px;
}
.D {
    background-color: White;
    float: left;
    height: 100%;
    width: 814px;
}
#E {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    min-height: 439px;
    width: 210px;
}
.F {
    clear: right;
    float: left;
    padding-top: 14px;
    text-align: center;
    width: 200px;
}
.G {
    float: left;
    list-style: none outside none;
    padding-left: 60px;
    text-align: left;
    width: 190px;
}
.H {
    clear: both;
    float: left;
    height: 250px;
    position: relative;
    width: 1024px;
}
.I {
    float: left;
    height: 230px;
    position: relative;
    width: 265px;
}
.J {
    color: White;
    float: right;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    height: 100px;
    padding-top: 20px;
    position: relative;
    width: 700px;
}
.K {
    float: left;
    height: 100px;
    position: relative;
    width: 654px;
}
.O {
    float: left;
    height: 30px;
    position: relative;
    width: 1024px;
}
.P {
    float: left;
    height: 150px;
    position: relative;
    top: -30px;
    width: 400px;
}
.Q {
    float: left;
    height: 14px;
    position: relative;
    width: 980px;
}
.R {
    float: right;
    height: 40px;
    position: relative;
    width: 1024px;
}
.S {
    clear: right;
    color: White;
    float: right;
    height: 30px;
    position: relative;
    width: 300px;
}
.T {
    clear: left;
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    position: relative;
    width: 200px;
}
.U {
    float: right;
    height: 150px;
    position: relative;
    width: 230px;
}
.V {
    float: left;
    height: 150px;
    position: relative;
    width: 20px;
}
.W {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 1024px;
}
.X {
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    width: 250px;
}
.Y {
    clear: right;
    float: left;
    height: 120px;
    width: 1024px;
}
.Z {
    float: left;
    height: 40px;
    width: 1024px;
}
.A1 {
    float: left;
    width: 1044px;
}
.C1 {
    clear: right;
    float: left;
    height: 20px;
    position: relative;
    width: 1024px;
}
.D1 {
    clear: both;
    float: left;
    margin-top: 20px;
    position: relative;
}
.lefthandnav a {
    color: #000000;
}
.rfdSelect .rfdSelectOuter span, .rfdSelectBox ul {
    text-align: left;
}

Open in new window

Avatar of jonahzona
jonahzona
Flag of United States of America image
I forgot that I did make ONE markup change.

Close the Al div before the footer.

Get the footer OUTSIDE this div.
Avatar of jonahzona
jonahzona
Flag of United States of America image
Sorry, had to make one more change.

  
body {
    background-image: url("images/background.png");
    background-position: center center;
    background-repeat: repeat;
    font-family: Arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
.C {
    clear: right;
    float: left;
    height: 211px;
    position: relative;
    width: 1024px;
}
.D {
    background-color: White;
    float: left;
    height: 100%;
    width: 814px;
}
#E {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    min-height: 439px;
    width: 210px;
}
.F {
    clear: right;
    float: left;
    padding-top: 14px;
    text-align: center;
    width: 200px;
}
.G {
    float: left;
    list-style: none outside none;
    padding-left: 60px;
    text-align: left;
    width: 190px;
}
.H {
    clear: both;
    float: left;
    height: 250px;
    position: relative;
    width: 1024px;
}
.I {
    float: left;
    height: 230px;
    position: relative;
    width: 265px;
}
.J {
    color: White;
    float: right;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    height: 100px;
    padding-top: 20px;
    position: relative;
    width: 700px;
}
.K {
    float: left;
    height: 100px;
    position: relative;
    width: 654px;
}
.O {
    float: left;
    height: 30px;
    position: relative;
    width: 1024px;
}
.P {
    float: left;
    height: 150px;
    position: relative;
    top: -30px;
    width: 400px;
}
.Q {
    float: left;
    height: 14px;
    position: relative;
    width: 980px;
}
.R {
    float: right;
    height: 40px;
    position: relative;
    width: 1024px;
}
.S {
    clear: right;
    color: White;
    float: right;
    height: 30px;
    position: relative;
    width: 300px;
}
.T {
    clear: left;
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    position: relative;
    width: 200px;
}
.U {
    float: right;
    height: 150px;
    position: relative;
    width: 230px;
}
.V {
    float: left;
    height: 150px;
    position: relative;
    width: 20px;
}
.W {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 1024px;
}
.X {
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    width: 250px;
}
.Y {
    clear: right;
    float: left;
    height: 120px;
    width: 1024px;
}
.Z {
    float: left;
    height: 40px;
    width: 1024px;
}
.A1 {
    float: left;
    width: 1044px;
}
.C1 {
    clear: right;
    float: left;
    height: 20px;
    position: relative;
    width: 1024px;
}
.D1 {
    clear: both;
    float: left;
    margin-top: 20px;
    position: relative;
}
.lefthandnav a {
    color: #000000;
}
.rfdSelect .rfdSelectOuter span, .rfdSelectBox ul {
    text-align: left;
}

Open in new window

Avatar of jonahzona
jonahzona
Flag of United States of America image
When I said FOOTER

I was referring to the H div.

This needs to be OUTSIDE the AL div.
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

While testing in Mozilla:

http://test.huskyshoponline.com/
http://test.huskyshoponline.com/coursesearch.aspx


Still off a bit....but very close!

Just saw you post again, I think.....so this may be premature.....
Avatar of jonahzona
jonahzona
Flag of United States of America image
Looks like you closed the DIV in the wrong spot.

I added an additional </div>

just before <div id="H">

This was so that the Al div would only contain E and D.

Naturally, because you closed it early, you would have to remove the </div> that was closing it prior to that.
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

I just moved "H" outside the "A1" div.


Apparently did not do it correct?


Let me slow down and wait for your reply to THIS.
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

Perhaps I should post my CURRENT CSS and MARKUP?
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

Waiting to hear from you.

Please confirm most recent suggestion.
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

Here is my current CSS:

body {
    background-image: url("images/background.png");
    background-position: center center;
    background-repeat: repeat;
    font-family: Arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
.C {
    clear: right;
    float: left;
    height: 211px;
    position: relative;
    width: 1024px;
}
.D {
    background-color: White;
    float: left;
    height: 100%;
    width: 814px;
}
#E {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    min-height: 439px;
    width: 210px;
}
.F {
    clear: right;
    float: left;
    padding-top: 14px;
    text-align: center;
    width: 200px;
}
.G {
    float: left;
    list-style: none outside none;
    padding-left: 60px;
    text-align: left;
    width: 190px;
}
.H {
    clear: both;
    float: left;
    height: 250px;
    position: relative;
    width: 1024px;
}
.I {
    float: left;
    height: 230px;
    position: relative;
    width: 265px;
}
.J {
    color: White;
    float: right;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    height: 100px;
    padding-top: 20px;
    position: relative;
    width: 700px;
}
.K {
    float: left;
    height: 100px;
    position: relative;
    width: 654px;
}
.O {
    float: left;
    height: 30px;
    position: relative;
    width: 1024px;
}
.P {
    float: left;
    height: 150px;
    position: relative;
    top: -30px;
    width: 400px;
}
.Q {
    float: left;
    height: 14px;
    position: relative;
    width: 980px;
}
.R {
    float: right;
    height: 40px;
    position: relative;
    width: 1024px;
}
.S {
    clear: right;
    color: White;
    float: right;
    height: 30px;
    position: relative;
    width: 300px;
}
.T {
    clear: left;
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    position: relative;
    width: 200px;
}
.U {
    float: right;
    height: 150px;
    position: relative;
    width: 230px;
}
.V {
    float: left;
    height: 150px;
    position: relative;
    width: 20px;
}
.W {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 1024px;
}
.X {
    color: White;
    float: left;
    height: 30px;
    margin-top: 20px;
    width: 250px;
}
.Y {
    clear: right;
    float: left;
    height: 120px;
    width: 1024px;
}
.Z {
    float: left;
    height: 40px;
    width: 1024px;
}
.A1 {
    float: left;
    width: 1044px;
}
.C1 {
    clear: right;
    float: left;
    height: 20px;
    position: relative;
    width: 1024px;
}
.D1 {
    clear: both;
    float: left;
    margin-top: 20px;
    position: relative;
}
.lefthandnav a {
    color: #000000;
}
.rfdSelect .rfdSelectOuter span, .rfdSelectBox ul {
    text-align: left;
}

Open in new window










Here is the current MARKUP:  (for the master page)


(just posted the relevant bits)

<body id="bodytaguconn" runat="server">
    <form id="mainbodyformuconn" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="toolKit" AllowCustomErrorsRedirect="true"
        EnablePartialRendering="true">
        <Scripts>
            <%-- <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAim5Ru7zlC5LJzi3w0XqvXxTNtfGCkjY40i7thHFIqUc19l7sbRSfcvST6GfqHG6636f3bKKwrbkUbA"></script>
			<script language="javascript" type="text/javascript">
			//<![CDATA[
				google.load("jquery", "1");
			//]]>
			</script>
		   
            --%>
            <atlas:ScriptReference Path="~/scripts/thickbox.js" />
            <atlas:ScriptReference Path="~/scripts/contact.js" />
        </Scripts>
    </ajaxToolkit:ToolkitScriptManager>



<div id="W" class="W">
<div id="C" class="C">
<div id="C1" class="C1"></div><%--end div c1--%>
<div id="O" class="O">
<div id="S" class="S"><uc10:Login1 ID="Login1" runat="server" /></div><%--end div s--%>
</div><%--end div o--%>
<div id="Y" class="Y">
<div id="V" class="V"></div><%--end div v--%>
<div id="P" class="P">
<a href="http://test.huskyshoponline.com/Default.aspx" runat="server"><cc1:themeawareimage ID="ThemeAwareImage2" runat="server" ImageUrl="new_header_angled2.png" /></a>
</div><%--end div p--%>
<div id="U" class="U">


<div id="T" class="T"><object id="searchtcsdatc" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
            width="200" height="22" align="left">
            <param name="allowScriptAccess" value="always" />
            <param name="allowFullScreen" value="false" />
            <param name="movie" value="/searchtcs.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="wmode" value="transparent" />
            <embed src="/searchtcs.swf" id="searchtcsdatcembed" quality="high" bgcolor="#ffffff"
            width="200" height="22" name="searchtcsdatcsname" align="left" allowscriptaccess="always"
            allowfullscreen="false" wmode="transparent" type="application/x-shockwave-flash"
            pluginspage="https://www.adobe.com/go/getflashplayer" />
</object>
</div><%--end div t--%>
<div id="X" class="X"><uc1:TopCart ID="TopCartHusky" runat="server" /></div><%-- end div x --%>
</div><%--end div u--%>
</div><%--end div y--%>


<div id="Z" class="Z">
<div id="N" class="N">
</div>
<%--end div n--%>
<div id="R" class="R">
<uc5:HorizMenu ID="HorizMenu1" runat="server" />
</div><%--end div r--%>
</div><%--end div z--%>

</div><%--end div c--%>
<div id="A1" class="A1">
<div id="E" class="E">

<div id="F" class="F"><cc1:themeawareimagebutton  ID="husky_dog" 
        runat="server" ImageUrl="husky-dog.png" PostBackUrl="http://bookstore.uconn.edu/departments/text/text_tg.htm" /></div><%--end div f--%>
<div id="G" class="G">
<!-- <uc3:Catalogs runat="server" ID="Catalogs1" /> -->

<div class="lefthandnav">
<div class="catnav3"><a id="A1" href="http://test.huskyshoponline.com/coursesearch.aspx" runat="server">Textbooks</a></div>
<div class="catnav2"><a id="A2" href="http://bookstore.uconn.edu/departments/text/text_stu.htm" runat="server">Student Info</a></div>
<div class="catnav2"><a id="A3" href="http://bookstore.uconn.edu/departments/text/text_fac.htm" runat="server">Faculty Info</a></div>
<div class="catnav2"><a id="A4" href="http://bookstore.uconn.edu/departments/text/text_refund.htm" runat="server">Refund Info</a></div>
<div class="catnav2"><a id="A5" href="http://bookstore.uconn.edu/departments/text/text_bb.htm" runat="server">Buy Back Info</a></div>
<div class="catnav2"><a id="A6" href="http://bookstore.uconn.edu/departments/text/text_pub.htm" runat="server">Publisher Reps</a></div>
</div>

</div><%--end div g--%>
</div><%--end div e--%>
<div id="D" class="D">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>    
</div><%--end div d--%>
</div><%--end div a1--%>


<div id="H" class="H">



<div id="I" class="I">

<div id="D1" class="D1">

<cc1:ThemeAwareImageButton ID="ThemeAwareImageButtonSJoinEmail" runat="server" ImageUrl="emailsignup.png" PostBackUrl="http://bookstore.uconn.edu/mailing.htm"></cc1:ThemeAwareImageButton>


</div><%--end div D1--%>


</div><%--end div i--%>




<div id="J" class="J">

<uc11:HuskyFooter ID="HF" runat="server" />

</div><%--end div j--%>





<div id="K" class="K">








<!-- BEGIN FOOTER | DO NOT EDIT THIS AREA -->
<%--<div id="footer">
<div class="content">
<div class="footer_r">
<a href="http://bookstore.uconn.edu/">UConn Co-op Bookstore</a> &nbsp;·&nbsp;Phone:
(860) 486-3537<br />
Questions: <a href="mailto:asktheco-op@bookstore.uconn.edu">Co-op Help/Info</a><br />
Webmaster: michael.jean@uconn.edu<br />
</div>
<div class="footer_l">
<br />
Powered by:<br />
<a href="http://total-computing.com/">
Total Computing</a><br />
</div>
</div>
</div>--%>
<!-- END FOOTER -->




</div><%--end div k--%>
</div><%--end div b1--%>
</div><%--end div h--%>




</div><%--end div w--%>


    </form>


</body>
</html>

Open in new window

Avatar of jonahzona
jonahzona
Flag of United States of America image
Well, it looks like your markup is a little funky, but you got the H outside the Al which is what you needed.

Also, be careful, you have a lot of redundancy. What I mean by that is you give a class (D in this case) properties in one place, and then define them again someplace else. You will always run into problems doing it this way.

I will post fix in a minute. Working through it.

ASKER CERTIFIED SOLUTION
Avatar of jonahzona
jonahzona
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jonahzona
jonahzona
Flag of United States of America image
Also, change the A1 class to this:

.A1 {
    background: none repeat scroll 0 0 white;
    float: left;
    width: 1024px;
}

Open in new window

Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

BINGO!!!!!!!!!!!!!!


Looking MUCH better now!!!!!!!!!



I tried a few pages NOT part of my original question:


http://test.huskyshoponline.com/SecureOrderForm.aspx

(use un/pw

m    i    k    e

(spaces removed) to authenticate if you need to...then buy a textbook to get to the screen.



Something happened:



 User generated image
Avatar of jonahzona
jonahzona
Flag of United States of America image
The reason it is doing that is because of the

.AEPS {
    height: 100%;
   left: 0;
    position: absolute;
   top: 0;
}

Change it to:

.AEPS {
    height: 100%;
    position: absolute;
}

Open in new window

Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

This helped.

Still not quite there.

See what happens now please.
Avatar of jonahzona
jonahzona
Flag of United States of America image
Already working on it........
Avatar of jonahzona
jonahzona
Flag of United States of America image
The problem here is the iframe.

Trying to figure out how to get the parent DIV (D) to expand because of the iframe.
Avatar of jonahzona
jonahzona
Flag of United States of America image
Alright, remove the position: absolute from .AEPS.

Now?
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

Fixed it.


I have more pages that need some tweaking.


Should I post them as new questions?
Avatar of jonahzona
jonahzona
Flag of United States of America image
Whatever you want. Don't mind helping.

Also wouldn't mind more points....

:P
Avatar of jonahzona
jonahzona
Flag of United States of America image
@SSupreme

LOL.
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

Of course!!!

Let me settle this question...then keep eyes peeled for more.
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

Just saw Supreme's post.

::: nice :::::
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

thx....accurate and fast....all I could ask for!