...

View Full Version : 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:



#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 <br /> 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:

#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:


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

plus:


#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 <br /> is more semantically correct, though.

tracyrosen
08-04-2010, 01:41 PM
Thanks for your helpful comments!

I've tried placing <br /> 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 <br /> tag.

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

Perhaps the

#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
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 <br /> 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-content/themes/heartland-fr/images/title-right-corners.gif
And this file:
http://tracyrosen.com/parents/wp-content/themes/heartland-fr/images/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:

#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:

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

Your code looked like this:

<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 <span> 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 <span> 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
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 <span> 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! :thumbsup:

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 <br /> won't work for this.


<span> tags are working :) I'm not exactly sure how... is it that white-space:pre; 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!

Rowsdower!
08-05-2010, 01:19 PM
No matter what, when I put a return character in the title it displays it on the individual page. So the <br /> won't work for this.


<span> tags are working :) I'm not exactly sure how... is it that white-space:pre; 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!

I think we had a misunderstanding about the return character, perhaps? The <br /> code is an HTML element (HTML code for an HTML line break) and that will always be reflected unless you use CSS to give it display:none; - which is yet another option for how you could have solved the issue with the in-page headings spanning two lines:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Invisible &lt;br /&gt; Test</title>
<style type="text/css">
p.no_breaks br {display:none;}
</style>
</head>
<body>
<p>There is a line break right here [<br />] and this should show up in the displayed content...</p>
<p class="no_breaks">There is a line break right here [<br />], too but if CSS is working this will NOT show up in the displayed content...</p>
</body>
</html>

But I digress. The return character you needed for the whitespace method was actually something like \n, which is invisible to you as you edit the page. It is more of a "system" return character rather than an HTML line break. This return character is inserted into an application when the "enter" key is struck - so you wouldn't actually see any code for that, you would just see your text starting on a new line. You just needed to type in the text on two lines when editing in the admin control panel so that it was split in the same way you wanted it to appear in the finished menu. The white-space:pre; style more or less tells the browser to treat \n as <br /> and to treat ' ' (a blank space) as &nbsp; so that the formatting of the source code for that section is preserved for display in the finished page.

The <span> method does not use white-space:pre; to work. Instead, it tells the browser that this span of text, which is normally treated as an "inline" element (meaning that it works itself into the flow of the current element like rolling along a conveyor belt), will instead be treated as a block-level element (meaning that it basically creates its own conveyor belt, if we are holding to the analogy). That's what you were doing when you assigned this CSS:

#categories li a span {
display:block;
}
You "promoted" it, if you will, to a more distinguished role where it cuts off from the existing stream of content, starts its own new stream, and then cuts itself off again to the let original stream resume.

Anyway, this is all academic now but if you plan to keep playing with web design it will be good to know in the future.

Glad you got the page working as desired!

tracyrosen
08-05-2010, 02:51 PM
Thanks for the explanation - it is good to know :)

One more thing. While <span></span>works, the code appears when the cursor hovers over the link - not so pretty. Is there a way to change what appears during hover? I'm thinking of something like the img title attribute but for text.

Rowsdower!
08-05-2010, 04:20 PM
Yes, you use the title attribute for this, too. Your theme actually already does this and uses basically the same text there as it puts in your link's text (which is why the <span> tag is visible):


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

You can edit your theme's PHP template to prevent the title from being assigned or to change how the text for the title is assembled, but this will be a PHP coding task. It isn't difficult at all, but it has its own learning curve.

Other than that, there is no way to change this without resorting to some sort of javascript hack.

SB65
08-06-2010, 08:48 AM
It looks as though Wordpress 3 strips out the tags for the link title anyway - worth upgrading and giving it a try I think.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum