SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member WannaB3's Avatar
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Design Question

    Hi guys, totally newbie here. Just wanna ask a quick question on how to do something like the attached image in css. The yellow box is a container and inside that container the black box is a "<p>" tag and the red one is a blank "<div>" tag. As you can see the "<p>" tag arranger vertically and right beside it is the "<div>" tag that is blank.

    I am a totally newbie in html and css, I jsut comeup to jump advancely in css for some emergency assignment.

    Please could someone show me on how to do that. Thanks in advance
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Looks like you need something like this.

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    h2,p{margin:0 0 .5em}
    .wrap {
        width:640px;
        margin:0 auto;
        border:1px dashed #ccc;
        padding:10px;
        overflow:hidden;
        background:#f2f2f2;
    }
    /* 
     this next rule makes text stay clear of image in a rectangular block and not wrap
     IE6 though just needs haslayout which is done with the height:1% hack (or zoom)
     but will need overflow set back to visible in case it hides it all  at 1%
    */
    .text {overflow:hidden;}
    * html .txt {height:1%;overflow:visible}/* ie6 fix*/
    
    .image {/* this would be an image in the html */
        float:left;
        margin:0 10px 0 0;
        width:100px;
        height:100px;
        background:red;
        border:1px solid #000;
    } 
    </style>
    </head>
    <body>
    <div class="wrap">
        <p class="image">This would be the image</p>
        <div class="text">
            <h2>Title goes here</h2>
            <p>The description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here  .</p>
        </div>
    </div>
    <div class="wrap">
        <p class="image">This would be the image</p>
        <div class="text">
            <h2>Title goes here</h2>
            <p>The description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here  .</p>
        </div>
    </div>
    <div class="wrap">
        <p class="image">This would be the image</p>
        <div class="text">
            <h2>Title goes here</h2>
            <p>The description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here  .</p>
        </div>
    </div>
    
    </body>
    </html>
    It was designed for an image to be at the side but could be changed to text although you would probably want to lose the height.

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A definitive answer could not be given based only on a picture.

    Probably p and div aren't the elements for the job, whatever job is there to do. If it's a checkbox list or an option group, certainly p and div are the wrong elements, and that effect doesn't need but the element (checkbox or option) and its corresponding label.

  4. #4
    SitePoint Member WannaB3's Avatar
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A definitive answer could not be given based only on a picture.

    Probably p and div aren't the elements for the job, whatever job is there to do. If it's a checkbox list or an option group, certainly p and div are the wrong elements, and that effect doesn't need but the element (checkbox or option) and its corresponding label.
    Actually sir noonnope, the reason I used p tag and div was based on the javascript that im going to apply for it. When the p tag was click the div would be visible something like that.


    @Paul O'B - I tried your sample sir and that was what Im looking for though as you said you used it for image but thats not a problem I think im gonna play around with it. BTW, why you use overflow ? and was the overflow the reason why it goes into right position ?
    Sorry for too many question its just so happen im totally out of css world .

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Actually sir noonnope, the reason I used p tag and div was based on the javascript that im going to apply for it. When the p tag was click the div would be visible something like that.
    Hm, I also would not use those elements, based on that information. First of all, when I need someone to click on something with Javascript, I still like to stick to elements who are always clickable (they can receive the focus without you needing to add a negative tab index to them, as you would need to with <p> if you want users without a mouse to be able to use your page).

    BTW, why you use overflow ? and was the overflow the reason why it goes into right position ?
    If you give .wrap an ugly background colour, then remove the overflow statement (or comment it out), and look in a modern browser (so, not IE6 or IE7), and you should see the .wrap box vanish.
    This would be Paul enclosing his floats which is going to be one of your main bits of knowledge you'll need when building layouts with CSS.

    The .text having overflow: hidden was for not letting the text inside that box wrap around (and under) the image. Make the text longer (add more to it) and remove the overflow: hidden from .text and you'll see what the default behaviour is (in a modern browser).

    Though I think Paul typo'd here:
    * html .txt {height:1%;overflow:visible}/* ie6 fix*/
    That should prolly be * html .text since there's nobody with a class of .txt in the HTML.

    In fact, since you're starting out, if you haven't read Paul's Everything About Floats post or his Clearing Floats article, you'll want to (see, I haz them bookmarked : )

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Though I think Paul typo'd here:
    * html .txt {height:1%;overflow:visible}/* ie6 fix*/
    That should prolly be * html .text since there's nobody with a class of .txt in the HTML.
    Well spotted, it should be * html .text of course

  7. #7
    SitePoint Member WannaB3's Avatar
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys


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
  •