PDA

View Full Version : Gap at bottom of page



jaYKay
Oct 2nd, 2009, 02:14 PM
I have the following CSS




body
{
background-image: url('Images/background.png');
background-color: #e3ffe3;
background-repeat: repeat-x;
}
.content
{
background-color: #FFFFFF;
margin: 5px auto auto auto;
width: 990px;
height: auto;
position: relative;
font-size: small;
top: 0px;
left: 0px;
}
.WebTitle
{
font-family: Verdana;
font-size: xx-large;
color: #009900;
position: relative;
left: 0px;
height: 40px;
width: 990px;
text-align: center;
}
.PageTitle
{
font-family: Verdana;
font-size: large;
font-weight: bold;
position: relative;
height: 45px;
width: 990px;
text-align: center;
left: 0px;
color: #009900;
margin-bottom: 2px;
}
.DividerLine
{
background-color: #009900;
position: relative;
height: 1px;
width: 990px;
text-align: left;
left: 0px;
color: #009900;
}
.ImgBtns
{
position: relative;
width: 50px;
height: 50px;
}
.ImgBtnsDiv
{
border: 1px #CCCCCC solid;
position: relative;
height: auto;
width: 109px;
text-align: Center;
font-family: Verdana;
font-size: small;
color: #009900;
top: -20px;
left: 5px;
}
.Hyperlinks
{
border: 1px #009900 solid;
font: normal;
font-family: Verdana;
font-size: small;
color: #000000;
position: absolute;
text-decoration: none;
background-color: #F5F5F5;
}
.error
{
font-family: Verdana;
font-size: medium;
color: #FF0000;
width: 990px;
height: 15px;
position: relative;
text-align: center;
}

.footer
{
border-bottom: 1px solid #009900;
border-top: 1px solid #009900;
position: relative;
width: 988px;
height: 90px;
text-align: center;
top: -400px;
left: 0px;
clear: both;
}


Then the following HTML




<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Title="Report Portal"%>

<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1Calendar" TagPrefix="cc2" %>

<%@ Register assembly="C1.Web.C1WebChart.2" namespace="C1.Web.C1WebChart" tagprefix="C1WebChart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>


<link href="StyleSheet.css" rel="stylesheet" type="text/css" />


</head>



<body style="font-size: small">



<form id="Form1" runat="server" class="content">

<script language="javascript" type="text/javascript">

function SelectDate() {

var calendar = Sys.Application.findComponent("<%=C1Calendar1.ClientID%>");
var input = document.getElementById("imgbtnCalander");
calendar.popupBeside(input, C1.Web.UI.PositioningMode.bottomLeft);

}

</script>


<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:SqlDataSource ID="scsTemps" runat="server"
ConnectionString="<%$ ConnectionStrings:BSETemps %>" >
</asp:SqlDataSource>

<cc2:C1Calendar ID="C1Calendar1" runat="server" Height="180px" Width="230px" PopupMode="True" SelectionMode="Day, WeekNumber" ShowWeekNumbers="True" UseEmbeddedVisualStyles="True" VisualStyle="ArcticFox" AutoPostBackOnSelect="True" AllowQuickPick="False" WeekDayFormat="FirstTwoLetters">
</cc2:C1Calendar>



<asp:Image ID="imgLogo" runat="server" style="position: relative; left: 150px; top:5px;" Height="86px" ImageUrl="~/Images/Logo.png" Width="86px" />

<div style=" top: -56px;" id="Header" class="WebTitle" >
Report Portal
</div>

<hr style="top: -33px;" class="DividerLine" />

<div style="top: -34px; line-height: 23px;" id="PageTitle" class="PageTitle">

Bury St Edmunds, Temperature Reporting

<br />

<asp:Label ID="lblReportType" runat="server" Text="" ForeColor="#009900"
Font-Names="Verdana" Font-Size="Medium"></asp:Label>

</div>

<hr style="top: -34px;" class="DividerLine"/>

<div runat="server" id="buttons" class="ImgBtnsDiv">

<br />

<asp:ImageButton ID="imgbtnHome" runat="server" CssClass="ImgBtns"
ImageUrl="~/Images/Home.png" />
<br />
Home
<br />
<br />

<img id="imgbtnCalander" alt="" onclick="SelectDate()" src="Images/Date.png" class="ImgBtns" style="cursor: pointer" />
<br />
Dates
<br />
<br />

