Any CSS Guru's here......

Discussion in 'CSS' started by dilip_premraj, Feb 9, 2007.

  1. #1
    pls see the atchmnt......
    i'm currently workng in a cms project.....
    and i need to build a html layout as shown in the figure....
    there are two pictures in the layout and they are fixed in position and size....
    and the text should "flow" between the two pics...
    i.e the content should be of variable length....
    and if it is very lengthy it should flow between the two pictures.....
    the content is placed in an outer div and the two pics are placed in separate div's inside the outer div.......
    i hope u all understood the question....
    pls help me out.....

    anyway the direct link to the image is...
    h*tp://img253.imageshack.us/img253/365/cms1td1.jpg

    [​IMG]
     
    dilip_premraj, Feb 9, 2007 IP
  2. jared

    jared Peon

    Messages:
    231
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    just float the images

    so you will have 2 classes like this
    
    img_right {
      float: right;
    }
    
    img_left {
      float: left;
    }
    
    Code (markup):
    then just assign the classes to the images such as
    
    <img src="imagename.jpg" class="img_right" />
    and
    <img src="image2name.jpg" class="img_left" />
    
    Code (markup):
    cheers
     
    jared, Feb 9, 2007 IP
  3. dilip_premraj

    dilip_premraj Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    pls examin the follwing code...

    <div style="width:350; border: 1px solid gray;">

    <img style="float:right;" border="0" src="uplift.jpg" width="151" height="113" />
    <p>
    A safari park is a large nature reserve intended for safari tours
    and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including
    popular parks in England. People who wish to see animals in their natural state will love a trip to the
    safari.
    A safari park is a large nature reserve intended for safari tours
    and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including
    popular parks in England. People who wish to see animals in their natural state will love a trip to the
    safari.
    </p>
    <img style="float:left;" border="0" src="uplift.jpg" width="151" height="113" />
    </div>

    the above code produces the following result...
    [​IMG]

    in the figure, the position of the second image is not fixed.....
    the second image will come down as the text increases....
    and the position of the image will vary according to the contents....this is not i want....
    the position of the image should be fixed and the text should flow in between them......as shown in the previous figure....

    nywy thanx for ur reply.....
     
    dilip_premraj, Feb 9, 2007 IP
  4. iblob

    iblob Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You will still need to set a fixed position for these images. So for the same styles add position:absolute; and then top:200px; or something close to that.
     
    iblob, Feb 9, 2007 IP
  5. jared

    jared Peon

    Messages:
    231
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    iblob said it, let us know if you need any further explanation

    cheers
     
    jared, Feb 9, 2007 IP
  6. dilip_premraj

    dilip_premraj Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    pls see the code.......

    <div style="width:350; border: 1px solid gray;">
    <img style="float:right;" border="0" src="uplift.jpg" width="151" height="113" />
    <p>
    A safari park is a large nature reserve intended for safari tours
    and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular
    parks in England. People who wish to see animals in their natural state will love a trip to the safari.
    A safari park is a large nature reserve intended for safari tours
    and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular
    parks in England. People who wish to see animals in their natural state will love a trip to the safari.
    A safari park is a large nature reserve intended for safari tours
    and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular parks in England. People who wish to see animals in their natural state will love a trip to the safari.
    </p>
    <img style="float:left;position:absolute;top:200px;left:15px;" border="0" src="uplift.jpg" width="151" height="113" />
    </div>


    will produce the following result....
    [​IMG]

    but small portion of the text will be showned behind the image....

    pls see the picture.....
    the hidden text should be place right to the second image.....
    ie text should flow between the two images.....
    is there any way to show the text behind the image.....
    any idea...???
     
    dilip_premraj, Feb 10, 2007 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    A little study should make the solution apparent. The empty div is &#230;sthetically displeasing, but there you are.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <meta name="generator"
            content="HTML Tidy for Windows (vers 1st February 2003), see www.w3.org" />
      <meta name="editor"
            content="Emacs 21" />
      <meta name="author"
            content="Gary Turner" />
      <meta http-equiv="content-type"
            content="text/html; charset=UTF8" />
    
      <title></title>
      <style type="text/css">
      /*<![CDATA[*/
    
      html, body {
        margin: 0;
        padding: 0;
        }
        
      body {
        font: 100% verdana, sans-serif;
        }
        
      #wrap {
        width: 500px;
        margin: 25px auto;
        padding: 10px;
        border: 1px solid black;
        }
        
      .leftbank {
        float: left;
        clear: left;
        }
        
      .rightbank {
        float: right;
        }
        
      .spacer {
        width: 0;
        height: 300px;
        }
    
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div id="wrap">
        <img class="rightbank"
             src="bullseye.jpg"
             width="200"
             alt="" />
    
        <div class="spacer leftbank">
          <!-- -->
        </div>
        
        <img class="leftbank"
             src="bullseye.jpg"
             width="200"
             alt="" /> 
    
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Praesent eget arcu. In aliquet. In dignissim nulla ac dui.
        Aliquam euismod est at erat. In hac habitasse platea dictumst.
        Proin at orci vel erat bibendum hendrerit. Donec molestie.
        Quisque in quam. Nulla condimentum turpis eu augue. Proin arcu
        enim, mattis nec, posuere vestibulum, sollicitudin adipiscing,
        quam. Nam ac ipsum vel nulla faucibus feugiat. Aenean eget
        tellus nec erat euismod aliquam. Phasellus rutrum sem in
        turpis. Aliquam in urna sed ligula dapibus consequat. Cum
        sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Vivamus sollicitudin, nulla eget
        interdum dignissim, pede odio egestas lacus, commodo porttitor
        neque risus viverra risus. Sed ullamcorper varius arcu.
        Maecenas vulputate. Suspendisse potenti. Fusce egestas dui et
        pede. Nulla dui mi, pulvinar ac, eleifend eget, facilisis at,
        lectus. Pellentesque laoreet congue neque. In lorem dui,
        convallis fringilla, viverra blandit, rutrum ac, dolor.
        Phasellus tristique dignissim leo. Quisque nonummy. Fusce sit
        amet quam et est mattis facilisis.</p>
      </div>
    </body>
    </html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 10, 2007 IP
  8. dilip_premraj

    dilip_premraj Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Excellent one dude.......n thnx.....

    but i hav one more doubt......
    suppose we want to flow the text as columns....
    (as shown in the figure below...the red arrow indicates the text direction)
    so is there any way to implement this......

    anyway thanx a lot for your solution....

    [​IMG]
     
    dilip_premraj, Feb 18, 2007 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Flowed columns are a part of the css3 working draft. The Moz/Gecko browsers experimentally support it. It will be a useful property, but subject to abuse. It's something that works well in print, but poorly on a web page. It's no fun to scroll down to read something, then scroll back up to continue in the next column.

    I've posted an example of flowed columns. You'll have to use Firefox to view the effect.

    cheers,

    gary
     
    kk5st, Feb 18, 2007 IP