1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Does anyone know how to create this in CSS & HTML?

Discussion in 'HTML & Website Design' started by eritrea1, Oct 16, 2012.

  1. #1
    lll.jpg
    I am trying to create the above layout in css, but sadly I can't. The only way (it seems) I can create it is with tables, and I don't want to use tables. I need to incorporate standard way scripting and not of using tables for hacks other than for tabular diagram.

    So, I tried with ul tags, but I just can't make it. The picture box always jumps out of the container <ul> container. I need both the picture and the comment panels to appear in the the same frame.

    I started out with this

    <html><head><style>
    ul#show_comment{width:400px; border:1px solid #CCC;}
    ul#show_comment li.user_img{background-color:#efefef; float:left; width:80px;}
    ul#show_comment li.user_comment{background-color:#efefef; width:315px; float:right}
    </style></head><body>
    
    
    
    <ul id="show_comment">
        
            <li class="user_img"> ##<br/>##<br/>##<br/> </li>   <!-- this is a box for displaying the image --> 
           <li class="user_comment"> This is a comment box, seen to the right of the picture attached. </li> <!-- this is a box for displaying the comment -->
    
    </ul>
    
    HTML:
     
    eritrea1, Oct 16, 2012 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #2
    I would use <div> instead of <ul> <li> and set all of them float left. Give the first div with fixed width and the second div would appear as you desired.
     
    ketting00, Oct 17, 2012 IP
  3. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #3
    Untitled-6.gif

    Best thing to do is to draw a border around the different elements to see where to place your DIVs
     
    scottlpool2003, Oct 17, 2012 IP
    ggiindia likes this.
  4. santhoshmr87

    santhoshmr87 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    To show you the clear layout structure I have written HTML and inline CSS coding for the layout design.

    * ----------------------------------------------------------------------------------------------- *

    <html>
    <head>
    </head>
    <body>
    <div style="width:410px;height:58px;border:1px solid red;">
    <div style="width:63px;height:58px;border:1px solid blue;float:left;background:yellow;">
    <div style="width:53px;height:53px;border:1px solid blue;background:pink;margin:2px 1px 1px 4px;">
    <!-- Call the image Path here-->
    </div>
    </div>
    <div style="width:341px;height:58px;border:1px solid green;float:right;">
    <div style="font-family:arial; font-size:11px;">
    <b>montpelier28 .,</b> Stowe. VT <br/>
    Vermont Chicken Out, afraid of Big Bad Monstano's money, (and many <br/>
    others just easy to point out Monsanto).<br/>
    </div>
    </div>
    </div>
    </body>
    </html>

    *----------------------------------------------------------------------------------------------*

    Result:
    ------

    img2.jpg

    For your reference I have not included the Img src path tag in the above codings.
     
    santhoshmr87, Oct 17, 2012 IP
  5. eritrea1

    eritrea1 Active Member

    Messages:
    182
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    70
    #5
    <html>
    <head>
    </head>
    <body>
    <div style="width:410px;height:58px;border:1px solid red;">
    <div style="width:63px;height:58px;border:1px solid blue;float:left;background:yellow;">
    <div style="width:53px;height:53px;border:1px solid blue;backgroundink;margin:2px 1px 1px 4px;"> 
    <!-- Call the image Path here-->
    </div>
    </div>
    <div style="width:341px;height:58px;border:1px solid green;float:right;">
    <div style="font-family:arial; font-size:11px;">
    <b>montpelier28 .,</b> Stowe. VT <br/>
    Vermont Chicken Out, afraid of Big Bad Monstano's money, (and many <br/>
    others just easy to point out Monsanto).<br/>
    </div>
    </div>
    </div>
    </body>
    </html>
    HTML:


    If you could duplicate the above code two three times that is only the div containers ( Since there will be many outputted comments)
    You will notice the image box will only stay at the top, messing the whole code.

    I have tried that once, and that is why I said, the image box jumps out of the container.

    Just try it, in your note pad, and you will see what I am saying. It may seem easy to create this thing, but it is hard.


     
    eritrea1, Oct 17, 2012 IP
  6. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #6
    I think it's probably an issue with the float. Instead of floating multiple DIVs, float the main outer container and use margins for the rest. Also if that doesn't work, try simply using <img src="" align="left"> or <img src="" style="float:left;">

    Alternatively which I don't like but each to their own, use the position absolute feature.
     
    scottlpool2003, Oct 17, 2012 IP