...

View Full Version : Div layers -- Backgrounds and Width



booshgal33
05-22-2008, 02:50 AM
http://broken-road.net/steve

That's the site I'm working on. The footer image there ("From the right-aligned brain...") is what I'm having trouble with.

What I want is to position the footer image right where it is (I'm using absolute positioning) but I want the div layer to have a background that, when someone expands their browser window, continues to the right of where the image is positioned.

The end result should be that the line that runs under where it says "stephenparks.com" will give the illusion of continuing, no matter a person's screen size or how wide someone makes their screen.

I hope I am explaining this well enough to be understood.

Here's the code I'm using for the footer div layer.


#footer{
position: absolute;
left: 480px;
top: 400px;
width: auto;
text-align: right;
height: 109px;
background-image: url(http://broken-road.net/steve/images/footerbg.jpg);
layer-background-image: url(http://broken-road.net/steve/images/footerbg.jpg);
background-repeat: repeat-x;
}

Currently, the background image loads, but then the image loads over it and I can't figure out how to get the div layer to expand its width to whatever someone's browser width is.

Any help would be greatly appreciated!

booshgal33
05-22-2008, 06:43 PM
Any help, guys?

Not sure if I'm not getting help because people don't know how to help, or if it's because you think the site I'm working on is a paying job (it's not -- it's for my brother and I WISH he was paying me) but I'd really appreciate any tips you could offer.

effpeetee
05-22-2008, 07:02 PM
Any help, guys?

Not sure if I'm not getting help because people don't know how to help, or if it's because you think the site I'm working on is a paying job (it's not -- it's for my brother and I WISH he was paying me) but I'd really appreciate any tips you could offer.

First, you should have a Doctype. The browsers will go into quirks mode without one. Control is then not very firm.

I have never seen so much css for such a small page.

Look here (http://csscreator.com/?q=divitis).

Frank

booshgal33
05-22-2008, 07:12 PM
First, you should have a Doctype. The browsers will go into quirks mode without one. Control is then not very firm.

I haven't worked with doctypes before. Always known I should but haven't ever had it explained to me.

I found this (http://www.alistapart.com/articles/doctype/) page about them. Under "Doctypes that Work" which should I be using? And am I just putting it at the top of my pages?

Apparently I know a lot less than I should. Sorry for being such a bother.

jcdevelopment
05-22-2008, 07:38 PM
It seems to be working now when i look at it. Is that not what you wanted?

booshgal33
05-22-2008, 07:41 PM
What I want is for the footer image to appear (which it is) with this background (http://broken-road.net/steve/images/footerbg.jpg) in the div layer. The background displays, but then the footer image loads over it. I want the background image to run the length of the div (from all the way on the left to all the way on the right, behind the image, no matter how wide someone makes their screen).

The illusion I'm trying to create is that the thin blue line on the footer image continues to the right, regardless of how wide someone makes their browser window.

jcdevelopment
05-22-2008, 07:44 PM
like this?



#footer{
position: absolute;
right: 10px;
top: 400px;
height: 109px;
background-image: url(http://broken-road.net/steve/images/footerbg.jpg);
layer-background-image: url(http://broken-road.net/steve/images/footerbg.jpg);
background-repeat: repeat-x;
overflow: none;
width:100%;
}

effpeetee
05-22-2008, 07:47 PM
I haven't worked with doctypes before. Always known I should but haven't ever had it explained to me.

I found this (http://www.alistapart.com/articles/doctype/) page about them. Under "Doctypes that Work" which should I be using? And am I just putting it at the top of my pages?

Apparently I know a lot less than I should. Sorry for being such a bother.

You are not a bother. That's what we are here for.

This is the minimum framework for a page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Enter_Title_Here</title>
</head>
<body>

</body>
</html>

You will have to decide what Doctype to use, but the one above should be OK.
The <meta> line has shown what character set you are using. This also you will need to determine although the one here is not un-usual.

There are many Sources (http://exitfegs.co.uk/Sources.html) of help in my signature below. But basically, you will have to learn at least HTML and CSS plus probably one or more of the scripting languages.
Validate your code regularly. There is a facility on my Sources program, Top left for HTML (http://validator.w3.org/) and top right for CSS. (http://jigsaw.w3.org/css-validator/)

Quite a good book to start with is "HTML DOG (http://htmldog.com/)".

Frank

booshgal33
05-24-2008, 05:48 AM
Thanks for the help so far, everyone.

Frank, I had a friend help me with validating my pages (including my style page) and I've done them all. My problem still exists.

Any other suggestions?

That is actually now the least of my worries. What I'm having a problem with now is the contact form. I hate contact forms. Ugh. I got it to look and work exactly how my brother wanted it to look and work... except it doesn't display correctly on IE. I validated that page as well, but it's still not displaying the way it does in all 3 of the other browers I've viewed it in (Firefox, Safari and Camino).

The page is HERE (http://broken-road.net/steve/contact.html).

Here is the style-coding I used for the contact area:


#contact-area {
width: 350px;
margin-top: 0px;
margin-left: 50px;
}

#contact-area input, #contact-area textarea {
padding: 3px;
width: 340px;
font-family: tahoma, sans-serif;
font-size: 8pt;
margin-top: 0px;
margin-bottom: 3px;
border: 1px solid #b0b1b3;
}

#contact-area textarea:focus, #contact-area input:focus {
border: 1px solid #808080;
}

#contact-area input.submit-button {
width: 70px;
float: left;
background-color: #b0b1b3;
color: #FFFFFF;
}

#contact-area input.half{
width: 140px;
margin-right: 0px;
}

#contact-area input.full{
width: 280px;
margin-right: 0px;
}

#contact-area input.full2{
width: 280px;
margin-bottom: 7px;
margin-right: 0px;
}

#contact-area input.city{
width: 140px;
margin-right: 0px;
}

#contact-area input.state{
width: 45px;
margin-right: 0px;
}

#contact-area input.zip{
width: 100px;
margin-right: 0px;
}

label {
float: left;
text-align: left;
margin-right: 15px;
width: 75px;
padding-top: 5px;
font-size: 8pt;
}


And then here is the coding I used on the page for the contact form:


<div id="contact-area">

<form method="post" action="contactengine.php">

<table border="0" align="left" cellpadding="0" cellspacing="0">
<tr align="left">
<td>
<label for="FirstName" id="FirstName">First Name:</label>
<input type="text" name="FirstName" class="half" />
</td>
<td colspan="2">
<label for="LastName" id="LastName">Last Name:</label>
<input type="text" name="LastName" class="half" />
</td>
<td>
</td>
</tr>
<tr align="left">
<td colspan="2">
<label for="Company" id="Company">Company:</label>
<input type="text" name="Company" class="full" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr align="left">
<td colspan="2">
<label for="Address" id="Address"> Address:</label>
<input type="text" name="Address" class="full2" /><br/>
<input type="text" name="Address2" class="full2" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr align="left">
<td>
<label for="City" id="City">City:</label>
<input type="text" name="City" class="city" />
</td>
<td>
<label for="State" id="State">State:</label>
<input type="text" name="State" class="state" />
</td>
<td colspan="2">
<label for="Zip" id="Zip"> Zip:</label>
<input type="text" name="Zip" class="zip" />
</td>
</tr>
<tr align="left">
<td>
<label for="Phone" id="Phone">Phone:</label>
<input type="text" name="Phone" class="half" />
</td>
<td colspan="2">
<label for="Email" id="Email">Email:</label>
<input type="text" name="Email" class="half" />
</td>
<td>
</td>
</tr>
<tr align="left">
<td colspan="2">
<label for="Message" id="Message">Message:</label><br />
<textarea name="Message" rows="5" cols="20"></textarea>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>

<input type="submit" name="submit" value="send" class="submit-button" />
</form>
</div>


I can't figure out what else I could use (aside from tables) to position the input areas the way he wants them. Anyone know how to fix IE's stupid problem displaying my code? Or does anyone have a suggestion for a better way to achieve the look of the contact form (as per Firefox, Safari or Camino) that will also work in IE?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum