horz background split with expanding middle??

**artcycle** · Jul 6, 2006 13:57

Hello,

I am hoping someone can help.

I have a background image split in three horizontally because I need to have a middle that expands with the content inside. For the life of me I cannot understand why when I add margin to the <p> tag (or <ul>, <img>, etc.) it no longer butts up to the above image (for a seamless image).

Can someone let me know why this is?

http://www.artcycle.net/dev/temp/testing.html

html is:

Code:

</head>
<body>
<div id="wrapper">
	<div id="bkgtop">
	</div>
	<div id="mainnav">
		<ul id="servicenav">
			<li></li>
		</ul>
	</div>	
	<div id="bkgmid">
		<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
	</div>
	<div id="bottom">
	</div>
	<div id="footer">
		<p> </p>
	</div>
</div>
</body>
</html>

css is:

Code:

* {margin: 0; padding: 0 }
body {
	background-color: #C3C281;
	text-align: center;
	}
#bkgtop	{
	background: transparent url(i/bkgtop2.jpg) center center no-repeat;
	height: 198px;
	}
#wrapper {
	width: 824px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	}
/* tabs/nav */ 
#mainnav ul {
	background: transparent url(i/bkgtabs.jpg) center center no-repeat;
	width: 100%;
	height: 99px;
	list-style: none;
	}
/* middle */ 
#bkgmid {
	height: auto;
	background: transparent url(i/bkgmid.png) center center repeat-y;
	}
#bkgmid p {
	margin: 50px 0 50px 0;
	padding: 0;
	}
/* footer */
#bottom {
	height: 34px;
	background: transparent url(i/bkgbot.png) center center no-repeat;
	}

Thanks in advance!
Jackie

**Maujor** · Jul 6, 2006 15:39

Hi,
To control the amout of space at the top and the bottom of the DIV#bkgmid use padding-top and padding-bottom (not margins) for the first and the last element into the DIV.

Try this and you will see:

Code:

#bkgmid p {
	margin: padding: 50px 30px;
	padding: 0;
	}

**artcycle** · Jul 6, 2006 16:32

Thanks for getting back to me.

I should have mentioned that I had already tried to add padding instead of margin and that did work.

I want to affect the margin instead of padding because I have floats (right and left in some cases) and various elements that I want to be able to position without using negative margin/padding. I would like to understand why this is happening because it doesn't seem logical to me.

Does anyone happen to know why this happens? Maybe it is something I have to live with??

User Tag List

Thread: horz background split with expanding middle??

Thread Tools

Display

horz background split with expanding middle??

Bookmarks

Bookmarks

Posting Permissions