How to change height of navbar headings

tracyrosen · 08-04-2010, 12:06 PM

Hello,
I am a French teacher and am working with a wordpress template in creating a site about teaching French. I have set up the navbar to show the pages on the site. Currently the site is in French only but I would like to make it bilingual. I have tried adding the English title to each page, in the hopes that it would show under the French title, however what ends up happening is it superimposes itself on top of the title below it instead of making space for it in its own spot.

How do I change the css so that if a page title is long it automatically adds a line below the page title?

Here is the css I am working with:

Code:

#categories {
	background: #e50780;
	overflow: auto;
	z-index: 3;
}
	#categories ul {
	  float: left;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
 
		#categories li {
		  float: left;
		  width: 320px;
		  margin: 0;
		  padding: 0;
		  height: 38px;
		  border-top: 1px solid #ff088f;
		  border-bottom: 1px solid #d20775;
		  list-style: none;
		}
			#categories li a {
			display: block;
			color: #e2e2e2;
			font-size: 22px;
			text-decoration: none;
			line-height: 38px;
			padding-left: 45px;
			background: url(images/category-heart.gif) no-repeat 20px center;
			}
			#categories li a:hover {
			color: #444;;
                        background: url(images/category-heart-hover.gif) no-repeat 20px center;
			}

And here is what it looks like right now:
http://tracyrosen.com/parents/

Thank you!

tracyrosen · 08-04-2010, 12:28 PM

I've managed to change the overflow issue (titles superimposing on the ones below) by adding height: auto; to the list attributes but I can't seem to control how the title breaks. If the page title is too short, it all stays on one line and if I try to extend things by adding spaces it doesn't want to do anything for me. Ideally I want the French title on top and the English underneath for all page titles so that it looks balanced.

Any ideas?

Rowsdower! · 08-04-2010, 01:30 PM

You would need to add a   element between the French and English statements. I'm not sure if WP will strip that back out when posting the content or not though.

Otherwise you need to add white-space:pre; to the CSS for those links:

Code:

#categories li a {white-space:pre;}

Since you have line breaks in your actual code that should work - but you will need to remove the extra spaces as they will all be represented now.

SB65 · 08-04-2010, 01:31 PM

How about:

Code:

<a href="http://tracyrosen.com/parents" title="Page d’accueil   Home page">Page d’accueil  <span> Home page</span></a>

plus:

Code:

#categories li a span {
display:block;
}

Rowsdower! · 08-04-2010, 01:36 PM

Hmmm. If tags work in those headings (if WP doesn't strip them) then this would work, too. I think the   is more semantically correct, though.

tracyrosen · 08-04-2010, 01:41 PM

Thanks for your helpful comments!

I've tried placing   between the French and English - it works

How wonderfully simple, I can't believe I didn't think of it before posting!

tracyrosen · 08-04-2010, 01:46 PM

Ok, replied too soon

It works for the navbar BUT now I notice that the actual page titles on the pages don't flow well at all with the   tag.

So... do you think there is anyway to arrange the code for the navbar without affecting the code for the page?

Perhaps the

Code:

#categories li a {white-space:pre;}

will be the answer.

I will try that later this afternoon and let you know.

abduraooft · 08-04-2010, 02:02 PM

Quote:

It works for the navbar BUT now I notice that the actual page titles on the pages don't flow well at all with the tag.

Did you mean you don't need line-breaks there? Then, you'd need to follow SB65 method.

Rowsdower! · 08-04-2010, 02:14 PM

SB65's method or the white-space:pre; method would work.

Or if you actually do want them to be separated on the inner page headings as well you could update your CSS there the same way you updated your menu links (get rid of the specified height for .post h2 and let them flow down). For that you would also need to update your background images to accommodate the extra height.

Specifically, you would need to use an image editor to extend this file:
http://tracyrosen.com/parents/wp-con...ht-corners.gif
And this file:
http://tracyrosen.com/parents/wp-con.../title-tab.gif

...to heights that would allow the 2-line titles.

Again, that's only if you wanted to separate the French from the English in the in-page headings also.

It all depends on what your goals are.

tracyrosen · 08-04-2010, 06:25 PM

Well, I tried the white-space: pre; and it doesn't seem to be doing anything differently.

Maybe the answer is that I have to make sure my page titles are all long enough to wrap to a 2nd line? That seems a bit... annoying.

I've placed the code where it was suggested, here is what it looks like now:

Code:

#categories {
	background: #e50780;
	overflow: auto;
 
	z-index: 3;
}
	#categories ul {
	  float: left;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
 
		#categories li {
		  float: left;
		  width: 320px;

		  margin: 0;
		  padding: 0;
		  height: auto;
		  border-top: 1px solid #ff088f;
		  border-bottom: 1px solid #d20775;
		  list-style: none;
		}
			#categories li a {
			
                        white-space:pre;
                        display: block;
			color: #e2e2e2;
			font-size: 22px;
			text-decoration: none;
			line-height: 38px;
			padding-left: 45px;
			background: url(images/category-heart.gif) no-repeat 20px center;
			}
			#categories li a:hover {
                        color: #444;
			background: url(images/category-heart-hover.gif) no-repeat 20px center;
			}