<asp:ImageButton ID="imgbtnScreenPDF" runat="server" CssClass="ImgBtns"
ImageUrl="~/Images/PDF.png" />
<br />
Screen
<br />
<br />

<asp:ImageButton ID="imgbtnDeptPDF" runat="server" CssClass="ImgBtns"
ImageUrl="~/Images/PDF.png" />
<br />
Department
<br />
<br />

<asp:CheckBox ID="cbxCurrent" runat="server" CssClass="ImgBtns" Checked="True"
Font-Names="Verdana" Font-Size="XX-Small"
Text="Include current temps page in PDFs" />

<br />
<br />
</div>

<div id="error" style="position:relative; top: -433px; left: 0px;" class="error">
<asp:Label ID="lblError" runat="server" visible ="false" Text="" ></asp:Label>
</div>

<div id ="SitePlan" style="border: 1px solid #CCCCCC; text-align:center; position: relative; left: 120px; height:700px; width: 865px; top:-428px; " >

<asp:Image ID="imgSitePlan" runat="server"
style="height: 700px; width: 860px;"
ImageUrl="~/Images/SitePlan.png"/>

<asp:LinkButton ID="hlLambButchery1" runat="server" CssClass="Hyperlinks"
style="top: 398px; left: 41px">Lamb Butchery 1</asp:LinkButton>

<asp:LinkButton ID="hlLambButchery2" runat="server" CssClass="Hyperlinks"
style="top: 665px; left: 290px">Lamb Butchery 2</asp:LinkButton>

<asp:LinkButton ID="hlSmokeChiller" runat="server" CssClass="Hyperlinks"
style="top: 30px; left: 409px">Smoke Chiller</asp:LinkButton>

<asp:LinkButton ID="hlMaturationSmChEnd" runat="server" CssClass="Hyperlinks"
style="top: 30px; left: 195px">Maturation Sm Ch End</asp:LinkButton>

<asp:LinkButton ID="hlMaturation2" runat="server" CssClass="Hyperlinks"
style="top: 198px; left: 730px">Maturation 2</asp:LinkButton>

<asp:LinkButton ID="hlBlastFreezer2" runat="server" CssClass="Hyperlinks"
style="top: 165px; left: 730px">Blast Freezer 2</asp:LinkButton>

<asp:LinkButton ID="hlR18IntakeChillOutputEnd" runat="server" CssClass="Hyperlinks"
style="top: 580px; left: 329px">R18 Intake Chill Out</asp:LinkButton>

<asp:LinkButton ID="hlRetailPacking1" runat="server" CssClass="Hyperlinks"
style="top: 398px; left: 724px">Retail Packing 1</asp:LinkButton>

<asp:LinkButton ID="hlRetailPacking2" runat="server" CssClass="Hyperlinks"
style="top: 483px; left: 724px">Retail Packing 2</asp:LinkButton>

<asp:LinkButton ID="hlTemperingChill" runat="server" CssClass="Hyperlinks"
style="top: 620px; left: 402px">Tempering Chill</asp:LinkButton>

<asp:LinkButton ID="hlWipChill" runat="server" CssClass="Hyperlinks"
style="top: 666px; left: 489px">Wip Chill</asp:LinkButton>

<asp:LinkButton ID="hlRM10BaconPalletising" runat="server" CssClass="Hyperlinks"
style="top: 233px; left: 16px">RM10 Bacon Palletising</asp:LinkButton>

<asp:LinkButton ID="hlR18IntakeChillInputEnd" runat="server" CssClass="Hyperlinks"
style="top: 502px; left: 20px">R18 Intake Chill In</asp:LinkButton>

<asp:LinkButton ID="hlDespatchChill1" runat="server" CssClass="Hyperlinks"
style="top: 361px; left: 46px">Despatch Chill 1</asp:LinkButton>

<asp:LinkButton ID="hlDespatchChill2" runat="server" CssClass="Hyperlinks"
style="top: 434px; left: 46px">Despatch Chill 2</asp:LinkButton>

<asp:LinkButton ID="hlHoldingFreezer" runat="server" CssClass="Hyperlinks"
style="top: 222px; left: 730px">Holding Freezer</asp:LinkButton>

<asp:LinkButton ID="hlR17DespatchBay" runat="server" CssClass="Hyperlinks"
style="top: 537px; left: 20px">R17 Despatch Bay</asp:LinkButton>

