Div positioning help for a plugin

[johnlatham]

Hello, I'm using a wordpress gallery plugin called NextGEN and I've done a bit of tweaking to get where I need it to be but need some help with the final adjustments. Here is the test page http://www.mrjohnlatham.com/places and here is what I need it to look like http://www.mrjohnlatham.com/images/newsite.png

The html for the plug in is...

<?php
/**
Template Page for the image browser

Follow variables are useable :

	$image : Contain all about the image
	$meta  : Contain the raw Meta data from the image
	$exif  : Contain the clean up Exif data
	$iptc  : Contain the clean up IPTC data
	$xmp   : Contain the clean up XMP data 

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($image)) : ?>

<div class="ngg-imagebrowser" id="<?php echo $image->anchor ?>">

	<div class="pic"><?php echo $image->href_link ?></div>

	<h3><?php echo $image->alttext ?></h3>

	<div class="ngg-imagebrowser-nav"> 

		<div class="next">
			<a class="ngg-browser-next" id="ngg-next-<?php echo $image->next_pid ?>" href="<?php echo $image->next_image_link ?>"><?php _e('Next', 'nggallery') ?></a>
		</div>

<div class="back">
			<a class="ngg-browser-prev" id="ngg-prev-<?php echo $image->previous_pid ?>" href="<?php echo $image->previous_image_link ?>"><?php _e('Previous', 'nggallery') ?></a>
		</div>

<div class="counter"><?php _e('', 'nggallery') ?> <?php echo $image->number ?> <?php _e(' / ', 'nggallery')?> <?php echo $image->total ?> </div>

		<div class="ngg-imagebrowser-desc"><p><?php echo $image->description ?></p></div>
	</div>	

</div>	

<?php endif; ?>

And the CSS is...

/* ----------- Image browser style -------------*/

.ngg-imagebrowser {

}

.ngg-imagebrowser h3 {
	text-align:center;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 17px;
float: left;

}

.ngg-imagebrowser img {
	border: 0px solid #A9A9A9;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	display:block !important;
	padding: 0px;
}

.ngg-imagebrowser-nav {
	padding: 0px;
	margin-left: 0px;
}

.ngg-imagebrowser-nav .back {
	float:right;
	border: 0px solid #DDDDDD;
	margin-right: 0px;
	padding: 0px 0px;
}

.ngg-imagebrowser-nav .next {
	float: right;
	border: 0px solid #DDDDDD;
	margin-right: 0px;
	padding: 0px 0px;
}

.ngg-imagebrowser-nav .counter {
	float: right;
	font-size: 12px !important;
}

.exif-data {
  	margin-left: auto !important;
    margin-right: auto !important;
}

As you can see the things that need to be changed are...

- I need a '/' between the Previous and Next words
- I need a '|' between the numbers and the navigation
- I need the numbers to raise in 01 format if possible
- I need to somehow put the bottom nav in its own box with the footer line above (I might have to hide the original footer on non gallery pages)

I will eventually be resizing the website and making the images smaller but lets see if I can alter this html and css to be how I need.

One more point is that I have floated the elements at the moment, you will see in my css, I'm not sure if this is the best way to do it as I have a random space above the nav and the divs are actually in reverse order in the php file.

Any help would be great. Thanks, John.

[meesa]

Everything you just meantioned is in the HTML of the plugin, or JS.

[johnlatham]

Thanks, yeah but I need some help with the changes. What additional code is needed? I have tried inserting the '\' but can't get it to the middle of the 2 functions.

[meesa]

I'm not familiar with plugins, I just write my own code, so I have no clue what I'd need, and if I'd even be able to figure it out.