Not in Order when using Masonry Layout using css grid - javascript

I'm trying to create layout of 2 columns using masonry layout in grid system. Each Item may have multiple links and descriptions. So that I tried using masonry layout avoid gap in rows.
But the item are not in order (Left to Right). In the below pic first item as multiple links to its occupied two rows. So that 3rd item wrap to 2nd column.
How can i avoid that 3rd item shouldn't wrap to 2nd column. It's should be in left to right or Odd items on left and even on right.
How can anyone help me with this please.
let productList={
resizeAllGridItems: function(){
allItems = document.getElementsByClassName("item");
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}
}
$(document).ready(function () {
productList.resizeAllGridItems();
$( window ).resize(function() {
productList.resizeAllGridItems
});
});
function resizeGridItem(item){
grid = document.getElementsByClassName("grid")[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
console.log(rowHeight,rowGap,(item.querySelector('.content').getBoundingClientRect().height+rowGap))
rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}
.container{
max-width:640px;
}
.grid {
display: grid;
grid-gap: 50px 40px;
grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
grid-auto-rows: 40px;
}
body {
margin: 10px;
color: #374046;
background-color: #fff;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.15em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.item {
background-color: #ffffff;
border: 2px solid black;
}
.product-link{
font-size: larger;
}
.desc{
padding-right:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="grid">
<div class="item">
<div class="content">
<div class="title">
<p>Index-Lined Annuity -1</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Single Premium Income Annuity -2 </p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Variable Annuity -3</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Fixed Rate Annuity -4</p>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Deffered Annuity -5</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
enter image description here

Related

Unable to set grid width property

On my personal page i have a section with Skills, showing how much i know each programing language (i do not think it is accurate but whatever). I can seem to set width on the Skill grid to behave as all the other grids.
This is how it looks:
This is what i need it to look like (except with the skills instead of email):
Here you can access the code:
https://codepen.io/wodosharlatan/pen/OJwQNLL
I solved the contact section by using grid-column: span 2;, but it does not work for this section, i also tried setting the grid width to 100% but it did not do anything
Any help or ideas are appreciated, if you need more code drop me a comment

You are setting grid with two columns instead of one for "medium devices".
.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
grid-template-columns: repeat(2, 1fr);
}
replace it in your media query for medium sized devices with:
.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
grid-template-columns: 1fr;
}
Keep in mind these are combined selectors, so it will change styles for others containers also, but I hope you want to achieve full width for medium sized devices anyway.
P.S.
grid-template-columns: repeat(2, 1fr);
just creates two equal columns and repeat function translates to:
grid-template-columns: 1fr 1fr;
Also don't forget to cleanup spanning column code :-)

It seems the skills__container has an extra wrapping layer inside for the content, and might not actually apply the layout to its content.
Forked demo with modification: codepen
Try remove the extra wrapping layer:
<div class="skills__container container grid">
<!-- Removed extra wrapper 👉 <div> -->
<!--==================== SKILLS 1 ====================-->
<div class="skills__content skills__open">
<div class="skills__header">
<i class="uil uil-brackets-curly skills__icon"></i>
<div>
<h1 class="skills__title">Frontend development</h1>
<span class="skills__subtitle">More than a year</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">CSS</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__css"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">HTML</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__html"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">JavaScript</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__js"></span>
</div>
</div>
</div>
</div>
<!--==================== SKILLS 2 ====================-->
<div class="skills__content skills__close">
<div class="skills__header">
<i class="uil uil-database skills__icon"></i>
<div>
<h1 class="skills__title">Backend development</h1>
<span class="skills__subtitle">Around 3 months</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">PHP</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__php"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">NODE JS</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__node"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">SQL</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__sql"></span>
</div>
</div>
</div>
</div>
<!--==================== SKILLS 3 ====================-->
<div class="skills__content skills__close">
<div class="skills__header">
<i class="uil uil-code-branch skills__icon"></i>
<div>
<h1 class="skills__title">Miscellaneous Skills</h1>
<span class="skills__subtitle">Time varies by skill</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">GIT</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__git"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">Bash</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__bash"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">C#</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__c-sharp"></span>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>

how to float divs when using search filter bootstrap

I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>

When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.

How to display divs lined up under parent for tree link display