<asp:LinkButton ID="hlBaconPacking" runat="server" CssClass="Hyperlinks"
style="top: 335px; left: 57px">Bacon Packing</asp:LinkButton>

<asp:LinkButton ID="hlBaconCuring" runat="server" CssClass="Hyperlinks"
style="top: 157px; left: 148px">Bacon Curing</asp:LinkButton>

<asp:LinkButton ID="hlPorkIntakeChill" runat="server" CssClass="Hyperlinks"
style="top: 135px; left: 128px">Pork Intake Chill</asp:LinkButton>

<asp:LinkButton ID="hlBaconSlicing" runat="server" CssClass="Hyperlinks"
style="top: 201px; left: 79px">Bacon Slicing</asp:LinkButton>

<asp:LinkButton ID="hlBlastFreezer1" runat="server" CssClass="Hyperlinks"
style="top: 124px; left: 730px">Blast Freezer 1</asp:LinkButton>

<asp:LinkButton ID="hlLambPrep1" runat="server" CssClass="Hyperlinks"
style="top: 323px; left: 724px">Lamb Prep 1</asp:LinkButton>

<asp:LinkButton ID="hlLambPrep2" runat="server" CssClass="Hyperlinks"
style="top: 445px; left: 725px">Lamb Prep 2</asp:LinkButton>

<asp:LinkButton ID="hlLambRackingChill" runat="server" CssClass="Hyperlinks"
style="top: 588px; left: 177px">Lamb Racking Chill</asp:LinkButton>

</div>

<div id ="Summaries"
style="position: relative; left: 120px; width: 865px; height: auto; top: -424px;">

<asp:Panel ID="pnlSummary" runat="server"
style="position:relative;height: 150px; width: 425px; top:8px;" BorderColor="#CCCCCC"
BorderStyle="Solid" BorderWidth="1px" >

<asp:Label ID="lblSummary"
style="position:relative; text-align: center; top: 3px; left: 0px;" runat="server"
Text="Summary" ForeColor="#009900" Font-Names="Verdana" Font-Underline="True"
Font-Bold="True" Font-Size="Small" Width="430px" Height="15px"></asp:Label>


<asp:Label ID="lblMaXQ" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 25px; left: 20px; width: 207px;"
Text="Maximum Temperature:" Height="15px"></asp:Label>

<br />

<asp:Label ID="lblMinQ" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 45px; left: 20px;"
Text="Minimum Temperature:" Height="15px" Width="150px"></asp:Label>

<br />

<asp:Label ID="lblAverageQ" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 62px; left: 20px;"
Text="Average Temperature:" Height="15px" Width="150px"></asp:Label>

<br />

<asp:Label ID="lblMaXA" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: -18px; left: 185px; width: 210px;"
Text="--" Height="15px"></asp:Label>

<br />

<asp:Label ID="lblMinA" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 2px; left: 185px;"
Text="--" Height="15px" Width="210px"></asp:Label>

<br />
<asp:Label ID="lblAverageA" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 19px; left: 185px;"
Text="--" Height="15px" Width="210px"></asp:Label>

</asp:Panel>

<asp:Panel ID="pnlDaySummary" runat="server"

style="position:relative; top: -144px; left:439px; height: 150px; width: 425px;"
BorderColor="#CCCCCC" BorderWidth="1px" >

<asp:Label ID="lblDaySummary"
style="position:relative; text-align: center; top: 3px; left: 0px;" runat="server"
Text="Daily Summaries" ForeColor="#009900" Font-Names="Verdana" Font-Underline="True"
Font-Bold="True" Font-Size="Small" Width="422px" Height="15px"
BorderStyle="None"></asp:Label>

<asp:TextBox ID="txtbxDailySummary" runat="server"
style="position:relative; top: 10px; left: 8px; height: 113px; width: 400px;"
TextMode="MultiLine" Font-Names="Verdana" Font-Size="Medium"
ForeColor="#009900"></asp:TextBox>

</asp:Panel>

</div>

<div id ="Chart"style="position:relative;left:120px; top: -555px; height:auto; width:865px; text-align:left; ">




</div>

<div id="grid"


style="position:relative; left:120px; top: -555px; width:865px; height:auto; text-align:center;">

<asp:GridView ID="gridTemps" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" Width="865px"
BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px">

