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

Question

wonderland 0 Junior Poster

13 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]http://i52.photobucket.com/albums/g9/Rydra/Footer2.jpg[/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="http://example.com/uzturesana" title="Uzturēšana">Uzturēšana</a></li>
<li class="page_item page-item-27"><a href="http://example.com/majas-lapas" title="Mājas lapas">Mājas lapas</a>
<ul>

	<li class="page_item page-item-209"><a href="http://example.com/majas-lapas/bezmaksas-majas-lapa" title="Bezmaksas mājas lapa">Bezmaksas mājas lapa</a></li>
	<li class="page_item page-item-212"><a href="http://example.com/majas-lapas/individuala-majas-lapa" title="Individuāla mājas lapa">Individuāla mājas lapa</a></li>
</ul>
</li>
<li class="page_item page-item-28"><a href="http://example.com/portfolio" title="Portfolio">Portfolio</a></li>
<li class="page_item page-item-22"><a href="http://example.com/par-mums" title="Par mums">Par mums</a></li>
<li class="page_item page-item-17"><a href="http://example.com/kontakti" 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="http://example.com/uzturesana" title="Uzturēšana">Uzturēšana</a></li> <li class="page_item page-item-27"><a href="http://example.com/majas-lapas" title="Mājas lapas">Mājas lapas</a> <ul> <li class="page_item page-item-209"><a href="http://example.com/majas-lapas/bezmaksas-majas-lapa" title="Bezmaksas mājas lapa">Bezmaksas mājas lapa</a></li> <li class="page_item page-item-212"><a href="http://example.com/majas-lapas/individuala-majas-lapa" title="Individuāla mājas lapa">Individuāla mājas lapa</a></li> </ul> </li> <li class="page_item page-item-28"><a href="http://example.com/portfolio" title="Portfolio">Portfolio</a></li> <li class="page_item page-item-22"><a href="http://example.com/par-mums" title="Par mums">Par mums</a></li> <li class="page_item page-item-17"><a href="http://example.com/kontakti" 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

Edited 13 Years Ago by Ezzaral because: Edited urls.

2 Contributors
17 Replies
312 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by wonderland

All 17 Replies

etftw 0 Light Poster

13 Years Ago

Try putting this at the end of your CSS file:

.page_item
{
	clear: both;
}

etftw 0 Light Poster

13 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

13 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 13 Years Ago by etftw because: n/a

etftw 0 Light Poster

13 Years Ago

Is the footer going to be a fixed size?

etftw 0 Light Poster

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

13 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

13 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="http://example.com/uzturesana" title="Uzturēšana">Uzturēšana</a></li>
<li class="page_item page-item-27"><a href="http://example.com/majas-lapas" title="Mājas lapas">Mājas lapas</a>
<ul>
	<li class="page_item page-item-209 subpage"><a href="http://example.com/majas-lapas/bezmaksas-majas-lapa" title="Bezmaksas mājas lapa">Bezmaksas mājas lapa</a></li>
	<li class="page_item page-item-212 subpage"><a href="http://example.com/majas-lapas/individuala-majas-lapa" title="Individuāla mājas lapa">Individuāla mājas lapa</a></li>
</ul>
</li>
<li class="page_item page-item-28"><a href="http://example.com/portfolio" title="Portfolio">Portfolio</a></li>
<li class="page_item page-item-22"><a href="http://example.com/par-mums" title="Par mums">Par mums</a></li>
<li class="page_item page-item-17"><a href="http://example.com/kontakti" 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)

Recommended Answers Collapse Answers

All 17 Replies

Recommended Answers