Need help with wordpress footer configuration (Site map is displayed wrong)

Question

wonderland 0 Junior Poster

16 Years Ago

Hi,

I'm having problems with word press footers site map.

at the moment it's displayed like this:
[IMG]http://i52.photobucket.com/albums/g9/Rydra/Footer-1.jpg[/IMG]

I would like it displayed like this:
[IMG][/IMG]

I've tried looking in footer.php, but there is only this piece of code:

<ul id="bottomLinks">
				
				<?php wp_list_pages('title_li=') ?>
			</ul>

<ul id="bottomLinks"> <?php wp_list_pages('title_li=') ?> </ul>

I've tried looking in .css file also didn't see anything that I could configure to change layout.

Also, When I view page source from internet browser I get this piece of code:

<div id="footer">
		&copy; 2010 BCG. Visas tiesības aizsargātas.
		<ul id="bottomLinks">

				<li class="page_item page-item-442 current_page_item"><a href="http://example.com" title="Sākums">Sākums</a></li>
<li class="page_item page-item-26"><a href="" title="Uzturēšana">Uzturēšana</a></li>
<li class="page_item page-item-27"><a href="" title="Mājas lapas">Mājas lapas</a>
<ul>

	<li class="page_item page-item-209"><a href="" title="Bezmaksas mājas lapa">Bezmaksas mājas lapa</a></li>
	<li class="page_item page-item-212"><a href="" title="Individuāla mājas lapa">Individuāla mājas lapa</a></li>
</ul>
</li>
<li class="page_item page-item-28"><a href="" title="Portfolio">Portfolio</a></li>
<li class="page_item page-item-22"><a href="" title="Par mums">Par mums</a></li>
<li class="page_item page-item-17"><a href="" title="Kontakti">Kontakti</a></li>

<div id="footer"> &copy; 2010 BCG. Visas tiesības aizsargātas. <ul id="bottomLinks"> <li class="page_item page-item-442 current_page_item"><a href="http://example.com" title="Sākums">Sākums</a></li> <li class="page_item page-item-26"><a href="" title="Uzturēšana">Uzturēšana</a></li> <li class="page_item page-item-27"><a href="" title="Mājas lapas">Mājas lapas</a> <ul> <li class="page_item page-item-209"><a href="" title="Bezmaksas mājas lapa">Bezmaksas mājas lapa</a></li> <li class="page_item page-item-212"><a href="" title="Individuāla mājas lapa">Individuāla mājas lapa</a></li> </ul> </li> <li class="page_item page-item-28"><a href="" title="Portfolio">Portfolio</a></li> <li class="page_item page-item-22"><a href="" title="Par mums">Par mums</a></li> <li class="page_item page-item-17"><a href="" title="Kontakti">Kontakti</a></li>

But when I open footer.php, to edit I see this:

<div id="footer">
		&copy; 2010 BCG. Visas tiesības aizsargātas.
		<ul id="bottomLinks">

				<?php wp_list_pages('title_li=') ?>
			</ul>
	</div>

I don't know what to edit in order to sort this display problem.

php:wordpress

Edited 16 Years Ago by Ezzaral because: Edited urls.

2 Contributors
17 Replies
332 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by wonderland

Dani AI

Generated 8 Months Ago

The visual problem comes from floated/inline rules being applied to every generated <li>, including child items that wp_list_pages outputs. That makes subpages line up beside top-level links instead of stacking. A global rule like .page_item { ... } will also break other lists (which is what happened to the header). was right to focus on clears, but the stable fix is to scope the footer rules so only top-level footer items float and child lists are reset to normal block flow.

A practical CSS approach (place after the theme CSS or in a child stylesheet):

/* only top-level footer items flow horizontally */
#bottomLinks {
  text-align: right;
}
#bottomLinks > li {
  display: inline-block;
  vertical-align: top;
  margin-left: 12px;
  list-style: none;
}

/* make nested lists stack vertically under their parent */
#bottomLinks > li > ul {
  display: block;
  margin: 6px 0 0 0;
  padding-left: 0;
}
#bottomLinks > li > ul > li {
  display: block;
  float: none;
  margin: 0;
  padding: 2px 0;
}

If child pages should be omitted from the sitemap entirely, let WordPress limit the depth when generating the list:

<?php wp_list_pages( array('title_li' => '', 'depth' => 1) ); ?>

Notes and troubleshooting: confirm the generated HTML is valid (each embedded <ul> must be inside its parent <li>) — invalid markup will confuse CSS. Use the browser inspector to check which rules are applied and whether another stylesheet is overriding the footer rules. If absolute positioning on #bottomLinks is needed, keep it but still scope list rules with the child selector (">") so the header/nav classes are not affected. If automatic output control is required beyond CSS, consider wp_nav_menu or a small custom walker to change the markup. Credit to for the iterative float/clear troubleshooting and to for the example markup — scoping the selectors is the key to avoid breaking other lists.

All 17 Replies

etftw 0 Light Poster

16 Years Ago

Try putting this at the end of your CSS file:

.page_item
{
	clear: both;
}

etftw 0 Light Poster

16 Years Ago

I'm taking a bit of a stab in the dark here, but try changing your footer code to this:

<div id="footer">
		&copy; 2010 BCG. Visas tiesības aizsargātas.
		<ul id="bottomLinks" style="clear: both;">

				<?php wp_list_pages('title_li=') ?>
			</ul>
	</div>

And then change the CSS I gave you to this:

#bottomLinks li
{
	clear: both;
}

