WEB Drupal theming help (css) (1mth sub w/banners)

Discussion in 'OT Technology' started by Insert Tokens, Jan 10, 2008.

  1. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,326
    Likes Received:
    70
    Location:
    Tasmania
    Can anyone help me here? Will get a 1mth sub w/ banners if I can get an answer within the next hour.. desperately wanna get this done..

    I'm using the Views module of Drupal to create 2 blocks for the front page, but I want the blocks to sit side by side.. right now they're one under the other. I've managed to fluke my way through most of this so far to make my theme but i'm stumped here and it's one of the last bits I need before I can go live..

    What CSS classes/IDs do I have to add to my stylesheet to make these sit side by side (this is the HTML drupal is generating for the blocks)..

    Code:
    <!-- Left Block -->
    <div class="block block-views" id="block-views-LatestNews">
    <h2 class="title"><span>Latest News</span></h2>
      <div class="content"><div class='view view-LatestNews'><div class='view-content view-content-LatestNews'><div class="item-list"><ul><li><div class='view-item view-item-LatestNews'><div class='view-field view-data-node-title'><a href="/new/node/9">Hai guyz.</a></div></div>
    </li><li><div class='view-item view-item-LatestNews'><div class='view-field view-data-node-title'><a href="/new/node/7">Another test article</a></div></div>
    </li><li><div class='view-item view-item-LatestNews'><div class='view-field view-data-node-title'><a href="/new/node/6">Test article</a></div></div>
    </li></ul></div></div></div>
    </div>
    </div>
    
    <!-- Right Block -->
    <div class="block block-views" id="block-views-LatestHealthyLiving">
    <h2 class="title"><span>Latest Healthy Living</span></h2>
      <div class="content"><div class='view view-LatestHealthyLiving'><div class='view-content view-content-LatestHealthyLiving'><div class="item-list"><ul><li><div class='view-item view-item-LatestHealthyLiving'><div class='view-field view-data-node-title'><a href="/new/node/5">Healthy Living test one.</a></div></div>
    </li></ul></div></div></div>
    </div>
    </div>
     
  2. Browning

    Browning Active Member

    Joined:
    Feb 14, 2005
    Messages:
    89,465
    Likes Received:
    10
  3. Zac

    Zac New Member

    Joined:
    Nov 24, 2006
    Messages:
    151
    Likes Received:
    0
    :dunno: i added another class to each container div that just contains: "float: left" and they sit side by side. might act up with other parts of your layout, but try that.
     
  4. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,326
    Likes Received:
    70
    Location:
    Tasmania
    Yeh I want it split up.. I can do it with tables, but I don't want it with tables, I want it with CSS.

    I know how to make 2 columns with CSS just using margin:auto etc, but I don't know how to structure the classes/IDs to work with Drupals pre-defined class and ID names..

    So what i'd like is someone to tell me the 2 classes/IDs I need to add to get those 2 blocks to sit in 2 columns..

    I've added comments to the code to show which should be on left, which should be on the right..
     
  5. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,326
    Likes Received:
    70
    Location:
    Tasmania
    So for this:

    Code:
    <div class="block block-views" id="block-views-LatestHealthyLiving">
    I'd do something like:

    Code:
    #block-views-LatestHealthyLiving {
    float:right;
    }
    ?
     
  6. Zac

    Zac New Member

    Joined:
    Nov 24, 2006
    Messages:
    151
    Likes Received:
    0
    Code:
    <!-- Left Block -->
    <div class="block block-views fleft" id="block-views-LatestNews">
    <h2 class="title"><span>Latest News</span></h2>
      <div class="content"><div class='view view-LatestNews'><div class='view-content view-content-LatestNews'><div class="item-list"><ul><li><div class='view-item view-item-LatestNews'><div class='view-field view-data-node-title'><a href="/new/node/9">Hai guyz.</a></div></div>
    </li><li><div class='view-item view-item-LatestNews'><div class='view-field view-data-node-title'><a href="/new/node/7">Another test article</a></div></div>
    </li><li><div class='view-item view-item-LatestNews'><div class='view-field view-data-node-title'><a href="/new/node/6">Test article</a></div></div>
    </li></ul></div></div></div>
    </div>
    </div>
    
    <!-- Right Block -->
    <div class="block block-views fleft" id="block-views-LatestHealthyLiving">
    <h2 class="title"><span>Latest Healthy Living</span></h2>
      <div class="content"><div class='view view-LatestHealthyLiving'><div class='view-content view-content-LatestHealthyLiving'><div class="item-list"><ul><li><div class='view-item view-item-LatestHealthyLiving'><div class='view-field view-data-node-title'><a href="/new/node/5">Healthy Living test one.</a></div></div>
    </li></ul></div></div></div>
    </div>
    </div>
    

    and in your css:

    Code:
    .fleft {
     float: left;
    }
    

    give that a shot. like i said it might hurt other parts of your layout :dunno:
     
  7. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,326
    Likes Received:
    70
    Location:
    Tasmania
    Those class fields are pre-defined by the plugin, I can't add the fleft into the DIV tags..
     
  8. Zac

    Zac New Member

    Joined:
    Nov 24, 2006
    Messages:
    151
    Likes Received:
    0
    so you can't really change the html up? can you add the following to the css? (going off of the IDs since I don't want to fuck with any of the normal layout elements)

    Code:
    #block-views-LatestNews,
    #block-views-LatestHealthyLiving {
     float: left;
    }
    
     
  9. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,326
    Likes Received:
    70
    Location:
    Tasmania
    Yeh can't change the HTML, have to work off those IDs and classes in that code..

    The CSS you gave me isn't changing anything on my page though.. :dunno:
     
  10. Zac

    Zac New Member

    Joined:
    Nov 24, 2006
    Messages:
    151
    Likes Received:
    0
    at work and bored so i'll keep messing with it if you want

    pm me the source of the page + css file? (or just the url if it's online?)
     
  11. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,326
    Likes Received:
    70
    Location:
    Tasmania
    It's not online right now.. I have to run now for a couple hours but I will still offer the sub for a solution when I get back and will make the page public.
     

Share This Page