Current location: Hot Scripts Forums » General Web Coding » CSS » DIV background (top & bottom images) overlapping?


DIV background (top & bottom images) overlapping?

Reply
  #1 (permalink)  
Old 11-09-06, 12:05 PM
sp1ky sp1ky is offline
Newbie Coder
 
Join Date: May 2005
Posts: 58
Thanks: 0
Thanked 0 Times in 0 Posts
DIV background (top & bottom images) overlapping?

Hi guys,
Not sure if this is css or html....

I am trying to create a table-less content box with rounded/shadowed top/bottom images. I have my <div> with a background set (Shadowed side). My problem is that when I put an <img> with my shadow/round bottom before ending div </div> it continues.... Ok that was a sucky explanation.. heres what i mean:

PHP Code:

<!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">
<
head>
  <
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <
title>Untitled Document</title>
<
style type="text/css">
/*<![CDATA[*/
<!--
body {
        
background#4a5a63;
        
margin0;
}
bodytdth {
        
font0.88em Trebuchet MSTahomaVerdanaArialHelveticasans-serif;
}
.
container {
        
width790px;
        
margin0 auto;
}
.
content {
        
floatleft;
        
backgroundurl(images/pcontent_bg.gifrepeat-y;
}
.
navigation {
        
floatright;
        
margin-top0.5em;
        
backgroundurl(images/nav_bg.gifrepeat-y;
}
 
div.textualcontent {padding-left:7px;}
-->
/*]]>*/
</style>
</
head>

<
body>
  <
div class="container">
    <
div class="content">
      <
img alt="" src="images/pcontent_top.gif" />

      <
div class="textualcontent">
        
Main Content loaded here
      
</div><img alt="" src="images/pcontent_bottom.gif" />
    </
div>

    <
div class="navigation">
      <
img alt="" src="images/nav_top.gif" />

      <
div class="textualcontent">
        <
ul>
          <
li>Link 1</li>

          <
li>Link 2</li>

          <
li>Link 3</li>
        </
ul>
      </
div><img alt="" src="images/nav_bottom.gif" />
    </
div>
  </
div>
</
body>
</
html
See it here

It happens it both IE and FF so i assume its a simple error..
Thx
= Sp1kY
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 11-12-06, 11:53 AM
jfulton's Avatar
jfulton jfulton is offline
Community VIP
 
Join Date: Apr 2006
Location: Los Angeles, CA
Posts: 660
Thanks: 0
Thanked 0 Times in 0 Posts
The lines sticking out are the backgoround image of the navigation div. Maybe you should try using the top and bottom rounded corner images as backgrounds instead of actual img elements.
Code:
.navigation {
        float: right;
        margin-top: 0.5em;
}
.navigation top_container{
        width: ?px;
        height: ?px;
        background: transparent url(images/nav_top.gif) no-repeat scroll top center;
}
.navigation bottom_container {
        width: ?px;
        height: ?px;
        background: transparent url(images/nav_bottom.gif) no-repeat scroll bottom center;
}

.navigation div.textualcontent {
        padding-left:7px;
        background: url(images/nav_bg.gif) repeat-y;
}
Code:
    <div class="navigation">
      <div class="container_bottom"></div>
      <div class="textualcontent">
        <ul>
          <li>Link 1</li>

          <li>Link 2</li>

          <li>Link 3</li>
        </ul>
      </div>
      <div class="container_bottom"></div>
    </div>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Fine line on top of background images pixzeto CSS 4 09-06-06 12:22 PM
Background Images and JLayeredPane dwoody Everything Java 1 03-09-06 06:41 AM
Background images in tables - help!! benholmes12345 HTML/XHTML/XML 1 02-20-06 10:03 AM
Gaps and top and bottom of page El Barto CSS 12 02-10-05 03:40 PM
1024x768 res causes overlapping of text in layout Sash CSS 1 08-26-04 09:46 AM


All times are GMT -5. The time now is 01:26 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.