Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Please help me with a DIV background

Started by freik , Jul 05 2009 06:12 PM

  • Please log in to reply

#1
freik
Posted 05 July 2009 - 06:12 PM

freik

    Member

  • Member
  • PipPip
  • 21 posts
Hi all, I made a shaded box that I want to use as a div on my site. I took the graphic and sliced the top and bottom off. I took a 1-pixel height selection of the graphic and set it to the background of the div with it repeating on the y-axis.

I then inserted the top and bottom of the box as images inside the div. In firefox it looks fine, exactly what I was going for. But in IE the background sticks out of the bottom. Please take a look at my code and images. How do I fix it? Am I going about this the right way? Any help would be greatly appreciated.

Posted Image
Posted Image

<html>
<head>

<style type="text/css">
#prog {
	width:250px;
	background-image:url('prog_mid.gif');
	background-repeat:repeat-y;
}
h1 {
	margin:0;
	padding:0;
}
.center {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	display:block;
}

img {
	margin:0;
	padding:0;
	border:0;
}
</style>
</head>

<body>
<div id="prog">
	<img src="prog_top.gif"/>
	<div style="padding:0px 20px 0px 20px;"
		<h1>Phase 1</h1>
		<span class="center"><img src="prog_dots.gif"/></span>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	</div>
	<img src="prog_bottom.gif"/ style="float:bottom">
</div>

  • 0

Advertisements

#2
Major Payne
Posted 05 July 2009 - 07:05 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Would prefer to see the actual online page as I suspect you are not using a doctype at all which puts browsers into Quirks Mode. Then you lose control of how your pages are displayed.

"<br/>" is an incorrect use of the tag. Plus, the use of repeated "<br>"s is bad coding since you are using CSS. If you are using an XHTML 1.0 doctype, then the correct tags is: "<br />" That's a space in front of the "/" symbol.
  • 0

#3
freik
Posted 05 July 2009 - 09:47 PM

freik

    Member

  • Topic Starter
  • Member
  • PipPip
  • 21 posts
Hey Major Payne. Thanks for the quick reply.

Ah the doctype. I forgot about that. I added the line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now the bottom of the box in Firefox is displaying the same way as IE.

I'm sorry but I don't have this uploaded anywhere yet. I was just testing it locally before I add it to anything.

I used repeated <br/> tags as a space filler for now to test if the background is appearing correctly. I never knew that a space was needed before the "/". Thanks for clarifying that, I'll have to change some stuff around in my other pages.

Any ideas on how to fix the bottom of the box? Thanks in advance.
  • 0

#4
Major Payne
Posted 06 July 2009 - 04:14 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Well, the reason why I wanted to see the online page is because I do not have the exact images you are using. Can you attach them here or host them at ImageShack.com and give me the link to all images?
  • 0

#5
freik
Posted 07 July 2009 - 07:49 PM

freik

    Member

  • Topic Starter
  • Member
  • PipPip
  • 21 posts
Oh right, for sure. Here goes:

prog_bottom: http://imgur.com/r3fcf.gif
prog_top: http://imgur.com/po7R1.gif
prog_mid: http://imgur.com/ozduu.gif
prog_dots: http://imgur.com/anDNd.gif
  • 0

#6
Major Payne
Posted 08 July 2009 - 12:16 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Maybe try this and let me know if it works for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

<!--		Brewed on 7/8/2009 12:23:00 AM		 -->

  <title>freik</title>

  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

  <meta name="description" content="" />

  <meta name="keywords" content="" />

<style type="text/css">

* { margin:0; padding:0; border:0; }



div#prog {

width: 250px;

height: 102px;

margin: 0 auto;

background: url(http://imgur.com/ozduu.gif) repeat-y;

border: 0 solid #f00; /* Used for layout only */

}



img#t_op {

width: 250px;

height: 20px;

}



div#prog2 {

width: 208px;

margin: 0 auto;

padding: 0 20px;

border: 0 solid #0f0; /* Used for layout only */

}



img#dots {

width: 213px;

height: 1px;

margin: 0 auto;

}



img#b_ottom {

width: 250px;

height: 20px;

}



.cen_ter {

text-align: center;

}

</style>

</head>

<body>

<div id="prog">

<img id="t_op" src="http://imgur.com/po7R1.gif" alt="" />



<div id="prog2">

<h1>Phase 1</h1>

<img id="dots" src="http://imgur.com/anDNd.gif" alt="" />

</div>



<img id="b_ottom" src="http://imgur.com/r3fcf.gif" alt="" />

</div>



</body></html>

  • 0

#7
freik
Posted 11 July 2009 - 03:27 PM

freik

    Member

  • Topic Starter
  • Member
  • PipPip
  • 21 posts
Hey Major Payne,
Sorry about the late reply. I've tried out your code and it seems to work fine until I try to add content to the prog2 div. The background of the prog div isn't stretching. I then noticed the height attribute of it and removed it. It stretches then but it goes too far past the bottom.

I want to have this box on more than one page and the content of the box will vary making it a different size every time. Is there any way to align the bottom image to the absolute bottom of the prog div no matter what size the div is?
  • 0

#8
freik
Posted 11 July 2009 - 03:31 PM

freik

    Member

  • Topic Starter
  • Member
  • PipPip
  • 21 posts
...nevermind. I just realized what to do after posting the words "absolute bottom". I added "position:absolute; bottom:0;" to the bottom image and "position:relative;" to the prog div. Now it works great. Thanks for your help and pushing me in the right direction.
  • 0

#9
Major Payne
Posted 11 July 2009 - 05:38 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
You're welcome. Always more than one way to get the same thing done.
  • 0
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP