css - divs and background images -

-

so here problem i'm trying solve, want use background image 500px wide divs has drop shadow on right edge want text stop , wrap after 475px , still want entire image show include dropshadow. there anyway 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, @ 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 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 not incorrect, not semantically desirable. mixes design element style descriptor. block elements should determine such design spacing, , use element styles control margin/padding of 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, @ 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 bottom</div>

Comments

Post a Comment

Popular posts from this blog

ASP.NET/SQL find the element ID and update database -

-
basically i've got update query runs when click submit button. i have asp:repeater in page layer inside this <asp:repeater id="dgbookings" runat="server" onitemdatabound="itemdb"> <itemtemplate> <div class="bookingscontent"> <div class="bookingdetails" id="<%# databinder.eval(container.dataitem, "booking_ref") %>"> <p class="infotext"><%# databinder.eval(container.dataitem, "adults") %> <asp:linkbutton onclick="editdetails" text="edit..." runat="server"></asp:linkbutton></p> <p class="infotext"><asp:linkbutton onclick="submitdetails" text="submit..." runat="server"></asp:linkbutton></p> </div> </div> </itemtemplate> <asp:repeater> and outputs ...
Read more

jquery - appear modal windows bottom -

-
i have modal windows in application, work fine <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> but when modal appears, appear top of windows, , want appear bottom the application joomla 3.0! , using template of meet gavern any idea? i found solution i modified de css in bootstrap .modal.fade { top:-25%; -webkit-transition:opacity .3s linear, bottom .3s ease-out; -moz-transition:opacity .3s linear, bottom .3s ease-out; -ms-transition:opacity .3s linear, bottom .3s ease-out; -o-transition:opacity .3s linear, bottom .3s ease-out; transition:opacity .3s linear, bottom .3s ease-out; }
Read more

c++ - Compiling static TagLib 1.6.3 libraries for Windows -

-
i having super hard time compiling , using taglib 1.6.3 in qt project. i've tried can think of. taglib claims supported through cmake i'm not having luck. furthermore, i'm confused kinds of files need qt libs! i've built *.a files, *.lib, , *.dll. understand far... believe since i'm working in windows *.lib want. no matter do, end "undefined references" taglib functions try use when try compile qt project. have tried mingw32, msys, visual studio 2008, , cross-compiling windows on linux. turning nothing. what makes less sense me if compile same taglib source qt on mac (g++ think?) works fine! somewhere in windows compilation procedures have going wrong. have been smacking face on desk 30 (on , off) hours trying figure out. since qt uses mingw must compile taglib same compiler? if compile *.lib's visual studio not compatible? are *.a libraries usable in windows? (assuming mingw) i'm still trying handle on c++ stuff, after reading coun...
Read more