WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.8 is now available!


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Bakery Shop »
  • Item loop first last div
  • Print
Pages: [1]   Go Down

Author Topic: Item loop first last div  (Read 5844 times)

daydreamer

  • Guest
Item loop first last div
« on: July 11, 2013, 11:13:03 AM »
On the item loop I need the first and last divs to have a class of first & last. so the fist div has margin-left 0 and last div has margin-right 0. How can this be done?
« Last Edit: July 11, 2013, 11:16:00 AM by daydreamer »
Logged

freeSbee

  • Guest
Re: Item loop first last div
« Reply #1 on: July 11, 2013, 11:26:48 AM »
Hi daydramer

Use CSS selectors like :first-child and :last-child.

Regards Christoph
Logged

daydreamer

  • Guest
Re: Item loop first last div
« Reply #2 on: July 11, 2013, 11:34:46 AM »
Ok great thanks
Logged

daydreamer

  • Guest
Re: Item loop first last div
« Reply #3 on: July 11, 2013, 11:40:37 AM »
Could you show me an example please
Logged

daydreamer

  • Guest
Re: Item loop first last div
« Reply #4 on: July 11, 2013, 11:47:18 AM »
The problem I have is I'm using skeleton responsive and my looped items are in a four column div

The first would need alpha
and the last would need omega so it doesn't work with css first-child last-child
Logged

daydreamer

  • Guest
Re: Item loop first last div
« Reply #5 on: July 11, 2013, 12:06:29 PM »
Solved with this

Code: [Select]
#loop {
background-color: #F1F1F1;
padding: 20px;
margin-bottom: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#loop:first-of-type {
margin-left: 0;
}
#loop:last-child {
margin-right: 0;

Code: [Select]
<div id="loop"class="four columns">
<a href="[LINK]">[TITLE]</a>
[THUMB]
<p>[DESCRIPTION]</p>
</div>
Logged

daydreamer

  • Guest
Re: Item loop first last div
« Reply #6 on: July 11, 2013, 01:17:17 PM »
UPDATE: only works on first row of 3 divs not more :?
Logged

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Bakery Shop »
  • Item loop first last div
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2