<RowStyle BackColor="#E2E2E2" Font-Names="Verdana" Font-Size="Medium"
ForeColor="#009900" />
<Columns>
<asp:BoundField DataField="DateAndTime" HeaderText="Date and Time">
<HeaderStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Temp" HeaderText="Temperature">
<HeaderStyle HorizontalAlign="Center" />
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="Gray" Font-Bold="True" ForeColor="White"
Font-Names="Verdana" Font-Size="Medium" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" Font-Names="Verdana"
Font-Size="Medium" ForeColor="#009900" />

</asp:GridView>

</div>

<div id="Footer" class="footer" >

<br />

<img runat="server" alt= "" src="~/Images/Banner.png" id="imgBanner" height="50" width="500" />

</div>

</form>

</body>

</html>



It all positions fine in the browser, apart from a massive chunk of white space on at the bottom within the form object (uses the "Content" CSS Class).

Any ideas what I am doing wrong?

SB65
Oct 2nd, 2009, 02:47 PM
I think it's all the (large) negative top margins applied via inline styling to to various divs: #Footer, #grid, #Chart, #Summaries, #Siteplan etc. If you take all these out, and position with margins instead, that might give a better result.

jaYKay
Oct 2nd, 2009, 02:50 PM
H
i,
Thanks for replying. I'm not used to the whole XHTML and CSS thing to be honest.

The reason I have the negative numbers in there is because if I don't the page renders really messy and nothing is where I want it to be. When you say margins, what do you mean, can you give me a little example?

Thanks again.

SB65
Oct 2nd, 2009, 03:00 PM
Well, really, using top:x with position:relative shouldn't really be necessary - it can cause unpredictable display. It's better to use the css float property and margin-top, margin-bottom as required.

Having said all that I can't quite see why your layout is so far out that you need such big negative margins anyway - so I'm guessing there's something else causing that.

Is there any chance you can post a link to the live page - it's a bit tricky with all your asp code in there?

SB65
Oct 2nd, 2009, 03:05 PM
Replying to my own post here, bad form...

..just had another shufty. I thnk what you're trying for is for the #buttons div to be on the left of the screen, with #siteplan and all the subsequent divs sitting to the right, all of them in a column - so a basic two column layout - is that right?

jaYKay
Oct 2nd, 2009, 03:06 PM
The site is in development at the moment and is not in the net unfortunatly.

The div "buttons" I think is one of the problems as it is a small div that I have to the left of the page, I then want the div "siteplan" directly the the right of it. But when the page renders the HTML it obviously arranges them on top of each other, hence why I put the negative number in for the "siteplan" to bring it up the page.

jaYKay
Oct 2nd, 2009, 03:07 PM
haha... I was typing the answer as you were typing the question ;)

Yes that is correct, but I am guessing I am doing the 2 column layout completely wrong?

SB65
Oct 2nd, 2009, 03:24 PM
..nicely anticipated!

OK, well in that case you need to use the float property in css which allows two elements (in this case) to sit side by side with each other.

You probably need to add an extra div to include all the divs that are in the right hand column, so then the basic html structure inside .content is something like:



header etc.
<div id="buttons" class="ImgBtnsDiv">
...

</div>
<div id="rightcolumn">
<div id = "Siteplan">
.....
</div>
<div id = "Summaries">
.....
</div>
<div id = "Chart">
.....
</div>
etc....to include all the right hand column divs
</div>



then use css something like this:


.ImgBtnsDiv {
border:1px solid #CCCCCC;
color:#009900;
float:left;
font-family:Verdana;
font-size:small;
height:auto;
position:relative;
text-align:center;
width:109px;
}

#rightcolumn{
margin-left: 120px}

and get rid of all your inline left and top styling. Bonus for all this is it'll be much easier to change things in the future.

Give that a try and post back if it doesn't make sense...

jaYKay
Oct 2nd, 2009, 06:47 PM
Thanks very much!! That worked a treat. I have rewritten the page using that technique and have even got rid of any </br> tags outside Divs and replaced them with margins on the Divs surrounding them.

One thing still not working though. I've added this CSS to my sheet



.mainDivs

{
position:relative;
width:865px;
height:auto;
margin-bottom:10px;

}



and for each component on the page (chart, grid, panels) I have wrapped in individual Divs and asigned the style above to them. This works for most, but not the following




<div id= "summary" class="mainDivs" >

<asp:Panel ID="pnlSummary" runat="server"
style="position:relative;height: 150px; width: 425px; float:left;" BorderColor="#CCCCCC"
BorderStyle="Solid" BorderWidth="1px" >

