Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Please help me with a DIV background


  • Please log in to reply

#1
freik

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

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

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

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

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

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

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

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

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
You're welcome. Always more than one way to get the same thing done.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP