HTML - Fill Web Page?

Hi everyone,

I've got a div setup, used for navigation, like so:

HTML Code:

<div class="container">
<div class="item">Home</div>
<div class="item">Link 1</div>
<div class="item">Link 2</div>
<div class="item">Link 3</div>
<div class="item">Link 4</div>
<div class="item">Link 5</div>
<div class="item">Link 6</div>
<div class="whitespace">Fill Whitespace</div>
</div>

The container div is 800px, but the links only come to 700px, roughly.

I want to fill the remaining space, because each item has a border, other than the selected one, and i want the border to touch the side of the container.

I've tried
Code:

.whitespace {
width: 100%
}

and this does work partially, but the div finishes just short of the edge of the container.

I've entered text into the whitespace container, which has stretched it to the edge of the container, so i know theres nothing getting in the way.

Any ideas how i can get the whitespace div to fill up the remaining space in the container div?

Thanks

Matthew Millar

Hi,

I'm having a bit of a problem with my table.

A cell which should completely be filled with a picture leaves a small - but - whitespace between the picture and the next cell. I've posted a pic of the problem and here comes the code:

<table border="0" cellspacing="0" width="780" align="center">
<tr>
<td height="250" width="780" colspan="3">
<img src="pics/Kjolur.png" height="250" width="780">
</td>
</tr>
</table>


<table border="0" cellspacing="0" align="center" style="background-color: white;">
<tr>
<td height="750" width="194">
<table border="0" cellspacing="0" cellpadding="0" style="background-color: #f0f0f0; border-left: 4px solid #f0f0f0;">
</tr>

<tr>
<td class="sub1" height="10" width="190">
</td>
</tr>
<tr>
<td class="sub1" height="27" width="190" style=" border-bottom: 1px solid darkgray;"><a href="http://www.kerlingarfjoll.is/information.html">Information</a>
</td>
</tr>

.... etc.

I've quite new to this and find myself a bit at a loss, so any help would be soo much appreciated!!

Best,
thora

Hi guys, first thing first, nice to be part of this forum.

My first post and question. Suppose i have 5 identical forms with name, address, city, post code, is it possible to do one submission for all rather than doing it one by one...

Thanks

I have come accross a problem on my site. If i let the browser (FF in this example) remember my login details, it then places them in some input fields on my account settings page. Only it puts them into the wrong one.
Eg, it places the username from the login into the "new_forename" field in the account settings

below is the html (minus the divs...etc) for the site login form and then the change forename form on account settings.php.


Here is the html code for the username and password entry on my login screen:

Code:

<form name="login" method="post" action="authenticate.php">
username
<input style="width:180px" name="enter_user" type="text"/>
<span class="form-warning"></span>

password
<input  style="width:180px" type="password" name="enter_pass"/>
<input class="button blue medium" type="submit" name="login" value="login"/>
</form>

Here is some html code from my account settings page

Code:

<form name="new_forename" method="post" action="accountDetails.php">
Enter new forename <input type="text" name="new_forename" value="" size="30"/><br/>
Enter your password <input type="password" name="password" size="30"/>

<input class="button blue medium" style="width:130px" type="submit" name="save_forename" value="Save new forename"/>
<input class="button red medium" type="submit" name="cancel" value="Cancel"/>
</form>

How can i correct this?

Is it that the browser is seeing the "password" fields and simply filling in the stored password field with the password saved for the site?

Hi there, I am looking for a way that if a user clicks on a button on my website it will autofill a search field on a website that I have no control over. I have been told that I just need to add the url http://www.externalsite.com?fieldname=123456789

This doesn't seem to work. Can anyone help with this?

Hi,

I've got an HTML form running on an internal intranet site.
It contains a vbscript that pulls the username from the local machine.
Is there a way to put that username in a text box on the html page for submission later? Please see the code below for reference thanks

<html>
<head>

</head>

<body>
<script type="text/vbscript">
set objNetwork = createobject("wscript.network")
document.write(objNetwork.Username)
</script>
</body>
</html>

When someone clicks an email link on our website I want the email subject line automatically filled in for them.

I have tried the following code, but it does not work.

<a href="mailto:example@example.co.uk?subject=example">example@example.co.uk</a>

I am pretty sure its because I am putting the email address as the text for the link. Because when I replace the email address with normal text, it works fine.

Instead of showing example@example.co.uk it shows mailto:example@example.co.uk?subject=example

Hi there

I am trying to make a template whereby the whole table fills 100% height of the browser window. My problem is, is that i have a nested table containing 2 rows and 2 tds. The first row and td needs to be aligned to the top and the 2nd needs to align to the bottom - and to the bottom of the browser window.

