Results 1 to 9 of 9

Thread: Display: Block vs. Inline

  1. #1
    Join Date
    Jun 2007
    Location
    DeKalb, IL
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Display: Block vs. Inline

    So I think I have a basic understand of how the display parameter works in CSS. However, I guess I'm not doing it right.

    Here's my example: http://www.daily-chronicle.com/test2/
    I have a main div and then a div for the article and a div for the photo. I have the main div set up a block, and the other two sub divs as inlines. One would think that it'd work but it doesn't.

    Sometimes there won't be a photo, which is why I need the story to expand across the page when there isn't and not be in a specified width (as I had it before).

    I've tried every combination out there too (no block div, only one inline div, etc). and I still haven't figured it out.

    Got any suggestions?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Sorry, but I really don't know how you want it...
    Jeremy | jfein.net

  3. #3
    Join Date
    Jun 2007
    Location
    DeKalb, IL
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    So that the picture & the article are side by side but if there is no picture then the entire article stretches across like it does now.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    what coding language do you want this is? basically what you want is to determine whether the picture is present for the article and it it is then float the image to the right of the article, but until we know what language you would like to accomplish this in, we cannot help you. PHP/ASP/Javascript/.NET

  5. #5
    Join Date
    Jun 2007
    Location
    DeKalb, IL
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    In CSS. I'm using it on a CMS site so if the image is not uploaded then it will not show up. I just want to be able to use the display code in CSS.

  6. #6
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    you can use css regardless, but judging from your response I am going to assume that this is just a regular html/htm file, which means that you are hand coding all of the content into the page... so what you could do is assign a CSS class to the articles that have an image, and a general CSS style to the articles.

    HTML Code:
    <p>
         TEXT
         <img class="article" src="/path/to/image" width="" height="" alt="">
    </p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>
         TEXT
         <img class="article" src="/path/to/image" width="" height="" alt="">
    </p>
    <p>Text</p>
    Code:
    <style type="text/css">
    p {
         width: 100%;
         clear: right;
    }
    img.article {
         float: right;
    }
    </style>

  7. #7
    Join Date
    Jun 2007
    Location
    DeKalb, IL
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    OK, so here's my HTML code:

    HTML Code:
    Code:
    <div class="topstory" style="height:210px;">
    <div class="article">
      <span class="frontheadline">[story_component::1:headline-link]</span><br />
    <span class="frontstory">[story_component::1:paragraphs:1:2]</span><br />
    <br />
    [story_component::1:more-link]</div>
    <div class="photo">[story_component::1:image-thumbnail:300:image-photo-html]</div>
    </div>
    And here's my CSS code:
    Code:
    .topstory {margin:0; width:730px; background-image:url(http://www.daily-chronicle.com/art/images/breakout_bg_body.jpg); background-repeat:repeat-x; background-position:top left; /*display:block;*/}
    .article {/*width:410px;*/ left:0; float: left; padding-right:6px; margin-right:6px; /*display:inline;*/}
    .photo {/*width:300px;*/ float:right; /*display:inline;*/}
    I tried it your way but it still put the image below the article instead of beside it.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Code:
    <!-- NewSys(TM), version 3.40.0, Copyright TownNews.com(C) 2002-2005, on web28.ch2.l3.sys.townnews.com -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
    <base href="http://www.daily-chronicle.com/" />
    
    </head>
    
    <body>
    
    <div class="topstory" style="height:210px;">
    <div class="article" style="float:left;width:600px;">
      <span class="frontheadline"><a href="/articles/2008/02/29/test2/news02.txt">Towing Toil </a></span><br />
    <span class="frontstory">Tracey Falk couldn’t see the car. Falk was called during a January 1979 blizzard that hit the DeKalb County area with about 17 inches of snow — and that was on top of the nearly 15 inches already on the ground from past storms, according to the National Weather Service. A car was stuck on the side of Shabbona Road, on the north end of the village of Shabbona, he said.<br /><br />Falk, who has worked in towing for about 30 years, said he got out of his tow truck right where the caller said he would be — only there wasn’t a vehicle in sight, he said.</span>
    <a href="/articles/2008/02/29/test2/news02.txt">More of this story</a></div>
    <div class="photo"><script type="text/javascript" src="/shared-content/newsys/common/photo.js"></script><a href="javascript:thumbnailWindow('/articles/2008/02/29//test2//news02.img', 400, 243)"><img alt="Thumbnail" border="0" src="http://images.townnews.com/daily-chronicle.com/content/articles/2008/02/29//test2//news02_thumb.jpg"></a></div>
    </div>
    
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2007
    Location
    DeKalb, IL
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I got it figured out. I just had to take out the left: 0 and float: left of the article CSS and it worked.

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
  •