divs and background images_问答_开发者_运维开发者技术经验分享

so here is the problem i'm trying to solve, i want to use a background image that is 500px wide for my divs that has a drop shadow on the right edge however i want the text to stop and wrap after 475px and i still want the enti开发者_运维百科re image to show up to include the dropshadow. is there anyway to accomplish this?

html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
        <link href="tech/sandbox2.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="page1top">top</div>
        <div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div>
        <div id="page1btm">this is the bottom</div>
    </body>
</html>

css code:

@charset "UTF-8";
/* CSS Document */

#page1top{
    position:relative;
    background:url(../media/page1top.png) no-repeat;
    width:500px;
}
#page1mid{
    position:relative;
    background:url(../media/page1mid.png) repeat;
    overflow:visible;
    width:500px;
    height:auto;
    padding:30;
    margin:30;
    top:-10;
}
#page1btm{
    position:relative;
    width:500px;
    background:url(../media/page1btm.png) no-repeat;
}

Use nested <div> tags. While @Robusto's suggestion is not incorrect, it is not semantically desirable. It mixes a design element with a style descriptor. Your block elements should determine such design spacing, and then use your element styles to control the margin/padding of the text itself.

CSS:

#page1top{ 
    position:relative; 
    background:url(../media/page1top.png) no-repeat; 
    width:500px; 
} 
#page1mid{ 
    position:relative; 
    background:url(../media/page1mid.png) repeat; 
    overflow:visible; 
    width:500px; 
    height:auto; 
    padding:30; 
    margin:30; 
    top:-10; 
} 
#page1btm{ 
    position:relative; 
    width:500px; 
    background:url(../media/page1btm.png) no-repeat; 
} 
.content_container{ 
    width: 475px;
    overflow: inherit;
}

HTML:

<div id="page1top">top</div> 
<div id="page1mid">
    <div class="content_container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p>
    </div>
</div> 
<div id="page1btm">this is the bottom</div>

Keep the div at 500px wide and put the text in a p tag inside it, setting the p tag to 475px in width.

<div class="shadow-div" style="width:500px">
  <p style="width:475px">
    Text here blah blah blah.
  </p>
</div>

If you declare units on your padding, this would probably happen for you automatically. Change padding: 30; to padding: 30px;. If you need more padding, just adjust the number. If you don't want the padding to be even on each side, write it like this: padding: 10px 25px 10px 10px;. The measurements travel clockwise so it goes top, right, bottom, left;

Can you modify your HTML?

<div class="fancybackground"><div class="text">something</div></div>

CSS:

.fancybackground { background: url(...) }
.text { margin-right: 25px; }

divs and background images

精彩评论

关注公众号

热门标签

图文推荐

divs and background images

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：