SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to design complex boxes

    Hello,

    Please have a look at the attachment, I find it difficult to design using CSS. I'm comfortable with CSS layouts.

    Please guide me on:
    1. how to design this box for a static box using DIVs
    2. how to design this box when the structure is generated automatically through a system like Drupal.

    Thanks and Regards
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just have a <div> enclosing everything and inside of that have a <h1> or one of them and have the Lorem Ipsum with the light purple background image on there (including the corners) and then have another <div> and inside of it have a <img> floated left and then a paragraph floated left. For the next paragraph just clear that one...gonna need overflow:hidden on the div enclosing the image and the paragraph.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for ur reply,
    but what should i do when the text come dynamically through a system like drupal.....

    please help me..

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ashish.design View Post
    Thanks for ur reply,
    but what should i do when the text come dynamically through a system like drupal.....
    Just have a <div> enclosing everything and inside of that have a <h1> or one of them and have the Lorem Ipsum with the light purple background image on there (including the corners) and then have another <div> and inside of it have a <img> floated left and then a paragraph floated left. For the next paragraph just clear that one...gonna need overflow:hidden on the div enclosing the image and the paragraph.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Just have a <div> enclosing everything and inside of that have a <h1> or one of them and have the Lorem Ipsum with the light purple background image on there (including the corners) and then have another <div> and inside of it have a <img> floated left and then a paragraph floated left. For the next paragraph just clear that one...gonna need overflow:hidden on the div enclosing the image and the paragraph.
    Quote Originally Posted by jameshopkins
    Just have a <div> enclosing everything and inside of that have a <h1> or one of them and have the Lorem Ipsum with the light purple background image on there (including the corners) and then have another <div> and inside of it have a <img> floated left and then a paragraph floated left. For the next paragraph just clear that one...gonna need overflow:hidden on the div enclosing the image and the paragraph.
    Dynamic content shouldn't be an issue...just make sure it outputs after the image.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •