SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horz background split with expanding middle??

    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

  2. #2
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    	}
    Mauricio Samy Silva
    http://www.maujor.com/

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •