SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divitis - can I cut down on some Divs here?

    Hi, is it possible to prune down some code in my page below .. ?

    http://www.kagyu-asia.com/kl/e_wesak_2006.html
    http://www.kagyu-asia.com/kl/stylesheets/main.css

    I have two image thumbnails side by side down the page, and have a whole bunch of these in the xhtml:

    <div>
    <div class="leftimage"> <a href="e_i_w2006_bathing1.html"><img src="images/events/wesak_2006/bathing1_sm.jpg" alt="Bathing Buddha" name="th" width="150" height="110" border="1" class="th" /><br />

    Bathing Buddha</a></div>
    <div class="rightimage"> <a href="e_i_w2006_bathing2.html"><img src="images/events/wesak_2006/bathing2_sm.jpg" alt="Devotees" name="th" width="150" height="110" border="1" class="th" /><br />
    Devotees</a></div>
    </div>
    <div style="clear: both"></div>

    Is it possible to prune this down, and clear the floats somehow from within the two classes 'rightimage' and 'leftimage'? And maybe get rid of this div that just functions to clear the floats?

    Also, is it then possible to remove the wrapper div that sits around these two image holding divs? So instead of a total of four divs, I could have three or maybe even two?

    Many thanks in advance for any help ....

    Karmadungyu



    .leftimage {

    float:left;

    width:40%;

    font-size: 10px;

    color: #666666;

    padding-bottom:20px;

    }

    .rightimage {

    float:right;

    width:40%;

    font-size: 10px;

    color: #666666;

    padding-bottom:20px;

    }

  2. #2
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would suggust you replace all your <div>'s with <li>'s.

    You have a list of thumbnails.

    There are quite a few ways to hide the bullets and style it.

  3. #3
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wozbk
    I would suggust you replace all your <div>'s with <li>'s.

    You have a list of thumbnails.

    There are quite a few ways to hide the bullets and style it.
    Hi there .... thanks for that ... that's a helpful hint. Sometimes I would just have a pair of images breaking up the flow to text paragraphs, or even just one image. It wouldn't necessarily be a whole bunch of images in a block, like on the url I gave. Do you think it would still make sense to recode that in terms of lists, even when the lists may often have just one or two elements?

    thanks,

    karmadungyu

  4. #4
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I've been trying to get a list style layout working, as was suggested. For some reason, I'm not able to get the images to sit next to each other, two by two.

    http://www.kagyu-asia.com/kl/e_mahakala_lists.html
    http://www.kagyu-asia.com/kl/stylesheets/main.css

    I've made a list with 6 thumbnails in it .... the first two line up in a row, then something odd happens with just one in the next row. I can't see what the problem is ..... many thanks in advancee for any clues ....


    my xhtml is:

    <ul id="albumlist">
    <li><a href="e_i_mp_shrine.html"><img src="images/events/mahakala/shrine_sm.jpg" alt="Beru Khyentse Rinpoche and Shrine" width="150" height="110" border="1" />Beru Khyentse Rinpoche and Shrine</a></li>
    <li><a href="e_i_mp_releasing.html"><img src="images/events/mahakala/release_birds_sm.jpg" alt="Releasing Lives" width="150" height="110" border="1" />Releasing Lives</a></li>
    <li><a href="e_i_mp_prayer.html"><img src="images/events/mahakala/shrine2_sm.jpg" alt="Quiet Prayer" width="150" height="110" border="1" />Quiet Prayer</a></li>
    <li><a href="e_i_mp_tormas.html"><img src="images/events/mahakala/tormas_sm.jpg" alt="Tormas" width="150" height="110" border="1" />Tormas</a></li>
    <li><a href="e_i_mp_beru1.html"><img src="images/events/mahakala/beru_rinpoche2_sm.jpg" alt="Beru Khyentse Rinpoche" width="110" height="150" border="1" />Beru Khyentse Rinpoche</a></li>
    <li><a href="e_i_mp_fire2.html"><img src="images/events/mahakala/fire2_sm.jpg" alt="Fire Offerings" width="150" height="110" border="1" />Fire Offerings</a></li>
    </ul>
    <div style="clear: both"></div>



    and my stylesheet is:

    #albumlist {
    width: 350px;
    padding : 0px;
    }
    #albumlist li {
    float: left;
    width: 150px;
    list-style-type:none;
    margin-right: 25px;
    margin-bottom: 35px;
    }
    #albumlist img {
    display: block;
    border: 1px solid #333300;
    padding: 2px;
    }

  5. #5
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can see now why the third and fourth thumbnail don't line up ... but don't understand why. It seems it's the caption under the first thumbnail causing it, the caption which wraps over two lines. Why is that?

    I've created an alternative set of thumbnails for comparison, and they line up:
    http://www.kagyu-asia.com/kl/e_mahakala_lists2.html
    and
    http://www.kagyu-asia.com/kl/e_mahakala_lists.html

    any help would be really appreciated!

    many thanks .....

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that's not exactly cutting it down for you, is it?

    If you are after using less tags, I'd lose the containers around the anchors, and use the anchors THEMSELVES for the formatting. In addition I'd declare display:block on those, just to make their sizing and positioning predictable between browsers.

    Also, assigning the th class to them isn't quite going to fly... I'd probably delete both that and the name, or put class to good use.

    So for your first examples:

    The CSS:
    Code:
    .image_left {
      float:left;
    }
    
    .image_right {
      float:right;
    }
    
    #thumbrow {
    }
    
    #thumbrow a {
      width:40%;
      font-size: 10px; 
      color: #666666;
      padding-bottom:20px;
    }
    
    #thumbrow a img{
      display:block;
      border:1px solid #000000;
    }
    
    #thumb_wide {
      width:150px;
      height:110px;
    }
    
    #thumb_tall {
      width:110px;
      height:150px;
    }
    and the HTML
    Code:
    <div id="thumbrow">
      <a class="image_left" href="e_i_w2006_bathing1.html">
        <img src="images/events/wesak_2006/bathing1_sm.jpg" alt="Bathing Buddha" class="thumb_wide" />
        Bathing Buddha
      </a>
      <a class="image_right" href="e_i_w2006_bathing2.html">
        <img src="images/events/wesak_2006/bathing2_sm.jpg" alt="Devotees" class="thumb_tall" />
        Devotees
      </a>
    </div>
    You want two items per row, aligned top with each-other, that should give them to you... oh, and it would also validate 'strict'

    A unordered list does NOT serve your purpose here without overriding an load of it's default behaviors, and is the WRONG tag given your layout anyways. A list is usually a single row or column; you've got two columns by an infinate number of rows, which means that's a TABLE...

    Of course, that's something I don't understand - why some people think a table for layout is a hack - yet will go to ABSURD lengths to use UL/LI, overriding it's default behavior with MULTIPLE lines of CSS just to not have it work right between browsers and screen sizes... UL was meant for flat lists, yet people go out of their way to make it display tabular data... makes less sense than floating divs.

    I mean THIS is at least predictable between most browsers in Strict:
    Code:
    <table id="thumbs">
      <tr>
        <td>
          <a class="image_left" href="e_i_w2006_bathing1.html">
            <img src="images/events/wesak_2006/bathing1_sm.jpg" alt="Bathing Buddha" class="thumb_wide" />
            Bathing Buddha
          </a>
        </td>
        <td>
          <a class="image_right" href="e_i_w2006_bathing2.html">
            <img src="images/events/wesak_2006/bathing2_sm.jpg" alt="Devotees" class="thumb_tall" />
            Devotees
          </a>
        <td>
      </tr>
    </table>
    Even if it is a bit long.

  7. #7
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are quite a few different ways to tackle this...

    Here is something I slapped to together that may be close what you are after.

  8. #8
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I neglected to include captions, which you seem to require, so here is a pretty flexible example, with captions.

    I would say you don't need any <div>'s at all for the thumbnails.


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
  •