Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Aug 2009
    Location
    Bainsville, Ontario
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to change height of navbar headings

    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!
    Last edited by tracyrosen; 08-04-2010 at 01:42 PM. Reason: Resolved

  • #2
    New Coder
    Join Date
    Aug 2009
    Location
    Bainsville, Ontario
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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:
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    tracyrosen (08-04-2010)

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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;
    }

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New Coder
    Join Date
    Aug 2009
    Location
    Bainsville, Ontario
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #7
    New Coder
    Join Date
    Aug 2009
    Location
    Bainsville, Ontario
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Code:
    #categories li a {white-space:pre;}
    will be the answer.

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

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    New Coder
    Join Date
    Aug 2009
    Location
    Bainsville, Ontario
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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;
    			}

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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 <span> method suggested by SB65 which is also perfectly workable.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    New Coder
    Join Date
    Aug 2009
    Location
    Bainsville, Ontario
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.
    Last edited by SB65; 08-04-2010 at 08:13 PM.

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by SB65 View Post
    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!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #15
    New Coder
    Join Date
    Aug 2009
    Location
    Bainsville, Ontario
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    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!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •