WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Div positioning help for a plugin

Reply
  Thread Tools Display Modes
Old 5th September 12, 02:37 PM   #1
johnlatham
WLC Member
 
Join Date: Sep 2012
Posts: 2
Default Div positioning help for a plugin

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...

Code:
<?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...

Code:
/* ----------- 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.
johnlatham is offline   Reply With Quote
Old 5th September 12, 10:15 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: Div positioning help for a plugin

Everything you just meantioned is in the HTML of the plugin, or JS.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 5th September 12, 11:55 PM   #3
johnlatham
WLC Member
 
Join Date: Sep 2012
Posts: 2
Default Re: Div positioning help for a plugin

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.
johnlatham is offline   Reply With Quote
Old 6th September 12, 04:50 AM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: Div positioning help for a plugin

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.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:54 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.