Hope that works for you.

etftw 0 Light Poster

16 Years Ago

Try changing it to

#bottomLinks li
{
	clear: both;
	float: left;
}

Sorry I can't give you one quick answer, I tend to have a very iterative approach to CSS as you can see.

Edited 16 Years Ago by etftw because: n/a

etftw 0 Light Poster

16 Years Ago

Is the footer going to be a fixed size?

etftw 0 Light Poster

16 Years Ago

OK try this:

#bottomLinks ul
{
	float: left;
}

#bottomLinks li
{
	clear: left;
}

Note: I just edited this code, so try this new edit of it.

Edited 16 Years Ago by etftw because: Fixing code

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

wonderland 0 Junior Poster · Answer 1 · 2010-05-21T18:59:31+00:00

wonderland 0 Junior Poster

16 Years Ago

should I replace .page_item with something ?

wonderland 0 Junior Poster · Answer 2 · 2010-05-21T21:42:18+00:00

Tried adding this.

It doesn't really solve my problem, now footer is displayed like this:

[IMG]http://i52.photobucket.com/albums/g9/Rydra/BCG_Footer.gif[/IMG]

It's much better, but not what I aimed for .

I just noticed, that this fix totally messed up my navigation though.

[IMG]http://i52.photobucket.com/albums/g9/Rydra/BCG_header.gif[/IMG]

wonderland 0 Junior Poster · Answer 3 · 2010-05-24T13:22:04+00:00

After adding this, navigation doesn't get messed up , which is good :)

But footer is still displayed like this : http://i52.photobucket.com/albums/g9/Rydra/BCG_Footer.gif

wonderland 0 Junior Poster · Answer 4 · 2010-05-24T16:20:51+00:00

Float: left was already present

#bottomLinks li{
        display:inline;
        float: left;
        padding-left: 7px;
        padding-right: 8px;
}

All other #bottomlinks related css:

#bottomLinks {
	position:absolute;
	top:12px;
	right:0;}

#topLinks li a, #bottomLinks li a{ 
        background: url(images/bullet_bottom.jpg) no-repeat 0px 50%;
        color: #868686;
        font-size: 11px;
        padding-left: 5px;
        text-decoration: none;
        text-transform: capitalize;

}

wonderland 0 Junior Poster · Answer 5 · 2010-05-24T16:29:25+00:00

Yes, as a matter of fact, it's already fixed:

#footer {

	border-top:2px solid #333;
	padding:12px 0 35px 0;
	width:960px;
	margin:1px auto;
	color:#868686;
	position:relative;
	font-size:11px;
}

etftw 0 Light Poster · Answer 6 · 2010-05-24T16:31:42+00:00

I've just edited the code in my previous post, check it out and see if it works.

wonderland 0 Junior Poster · Answer 7 · 2010-05-24T18:13:36+00:00

wonderland 0 Junior Poster

16 Years Ago

This didn't work either :(

etftw 0 Light Poster · Answer 8 · 2010-05-24T18:41:32+00:00

Would it be possible for you to do these links manually or do you need WordPress to generate them? If you can just do them yourself I can give you some code to format it properly.

etftw 0 Light Poster · Answer 9 · 2010-05-24T19:12:56+00:00

Check out this sample file I have made, this achieves the layout you want, but it requires you to set the embedded list's items to be of class "subpage" in order for them to appear in a vertical order.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
	#bottomLinks li
	{
		display: block;
		float: left;
		padding-right: 15px;
	}	
	
	.subpage
	{
		clear: both;
	}
</style>
</head>

<body>
<div id="footer">
		&copy; 2010 BCG. Visas tiesības aizsargātas.
		<ul id="bottomLinks">

				<li class="page_item page-item-442 current_page_item"><a href="http://example.com" title="Sākums">Sākums</a></li>
<li class="page_item page-item-26"><a href="" title="Uzturēšana">Uzturēšana</a></li>
<li class="page_item page-item-27"><a href="" title="Mājas lapas">Mājas lapas</a>
<ul>
	<li class="page_item page-item-209 subpage"><a href="" title="Bezmaksas mājas lapa">Bezmaksas mājas lapa</a></li>
	<li class="page_item page-item-212 subpage"><a href="" title="Individuāla mājas lapa">Individuāla mājas lapa</a></li>
</ul>
</li>
<li class="page_item page-item-28"><a href="" title="Portfolio">Portfolio</a></li>
<li class="page_item page-item-22"><a href="" title="Par mums">Par mums</a></li>
<li class="page_item page-item-17"><a href="" title="Kontakti">Kontakti</a></li>
</ul>
</div>
</body>
</html>

If you don't mind managing the page links manually then this should do the trick for you.

wonderland 0 Junior Poster · Answer 10 · 2010-05-24T20:35:06+00:00

I've been using something like this, but I wanted that php function to stay, because It automatically made changes to footer. But If it's not possible I guess I will just have to live with manual editing .

etftw 0 Light Poster · Answer 11 · 2010-05-24T20:37:36+00:00

It may be possible, I just can't think of a way around it though. Sorry I can't be of more assistance :(

wonderland 0 Junior Poster · Answer 12 · 2010-05-24T20:42:53+00:00

I should be thankful, that you're trying to help me with this ! ;)

I lack knowledge a bit in order to make this work, but I think I can live with manual editing. :)

Need help with wordpress footer configuration (Site map is displayed wrong)

Dani AI

Recommended Answers Collapse Answers

All 17 Replies

Recommended Answers