Jump to content

Spans not working as they should

mcfmullen

By mcfmullen
in CSS Help

 Share

Recommended Posts

mcfmullen Member

mcfmullen

Posted
Posted

I'm trying to reverse engineering a wordpress plugin to work in plain php and so far so good. My problem is the CSS is not working the same way it does inside wordpress.

 

My PHP code:

<div class='wp-pagenavi'>
<?php
$out = '';
			$out = "<span class='pages'> Page " .$pagenum. " of " .$last. "</span>";
			echo $out;

		if ( $start_page >= 2 && $pages_to_show < $last ) {
			$out = "<a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=1' class='first'>".$first_text."</a>";
			echo $out;

			if ( !empty( $dotleft_text ) ){
				$out = "<span class='extend'>$dotleft_text</span>";
				echo $out;
			}
		}

		$larger_pages_array = array();
		if ( $larger_page_multiple )
			for ( $i = $larger_page_multiple; $i <= $last; $i+= $larger_page_multiple )
				$larger_pages_array[] = $i;

		$larger_page_start = 0;
		foreach ( $larger_pages_array as $larger_page ) {
			if ( $larger_page < $start_page && $larger_page_start < $larger_page_to_show ) {
				$out = "<a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$larger_page' class='smaller page'>".$larger_page."</a>";
				echo $out;
				$larger_page_start++;
			}
		}

		if ( $pagenum <= 1 ){
		} else {
			$out = "<a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$prev' class='previouspostslink'>".$prev_text."</a>";
			echo $out;
			}

		foreach ( range( $start_page, $end_page ) as $i ) {
			if ( $i == $pagenum && !empty( $pagenum ) ) {
				$out = "<span class='current'><a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$pagenum'>".$pagenum."</a></span>";
				echo $out;
			} else {
				$out ="<span class='pages'><a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$i'>".$i."</a></span>";
				echo $out;
			}
		}

		if ( $pagenum >= 1 ){
		} else {
			$out = "<a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$next' class='nextpostslink'>".$next_text."</a>";
			echo $out;
		}

		$larger_page_end = 0;
		foreach ( $larger_pages_array as $larger_page ) {
			if ( $larger_page > $end_page && $larger_page_end < $larger_page_to_show ) {
				$out =  "<a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$larger_page' class='larger page'>".$larger_page."</a>";
				echo $out;
				$larger_page_end++;
			}
		}

		if ( $end_page < $last ) {
			if ( !empty( $dotright_text ) )
				$out = "<span class='extend'>".$dotright_text."</span>";
				echo $out;

			$out = "<a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$last' class='total_pages'>".$last_text."</a>";
		}
		echo $out;

?>
</div>

 

The problem specifically occurs here:

 


		foreach ( range( $start_page, $end_page ) as $i ) {
			if ( $i == $pagenum && !empty( $pagenum ) ) {
				$out = "<span class='current'><a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$pagenum'>".$pagenum."</a></span>";
				echo $out;
			} else {
				$out ="<span class='pages'><a href='{$_SERVER['PHP_SELF']}?itemspec=$itemspec&pagenum=$i'>".$i."</a></span>";
				echo $out;
			}
		}

 

My CSS:

 

.wp-pagenavi {
clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}

.wp-pagenavi span.current {
font-weight: bold;
}

.wp-pagenavi  { margin: 0 0 30px; font-size: 12px; }
.wp-pagenavi a, .wp-pagenavi span  { margin: 2px !important; display: inline-block; }
.wp-pagenavi span.pages  { border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 5px 8px; }

.wp-pagenavi a  { background: url(../../images/feed-title-white.jpg) top repeat-x #EFEFEF; color: #000; text-decoration: none; padding: 5px 8px; margin: 0; border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: inline-block; }

.wp-pagenavi a:hover  { background: #313428; color: #FFF; }

.wp-pagenavi span.current  { background: #313428; color: #FFF; text-decoration: none; padding: 5px 8px; margin: 0; border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

 

The CSS file is repetitive because this is how it is spread amongst many CSS files in wordpress.

 

So now for my problem:

 

See WantedOutput.png in attachments.

 

Everything formats correctly except at the 9 10 11 part.

 

This because the spans 'pages' and 'current' are being used here. Span 'pages' affect 9 and 11 while span 'current'a affects the current page: 10.

 

What happens is that these spans somehow are creating a box around the div:

 

See ProblemOutput.png in attachments.

 

Furthermore, the 10 is supposed to be always highlighted color #313428 but instead, the unwanted box around the 20 is colored this way, leaving the original div unaffected, changing only when hovering over it.

 

Anyone have any clue as to how to fix this?

 

[attachment deleted by admin]

Link to comment
Share on other sites
mcfmullen Member

mcfmullen

Posted
  • Author
Posted

Here is the html output of the pagination portion of the script:

 

<div class='wp-pagenavi'>
<span class='pages'> Page 20 of 32</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=1' class='first'>« First</a>
<span class='extend'>...</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=5' class='smaller page'>5</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=10' class='smaller page'>10</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=19' class='previouspostslink'>«</a>
<span class='pages'><a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=19'>19</a></span>
<span class='current'><a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=20'>20</a></span>
<span class='pages'><a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=21'>21</a></span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=21' class='nextpostslink'>»</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=25' class='larger page'>25</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=30' class='larger page'>30</a>
<span class='extend'>...</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=32' class='total_pages'>Last »</a>
</div>

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

I'm thinking your problem is here:

<span class='pages'><a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=19'>19</a></span>
<span class='current'><a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=20'>20</a></span>
<span class='pages'><a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=21'>21</a></span>

You have used this CSS:

.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}

You are putting padding in the spans, but since your span is wrapping the anchor tag, it is causing your issue. You will need to play with that a little. Maybe try putting your span inside the anchor tag instead of wrapping around it.

Link to comment
Share on other sites
mcfmullen Member

mcfmullen

Posted
  • Author
Posted

I put the span inside the anchor tag. The current page now stays the solid color as wanted.

 

A new problem has presented itself though:

The extended border (exterior box) still shows on the middle section fo page numbers. This is not wanted. All boxes should look the same, with the exception of the current page number.

 

See attachment to see what I mean.

 

New code:

<div class='wp-pagenavi'>
<span class='pages'> Page 15 of 32</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=1' class='first'>« First</a>
<span class='extend'>...</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=5' class='smaller page'>5</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=10' class='smaller page'>10</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=14' class='previouspostslink'>«</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=14'><span class='page'>14</span></a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=15'><span class='current'>15</span></a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=16'><span class='page'>16</span></a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=16' class='nextpostslink'>»</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=20' class='larger page'>20</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=25' class='larger page'>25</a>
<span class='extend'>...</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=32' class='total_pages'>Last »</a>
</div>

 

[attachment deleted by admin]

Link to comment
Share on other sites
mcfmullen Member

mcfmullen

Posted
  • Author
Posted

That affects the interior box. I need to get rid of the exterior box.

 

That means that the exterior box is actually the div and not the span (makes sense). I don't understand why the div is applying outside the span rather than inclusive of the span.

 

What irks me about it is that the part "Page 15 of 32" does have a span as well (the same as the 14 and 16) and the div isn't behaving the same way around that.

 

Any ideas as to why?

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Honestly, it was more effort than it was worth to try to debug the problem, so I just built you a wireframe to work from.

 

HTML:

<div class='wp-pagenavi'>
<span class='pages'> Page 15 of 32</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=1' class='first'>« First</a>
<span class='extend'>...</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=5' class='smaller page'>5</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=10' class='smaller page'>10</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=14' class='previouspostslink'>«</a>
<a class="neighboring_page" href='/wp-content/themes/test.php?itemspec=Animals&pagenum=14'>14</a>
<a id="current_page" href='/wp-content/themes/test.php?itemspec=Animals&pagenum=15'>15</a>
<a class="neighboring_page" href='/wp-content/themes/test.php?itemspec=Animals&pagenum=16'>16</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=16' class='nextpostslink'>»</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=20' class='larger page'>20</a>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=25' class='larger page'>25</a>
<span class='extend'>...</span>
<a href='/wp-content/themes/test.php?itemspec=Animals&pagenum=32' class='total_pages'>Last »</a>
</div>

CSS:

.wp-pagenavi a, .wp-pagenavi .pages, .wp-pagenavi .extend
{
border:solid #333 1px;
}

.wp-pagenavi a, .wp-pagenavi .pages
{
padding:3px 4px;	
}

.wp-pagenavi .extend
{
padding:2px 3px;	
}

.wp-pagenavi #current_page
{
background-color:#000;
color:#FFF;
}

 

You'll have to add in the nice rounded corners and background images, and style the link colors, but this should be enough to kick you off in the right direction.

Link to comment
Share on other sites
mcfmullen Member

mcfmullen

Posted
  • Author
Posted

Thank you so much Haku.

 

I spent the entire day re-writing the code and wound up with the proper layout, but the hovering stopped working or worse, wound uo with the reverse problem.

 

I am going to use this code and work forward from there and share my results with you soon!

Link to comment
Share on other sites
mcfmullen Member

mcfmullen

Posted
  • Author
Posted

Hoorah the mystery is solved!

 

.wp-pagenavi {
margin: 0 0 30px; 
font-size: 12px; 
clear: both;
}

.wp-pagenavi a, .wp-pagenavi .pages, .wp-pagenavi .extend{	
color: #000; 
text-decoration: none; 
margin: 2px;  
border: 1px solid #CCC; 
border-radius: 3px; 
border: 1px solid #CCC; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px;
}

.wp-pagenavi a{
background: url(../arras/images/feed-title-white.jpg) top repeat-x #EFEFEF;
}

.wp-pagenavi a, .wp-pagenavi .pages{	
padding:3px 4px;	
}

.wp-pagenavi a:hover {
background: #313428;
padding: 3px 4px; 
color: #FFF; 
border-color: #000;
}

.wp-pagenavi .extend{	
padding:2px 3px;	
}

.wp-pagenavi #current_page{	
background-color:#000;	
color:#FFF;
}

 

As it turns out, spans was the wrong way to go about it! Again, thank you so much!

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.