<asp:Label ID="lblSummary"
style="position:relative; text-align: center; top: 3px;" runat="server"
Text="Summary" ForeColor="#009900" Font-Names="Verdana" Font-Underline="True"
Font-Bold="True" Font-Size="Small" Width="425px" Height="15px"></asp:Label>


<asp:Label ID="lblMaXQ" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 25px; left: 40px; width: 207px;"
Text="Maximum Temperature:" Height="15px"></asp:Label>

<br />

<asp:Label ID="lblMinQ" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 45px; left: 40px;"
Text="Minimum Temperature:" Height="15px" Width="150px"></asp:Label>

<br />

<asp:Label ID="lblAverageQ" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 65px; left: 40px;"
Text="Average Temperature:" Height="15px" Width="150px"></asp:Label>

<br />

<asp:Label ID="lblMaXA" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: -19px; left: 208px; width: 210px;"
Text="--" Height="15px"></asp:Label>

<br />

<asp:Label ID="lblMinA" runat="server" Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 0px; left: 208px;"
Text="--" Height="15px" Width="210px"></asp:Label>


<asp:Label ID="lblAverageA" runat="server"
Font-Names="Verdana" Font-Size="Small"
ForeColor="#009900" style="position:relative; top: 35px; left: -2px;"
Text="--" Height="15px" Width="210px"></asp:Label>

</asp:Panel>

<asp:Panel ID="pnlDaySummary" runat="server" style="position:relative; float:right; height: 150px; width: 425px;"
BorderColor="#CCCCCC" BorderWidth="1px" >

<asp:Label ID="lblDaySummary"
style="position:relative; text-align: center; top: 3px; left: 0px;" runat="server"
Text="Daily Summaries" ForeColor="#009900" Font-Names="Verdana" Font-Underline="True"
Font-Bold="True" Font-Size="Small" Width="425px" Height="15px"
BorderStyle="None"></asp:Label>

<asp:TextBox ID="txtbxDailySummary" runat="server"
style="position:relative; top: 11px; left: 13px; height: 113px; width: 400px;"
TextMode="MultiLine" Font-Names="Verdana" Font-Size="Medium"
ForeColor="#009900"></asp:TextBox>


</asp:Panel>

</div>



When rendered in the browser it there is no margin between this div and the next (containing a chart), the two divs touch.

Any ideas?

SB65
Oct 2nd, 2009, 06:54 PM
Hey glad it worked! Getting rid of <br/> is always good as well...:thumbsup:

I guess the issue with this particular div might be the contents - some of these have top:11px or whatever, which may be pushing the contents down outside the box, so even though there should be a gap below it, there isn't.

Easy way to check this would be to give the summary div a background colour - and see if the contents extend beyond the background colour. If they do, try removing the top:..px values and see if that fixes the problem. It's sort of the same issue as your original one, but the other way around this time.

jaYKay
Oct 2nd, 2009, 07:48 PM
I did what you suggested, but didn't help, so I tried adding a Margin to the style of the chart itself instead of the Div and that worked :confused: weird!

Thanks for you help though, it's all so much more tidy now.

Is that the standard way of positioning - not using top, left, right, <br/> etc and to use margin-left:, etc instead? Also do I need to keep saying position:relative; on every object?

Also is it that important to create a style on a style sheet for every object. It's just when a few properties are different accross similar objects, I just add a Style="" entry to the object instead. Is that a bad habit?

SB65
Oct 2nd, 2009, 08:33 PM
Ah well, don't understand that, but sounds like you've got it fixed anyway.


Is that the standard way of positioning - not using top, left, right, <br/> etc and to use margin-left:, etc instead? Also do I need to keep saying position:relative; on every object?

Yes, using float and margins is the accepted "standard" for web pages. You shouldn't need to use position:relative either as a default.


Also is it that important to create a style on a style sheet for every object. It's just when a few properties are different accross similar objects, I just add a Style="" entry to the object instead. Is that a bad habit?

You don't need a style for every object, no.

Again, it is seen as preferable to separate the styling from the html in a separate stylesheet - and hence avoid the use of the "style" attribute. More practically, in my view it's just easier to have the style separate when you're making changes.

jaYKay
Oct 2nd, 2009, 09:11 PM
Thanks again mate, I think I will get on and do some HTML / CSS tutorials! :o