This is my code so far:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<style type="text/css" media="all">
body {
margin:0;
padding:0;
height:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
td {
margin:0;
padding:0;
}
html {
height:100%;
}
</style>
</head>

<body >
<table width="100%" cellpadding="0" cellspacing="0" style="height:100%;">
<tr>
<td width="50%" style="background-image:url(leftheader_image.gif); background-repeat:repeat-x; background-position:top right;"></td>
<td width="980" height="244" style="background-image:url(header_image.jpg); background-repeat:no-repeat; background-position:top left; vertical-align:top;"><img src="spacer.gif" width="980" height="1" alt="" /></td>
<td width="50%" style="background-image:url(rightheader_image.gif); background-repeat:repeat-x; background-position:top left;"></td>
</tr>
<tr>
<td width="50%" style="background-image:url(leftbody_image.jpg); background-repeat:repeat-x; background-position:top right; background-color:#fbefd5; vertical-align:bottom;" ><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="119" style="background-image:url(leftgrass_image.gif); background-repeat:repeat; background-position:top right; vertical-align:bottom;"></td>
</tr>
</table></td>
<td width="980" bgcolor="#fbefd5" style="background-image:url(body_image.jpg); background-repeat:repeat-x; background-position:top left; background-color:#fbefd5; height:100%; vertical-align:top;"><table width="100%" style="height:100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><p>content</p></td>
</tr>
<tr><br />
<td width="980" height="118" style="vertical-align:bottom; background-image:url(grass_image.gif); background-position:top left; background-repeat:repeat-x;">&nbsp;
</td>
</tr>
</table></td>
<td width="50%" style="background-image:url(rightbody_image.jpg); background-repeat:repeat-x; background-position:top left; vertical-align:bottom; background-color:#fbefd5; "><table width="100%">
<tr>
<td width="50%" height="118" style="background-image:url(rightgrass_image.gif); background-repeat:repeat; background-position:top left; "></td>
</tr>
</table></td>
</tr>
</tr>
</table>
</body>
</html>

What i need is for the left grass image, the grass image and the right grass image all aligned to the bottom of the browser window, but all these images need to be set as backgrounds as i need the left and the right to repeat on the x and footer links will be overlayed to the grass image in the middle.

The result i am getting at the moment is IE7 displays 100% further than the height of the browser window, resulting in a scroll and the grass image does not align to the bottom along with the left and right grass. This is near the top directly beneath the content td.

In Firefox, all images are aligned to the bottom, but the grass image is pushed further down than the left and right and so is not lined correctly, resulting in a slight scroll. The left and right grass images are aligned at the bottom of the browser window, before needing to scroll to see the rest of the middle grass.

I know that's a lot to take in, does it make sense?

Thanks in advance.

How do I prefill an input field in a form? I don't mean "value=hello"
I mean have a light gray text inside that says "enter your first name" and then when the user starts typing that text disappears.

I thought there was an html tag that did this (or a form tag like type=""). I hope it doesn't require CSS...
thanks!

I was wondering, if there is a web page with forms, is there anyway you can create a link so that some of the input boxes are automatically filled. This would be nice so that I can email a few links to a lot of my friends and I've already filled out some of the info for everyone. Thanks for the help.

~Bryan H.~

I was wondering if there was any way to do this:

I have a site that has a catalog. There are 10 - 20 items per page and about 15 pages/categories. Each item will have a check box. When a checkbox is clicked a window will open (containing a list of EVERY item, quantities, etc.) and a check box next to that particular item will be automatically checked.

Then as the user clicks through the catalog and checks off boxes they will be filled in in the new window as well.

Basically I need to know how to check a box in one window and have it check a box in another window at the same time.

Thanks.

I'm using a jquery plugin that creates a grid view using a table. Inside the cells i have text areas that i'm manually sizing using the rows attribute, to fill the td. It's not working very cleanly though. Does anyone know of a way to get text areas to automatically size themselves to a containing td?

thanks, max

Hello everyone. I'm in the middle of designing my new portfolio in ASP.NET and everything works fine in IE7 but once I opened the site up in FF, I was horrified by the outcome. I've been looking forever for a possible slip-up but I haven't been able to find anything that seems wrong.

Firefox.

Internet Explorer.


CSS
Code:

html
{
    font-family:tahoma;
    background-image:url(img/background.png);
    background-repeat:repeat-x;
    background-color:#b5b5b5;
}
#header
{
    background-image:url(img/body_top.png);
    width:650px;
    height:140px;
}
#body_middle
{
    background:url(img/body_middle.png);
    background-repeat:no-repeat;
    width:650px;
}
#body_fill
{
    background-image:url(img/body_fill.png);
    width:650px;
    background-repeat:repeat-y;
}
#body_bottom
{
    background-image:url(img/body_bottom.png);
    width:650px;
    height:19px;
}
#menuwrapper
{
    width:130px;
    height:200px;
    position:relative;
    top:15px;
    left:18px;
    text-align:left;
    padding:0px 0px 0px 0px;
    float:left;
}
.menu
{
    margin:5px 15px 0px 0px;
}
a
{
    color:#c5c5c5;
}
.contentholderR
{
    float:right;
    width:475px;
    margin:10px 20px 10px 20px;
}
.contentholderL
{
    float:left;
    width:475px;
    margin:10px 20px 10px 20px;
}
.content_header
{
    background-image:url(img/content_header.png);
    background-repeat:no-repeat;
    height:15px;
    width:475px;
    padding-left:15px;
    font-family:tahoma;
    font-size:15px;
    color:#FFFFFF;
}
.content_mid
{
    background-repeat:no-repeat;
    border-left:solid 3px #c8c8c8;
    border-right:solid 3px #c8c8c8;
    width:459px;
    min-height:150px;
    font-family:Tahoma;
    font-size:12px;
    color:black;
    padding-left:10px;
    padding-top:10px;
}
.content_bottom
{
    background-image:url(img/content_bottom.png);
    background-repeat:no-repeat;
    height:9px;
    width:475px;
    position:relative;
}

HTML
Code:

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>Untitled Page</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="wrapper">
   
        <div id="header"></div>
        <div id="body_fill">
        <div id="body_middle">
        
        <div id="menuwrapper">
            <asp:Menu ID="Menu" runat="server" CssClass="menu" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="3" BackColor="White" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#C8C8C8" StaticSubMenuIndent="10px" DynamicEnableDefaultPopOutImage="False" Width="124px">
                <Items>
                    <asp:MenuItem Text="dasdasf" Value="dasdasf"></asp:MenuItem>
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                </Items>
                <DynamicHoverStyle BackColor="#E5E5E5" ForeColor="#FAA019" />
                <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" ForeColor="Black" />
                <DynamicMenuStyle BackColor="#F7F6F3" />
                <StaticSelectedStyle BackColor="#E5E5E5" Font-Bold="True" Font-Names="Verdana" Font-Overline="False" ForeColor="Black" />
                <DynamicSelectedStyle BackColor="#E5E5E5" ForeColor="Black" />
                <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" ItemSpacing="1px" BackColor="White" />
                <StaticHoverStyle BackColor="WhiteSmoke" ForeColor="Black" />
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        </div>
        <div id="contentwrapper">        
        <div class="contentholderR">
        <div class="content_header">
            <asp:ContentPlaceHolder ID="content_header_1" runat="server">
                Lorem Ipsum</asp:ContentPlaceHolder>
        </div>
        <div class="content_mid">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            </div>
        <div class="content_bottom" style="font-size: 12pt; font-family: Times New Roman"></div>
        </div>
        
        <div class="contentholderL" style="font-size: 12pt; font-family: Times New Roman">
        <div class="content_header">
            <asp:ContentPlaceHolder ID="content_header_2" runat="server">
                Lorem Ipsum</asp:ContentPlaceHolder>
        </div>
        <div class="content_mid">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
            </div>
        <div class="content_bottom"></div>
        </div>
        
        <div class="contentholderR">
        <div class="content_header">
            <asp:ContentPlaceHolder ID="content_header_3" runat="server">
                Lorem Ipsum</asp:ContentPlaceHolder>
        </div>
        <div class="content_mid">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
            </asp:ContentPlaceHolder>
            </div>
        <div class="content_bottom" style="font-size: 12pt; font-family: Times New Roman"></div>
        </div>
        </div>        
        </div>
        </div>
    </div>
        <div id="body_bottom"></div>
        </form>
</body>
</html>

Can someone point out what I'm doing wrong?

Helpful Tip:

I have a menu, created with ul and li's, as apposed to divs, with some white space at the end.

Each li is set to float:left and i want to add another li which fills the remainder of the white space.

For the page to be compliant with the w3c standards it has to be an li (within an ul/ol), so how do you make an li fill the remaining white space?

Simply set the fill-white-space li to float:none; display: block;

Because all the other li's are set to float, it will sit beside them, but act as a block and fill the remainder of the line.

I hope this helps someone.

Took me a good while to work out (stumbled across it by chance).

Matthew Millar

I'm trying to come up with a way to mimic a "tab fill" in html:

Like this only the page numbers would be justified to the same line, and the . .. is "auto generated" to fill the empty space:

1. The First Line ................................... 25
2. Below The First ................................. 32
3. After That .......................................... 47

The "titles" would be in column 'a', and the numbers would be in column 'b'
The space after the "titles" would be filled with ...

I have come close using 'bottom border' but that puts the ... under the text as well.

I tried using span and div, but that will either putt the ... on a new line below the text, or if i use 'display:inline;' it puts it on the same, but it no longer fills the empty space to the edge, and only displays the ... when there is text inside. I tried stretching it out with a clear image but it didn't work either.

Also tried using a 'highlight' (background color) on the text to cover the bottom border but that didn't really work. (the closest i got was using this method with a background image of a dot. but that wasn't much better...)

Any thoughts? Thanks.