Rowsdower! · 08-04-2010, 06:37 PM

Yes, in your original page your source code had line breaks in it, meaning that rather than this:

Code:

<a title="Page d’accueil – Home page" href="http://tracyrosen.com/parents">Page d’accueil – Home page</a>

Your code looked like this:

Code:

<a title="Page d’accueil – Home page" href="http://tracyrosen.com/parents">Page d’accueil
 – Home page</a>

Notice that you had entered a line-break character in there (presumably you hit the "enter" key while typing in the admin section to name it) such that the English part was actually on the next line of source code. The white-space:pre; method would require you to do that again as it's method of display is to honor all "whitespace" which is spaces and line breaks.

So if you edit your names to use line breaks this will work.

Otherwise, you can go with the method suggested by SB65 which is also perfectly workable.

tracyrosen · 08-04-2010, 07:41 PM

But that would once again give me line breaks on the page itself.

To recap - I am trying to create a navbar that allows me to place a French page title with the English translation below it however for the actual page I do not want there to be a break between the French and English titles.

Basically I need the same text to act differently in 2 different areas of the webpage.

I'm thinking the only way around this is to create page titles that are long enough to force the English to the 2nd line in the navbar but not too long for the individual page.

SB65 · 08-04-2010, 08:01 PM

Either solution should be fine since in both cases the css is being applied only to the navbar and not to the content on the page - so on the page you give #categories li a applies to all links within your navbar only.

It doesn't affect the title of your page "Page d’accueil – Home page" since that isn't affected by the #categories li a css statement.

EDIT: So to clarify, if you can get a return character in your page title, or insert a into your page title, then the css can target the text in the navbar only to achieve the effect you want.

Rowsdower! · 08-04-2010, 09:35 PM

Quote:

Originally Posted by SB65

Either solution should be fine since in both cases the css is being applied only to the navbar and not to the content on the page - so on the page you give #categories li a applies to all links within your navbar only.

It doesn't affect the title of your page "Page d’accueil – Home page" since that isn't affected by the #categories li a css statement.

EDIT: So to clarify, if you can get a return character in your page title, or insert a into your page title, then the css can target the text in the navbar only to achieve the effect you want.

Yes, what he said!

tracyrosen · 08-05-2010, 11:24 AM

No matter what, when I put a return character in the title it displays it on the individual page. So the   won't work for this.

Code:

<span>

tags are working

I'm not exactly sure how... is it that white-spacere; tells the html to make a line break? Because I do not have to physically place a break into the title for it to work.

Now I just need to alter the page title font size for it to fit into the space for the title on the individual pages.

Thank you SO much for your help!