T
thme
Gast
Hallo Zusammen
Meine Frage mag etwas komisch klingen... Ich bin gerade dabei eine Website zu programmieren. In HTML habe ich eine <ul> Liste erstellt, welche von <ol> gruppierte <li>-Elemente enthält:
Ich hätte gerne immer nach jedem 4. <ol>-Element ein div mit der Eigenschaft "clear: both;" eingefügt. Die <ol> werden aber später beliebig erweitert, sodass sich die Reihenfolge stetig ändert.
Ist es möglich mit javascript automatisch nach jedem 4. <ol>-Element eine Zeile einzufügen?:
Vielen Dank für eure Antworten und eure Zeit.
Meine Frage mag etwas komisch klingen... Ich bin gerade dabei eine Website zu programmieren. In HTML habe ich eine <ul> Liste erstellt, welche von <ol> gruppierte <li>-Elemente enthält:
HTML:
<ul class="ff-items">
<ol>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/366400-Chameleon">
<span>Chameleon</span>
<img src="images/1.jpg"/>
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
<span>Tutorials (wip)</span>
<img src="images/2.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/138484-Symplas-website">
<span>Symplas website</span>
<img src="images/4.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/188524-Event-Planning">
<span>Event Planning</span>
<img src="images/9.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/347197-Cake">
<span>Cake</span>
<img src="images/6.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/372566-Flower">
<span>Flower</span>
<img src="images/3.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/188524-Event-Planning">
<span>Event Planning</span>
<img src="images/9.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/347197-Cake">
<span>Cake</span>
<img src="images/6.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/372566-Flower">
<span>Flower</span>
<img src="images/3.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/366400-Chameleon">
<span>Chameleon</span>
<img src="images/1.jpg"/>
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
<span>Tutorials (wip)</span>
<img src="images/2.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/138484-Symplas-website">
<span>Symplas website</span>
<img src="images/4.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/188524-Event-Planning">
<span>Event Planning</span>
<img src="images/9.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/347197-Cake">
<span>Cake</span>
<img src="images/6.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/372566-Flower">
<span>Flower</span>
<img src="images/3.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-3">
<a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-">
<span>TRON: Mobile version</span>
<img src="images/5.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/186199-Tailoring-accessories">
<span>Tailoring accessories</span>
<img src="images/7.jpg" />
</a>
</li>
<li class="ff-item-type-3">
<a href="http://dribbble.com/shots/133859-App-icon">
<span>App icon</span>
<img src="images/8.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/366400-Chameleon">
<span>Chameleon</span>
<img src="images/1.jpg"/>
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
<span>Tutorials (wip)</span>
<img src="images/2.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/138484-Symplas-website">
<span>Symplas website</span>
<img src="images/4.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/366400-Chameleon">
<span>Chameleon</span>
<img src="images/1.jpg"/>
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
<span>Tutorials (wip)</span>
<img src="images/2.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/138484-Symplas-website">
<span>Symplas website</span>
<img src="images/4.jpg" />
</a>
</li>
</ol>
<ol>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/188524-Event-Planning">
<span>Event Planning</span>
<img src="images/9.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/347197-Cake">
<span>Cake</span>
<img src="images/6.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/372566-Flower">
<span>Flower</span>
<img src="images/3.jpg" />
</a>
</li>
</ol>
</ul>
Ich hätte gerne immer nach jedem 4. <ol>-Element ein div mit der Eigenschaft "clear: both;" eingefügt. Die <ol> werden aber später beliebig erweitert, sodass sich die Reihenfolge stetig ändert.
Ist es möglich mit javascript automatisch nach jedem 4. <ol>-Element eine Zeile einzufügen?:
HTML:
<div class="clr"></div>
Vielen Dank für eure Antworten und eure Zeit.