SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Subwoofer image to wrap around content

    Hi there everyone. Very new to CSS. Have a project under way that requires an image of a sub woofer to contain my main content. So I guess I will need to have sides that will extend with the length of the content and separate images for the top and bottom and another image in behind the content that will be the sub itself.

    How can I go about making this work??????

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Welcome to Sitepoint

    Yes, something along those lines would work, the solution really depends on what the image looks like - do you have a link?
    You need to make boxes that are flexible with height because the text can be always be different sizes on different computers.

  3. #3
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that - but how would you go about coding something like that so that all the images and divs sit nicely on the page and the sides of the amp extend to fit the text/ content??

    Thanks for your help too btw :-)

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by phoenix_dn View Post
    Thanks for that - but how would you go about coding something like that so that all the images and divs sit nicely on the page and the sides of the amp extend to fit the text/ content??

    Thanks for your help too btw :-)
    We really need to see the image of what you're trying to replicate to give the right advice.
    Most people who have been designing for the web for a while don't try to fit variable height text into fixed height images.
    Here's one way to achieve what you're after.
    Code html5:
    <div class="sub">
      <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    Code css:
    .sub {
      width: 300px;
      background: blue url(sub-sides.png) repeat-y 0 0;
    }
    .sub .inner {
      padding: 20px;
    }
    .sub:before, .sub:after {
      display: block;
      content: '';
      height: 30px;
      background: red url(sub-top.png) repeat-y 0 0;
    }
    .sub:after {
      background: red url(sub-bottom.png) repeat-y 0 0;
    }
    Give the wrapper the repeating side images, add an element top and bottom, add padding to the inner element.
    The :before and :after are generating the top and bottom elements, kind of like doing this, but without having to put them into the HTML.
    Code html5:
    <div class="sub">
      <div class="top"></div>
      <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="bottom"></div>
    </div>

  5. #5
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok so here is the type of image that I am talking about do you think this would work with your suggestion above?

    6262212_01.jpg

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Since you can neatly slice a horizontal line through the middle of that image, it should be ok to expand vertically. The middle section can be cut out and allowed to repeat as much as needed.


Tags for this Thread

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
  •