progress:
https://jsfiddle.net/zigzag/wkf0ufat/6/
How do I make sure that respective teams three teams in each vertical column line up right under the parent div of NBA, NFL and NHL. I called quits on css gymnastics here where we need to think of horizontal layout for first and second row but vertical layout in the third row. Third row is a list of teams. I started with Grid layout but realised that using IE 11 I couldn't try it.
$('.menu-toggle').click(function() {
$(this).find('span').toggleClass('glyphicon-triangle-bottom').toggleClass('glyphicon-triangle-right');
var clickValue = $(this).attr('id');
//do switch statement based on clickValue. Right now it selects the id of first just fine.
//first: toggle second and hide third
//second: show
$('#secondRow').toggle();
});
.container-fluid {
margin: 5px;
}
.box {
height: 200px;
width: 200px;
border: 2px solid black;
margin: auto;
background: dodgerblue;
color: white;
padding: 20px;
}
#firstRow,
#secondRow {
text-align: center;
}
#secondRow>div {
display: inline-block;
}
span {
color: white;
padding-top: 60px;
}
span:hover {
opacity: 0.2;
}
.thirdRow {
text-align: left;
}
.thirdRow div {
dispaly: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row" id="firstRow">
<div class="center-block box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Leagues</p>
<a class="menu-toggle" href="#" id="first">
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="secondRow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>NBA</p>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>NFL</p>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>NHL</p>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row thirdRow" id="NBArow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Warriors</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Rockets</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Celtics</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row thirdRow" id="NFLrow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Penguins</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Kings</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Ducks</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row thirdRow" id="NHLrow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Penguins</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Kings</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Ducks</p>
</div>
</div>
</div>

Your question mentions a tree view, which is really a collection of nested lists. The block view you describe requires making some levels of nested list layout horizontally and some levels vertically, but the content is really just a list of lists (or a list of a list of lists...)
Here's a snippet that uses lists for markup. One with default styles and one with some styles to achieve the columns you want. This method will accurately display more or fewer lists than the example.
$('a').on('click', function(e) {
e.preventDefault();
$(this).next('ul').slideToggle()
});
.blocks {
font-size: 0;
}
.blocks a,
.blocks span {
display: block;
background: #ddd;
width: 100px;
height: 40px;
font-size: 12px;
line-height: 40px;
text-align: center;
margin: 0 auto;
}
.blocks ul {
list-style: none;
padding: 0;
}
.blocks li {
display: inline-block;
vertical-align: top;
}
.blocks ul ul ul li {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Tree</h3>
<div class="tree">
<ul>
<li>
Leagues
<ul>
<li>
NFL
<ul>
<li><span>Bears</span></li>
<li><span>Lions</span></li>
<li><span>Browns</span></li>
</ul>
</li>
<li>
NBA
<ul>
<li><span>Clippers</span></li>
<li><span>Hornets</span></li>
<li><span>Nets</span></li>
</ul>
</li>
<li>
NHL
<ul>
<li><span>Sabres</span></li>
<li><span>Blackhawks</span></li>
<li><span>Bruins</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h3>Blocks</h3>
<div class="blocks">
<ul>
<li>
Leagues
<ul>
<li>
NFL
<ul>
<li><span>Bears</span></li>
<li><span>Lions</span></li>
<li><span>Browns</span></li>
</ul>
</li>
<li>
NBA
<ul>
<li><span>Clippers</span></li>
<li><span>Hornets</span></li>
<li><span>Nets</span></li>
</ul>
</li>
<li>
NHL
<ul>
<li><span>Sabres</span></li>
<li><span>Blackhawks</span></li>
<li><span>Bruins</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Set Div height Dynamically based on highest content in a div

I have multiple divs in a row. I want to set height dynamically to each div based on the highest content in div. Height should be equal to all divs.
Can you all please help me to solve this with javascript/jquery?
Below is the code:
<div class="table-cellprop">
<div class="bottom-pane">
<div class="content-info">
<p>some imp text </p>
<h3>title </h3>
<div class="text-left"> some text with info
<h4>title 2 </h4>
<ul>
<li class="bm-list"> li one </li>
<li class="cm-list"> two </li>
<li class="mm-list"> three </li>
</ul>
</div>
</div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextText </div>
</div>
</div>

You don't actually need javascript. You can use flexbox.
.flex-container {
display: flex;
flex-direction: row;
}
.table-cellprop {
flex: 1;
overflow: auto;
}
.table-cellprop:nth-child(1) {
background-color: #b9f6ca;
}
.table-cellprop:nth-child(2) {
background-color: #84ffff;
}
.table-cellprop:nth-child(3) {
background-color: #b388ff;
}
<div class="flex-container">
<div class="table-cellprop">
<div class="bottom-pane">
<div class="content-info">
<p>some imp text </p>
<h3>title </h3>
<div class="text-left"> some text with info
<h4>title 2 </h4>
<ul>
<li class="bm-list"> li one </li>
<li class="cm-list"> two </li>
<li class="mm-list"> three </li>
</ul>
</div>
</div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextText </div>
</div>
</div>
</div>

On some window width make 4 unlisted list (ul) in to one

I have page on my site with events. Because all 'li' are not in same dimension I put them in four 'ul' and floated them left.
.DogadjajiLista{
width:225px;
margin-right:15px;
position:relative;
text-align:left;
float:left;
}
.DogadjajiLista li{
position:relative;
list-style:none;
width:225px;
display:block;
padding:0;
margin-bottom:15px;
overflow:visible;
float:left;
-moz-box-shadow: 2px 3px 2px #cecece;
-webkit-box-shadow: 2px 3px 2px #cecece;
box-shadow: 2px 3px 2px #cecece;
}
For responsive design I put them in display inline-block.
#media screen and (max-width: 768px) {
.DogadjajiLista{
width:100%;
text-align:center;
}
.DogadjajiLista li{
display:inline-block;
padding:0;
margin:10px 5px;
float:none;
}
}
Put my problem is when I have 3 'li' on smaller screen got to align them 2 'li' in row, then one 'li' in row. And after that secon 'ul' with same behaviour, so it doesent look pretty nice. So i wonder if is there some way in javascript or jquery to make four 'ul' into the one on smaller devices. I hope I explained well my problem.
Here You can se in responsinator.
http://www.responsinator.com/?url=http%3A%2F%2Fwww.anaizadar.com%2Fhr%2Fdogadjanja
Here is html
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj01.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj1_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj1_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>24.10.-27.10.2013.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj05.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj5_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj5_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj09.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj9_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj9_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj02.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj2_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj2_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>12.06.-15.06.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj06.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj6_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj6_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>08.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj10.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj10_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj10_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>30.06-04.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj03.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj3_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj3_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>06.06.-08.06.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj07.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj7_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj7_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>10.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj11.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj11_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj11_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>10.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj04.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj4_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj4_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj08.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj8_naslov?></h2>
<!--<p style="margin:5px 0;"><?=$tekst_dogadjaj8_opis?></p> -->
</div>
<div class="DogadjajiListDownload">
<p>23.08.2014.-29.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>

Categories