I am having trouble still with displaying the content correctly whilst I have made some progress it is still not fixed. I am using a foreach loop to display content with the top four being out of sync to the rest. My image is too large so I will have to show what I mean in another way.
My Application
[ image 1 ]
[ Image 2 ] [ Image 3 ] [ Image 4] -------------- These 3 are a little off Sync.
[Image 5] [ Image 6 ] [ Image 7] [Image 8] -------------- These are fine.
Home.phtml
[php]<?php require('template/header.phtml') ?>
<?php if (isset($_SESSION['error'])) { echo '';
switch ($_SESSION['error']) {
case 'fileexists':
echo "Sorry, file already exists.";
break;
case 'fileisnotimage':
echo "Sorry, file is not an image.";
break;
case 'filetoolarge':
echo "Sorry file is over 10MB";
break;
case 'filetypes':
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
break;
case 'notuploaded':
echo "Sorry your file has not been uploaded";
break;
case 'errorinupload':
echo "There was an error uploading please try again";
break;
}
echo '';
echo '×';
echo '';
echo "
";
unset($_SESSION['error']);
}
?>
<?php
if (isset($_SESSION['message'])) {
echo '';
switch ($_SESSION['message']) {
case 'fileuploaded':
echo "Image Sucessfully Uploaded.";
break;
case 'comicadded':
echo "Entry has been sucessfully added";
break;
case 'comicremoved':
echo "Entry has been sucessfully removed";
break;
case 'updatecomplete':
echo"Details updated succesfully";
break;
}
echo '';
echo '×';
echo '';
echo "
";
unset($_SESSION['message']);
}
?>
Sort Comics By :
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Universe<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dark Horse Comics</a></li>
<li><a href="#">DC</a></li>
<li><a href="#">IDW</a></li>
<li><a href="#">Image</a></li>
<li><a href="#">Marvel</a></li>
<li><a href="#">Valiant</a></li>
</li>
</ul>
</div>
</div>
</br>
</div>
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Count for Comics -->
<?php
if(count($comics)){
?>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green">
<h3 class="panel-title">My Comics</h3>
</div>
<div class="panel-body">
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
<?php foreach($comics as $list): ?>
</br>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div>
<!-- End of Foreach Statement for Comics -->
<?php endforeach; ?>
<!-- Else show this message if user has no entries -->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div>
</div>
</div>
<!--/.row1-collapse -->
Furthermore the bootstrap dropdowns in the parabox div are not working now. Is it something I am doing as I have looked at bootstraps documentation however haven’t found anything to rectify this ?