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.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Help for text wrapping on menu

    Hi

    I have a wordpress site. I have already changed a fair bit of the css to make it what I would like, however I do have a problem.

    The top menu isn't wrapping the page name so instead of getting "Ball & Roller Pens" I only get "Ball & Roller"

    I have increased the height of the menu bar from 25 to 50px but that hasn't worked.

    Is there anyone would could offer some advice please?

    The code for each page in the menu is:

    Code:
    #access a {
    
    	color: #555;
    	
    	
    	
    	/* background-color: #737373;*/
    	
    	background: url(images/navbg2.jpg);
    
    	/*display: block;
    
    	line-height: 38px;
    
    	text-decoration: none;*/
    	
    	
    
    	padding: 0 21px 0 16px;
    	
    	display: block;
    	
    	/*content: url(images/separator.jpg);*/
    	
    
    	border-right: 2px solid #ccc;
    	
    
    width: 86px;
    
    height: 50px; /*was 25*/
    
    line-height: 50px; /*was 25*/
    
    font-size: 12px;
    
    overflow-x: hidden;
    
    overflow-y: hidden;
    
    text-align: center;
    
    font-weight: bold;
    
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Durr, yeah of course - sorry.

    Page.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Just to add, when I am changing stuff I comment it out - I will clear it all up when I'm done!

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Just get rid of the "line-height" settings (which, for some reason you have 2 of BTW)

    Your text IS wrapping, you just can't see the 2nd line because it's either 38px or 50px down from the first line and you have "overflow: hidden;" used. Remove that (temporarily) to see what I mean.

    Another quick note: You may need to create a separate id for the buttons that need to word wrap, as it will be necessary to adjust the top padding (to move the text down so that it is in line with your other buttons) and then simply subtract that same amount for the height. For Example:

    Code:
    padding: 12px 21px 0 16px; 
    height: 38px;
    This will still give you the button height of 50px, but will vertically align the text where you need it.
    Last edited by EpicWebDesign; 06-19-2012 at 09:44 PM. Reason: used "class" instead of "id"

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Right. I have removed the multiple height lines, (paste error I presume), and I can now see the wrapping.

    As you say the 1 line buttons are smaller. Ideally I would want the buttons arround 30-35px.

    Which class do I put the extra code you gave me above please.

  • #7
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Just copy your existing CSS id for "access" and then create a completely new one (I'm calling it "access2"). Then use the new id for the buttons that require 2 lines of text. Using your original code, I've left it as-is for "access" and then marked the lines I changed in red in the new id "access2":
    Code:
    #access a {
    color: #555;
    /* background-color: #737373;*/
    background: url(images/navbg2.jpg);
    /*display: block;
    line-height: 38px;
    text-decoration: none;*/
    padding: 0 21px 0 16px;
    display: block;
    /*content: url(images/separator.jpg);*/
    border-right: 2px solid #ccc;
    width: 86px;
    height: 50px; /*was 25*/
    line-height: 50px; /*was 25*/
    font-size: 12px;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
    font-weight: bold;
    }
    
    #access2 a {
    color: #555;
    /* background-color: #737373;*/
    background: url(images/navbg2.jpg);
    /*display: block;
    /*line-height: 38px;
    text-decoration: none;*/
    padding: 12px 21px 0 16px;
    display: block;
    /*content: url(images/separator.jpg);*/
    border-right: 2px solid #ccc;
    width: 86px;
    height: 38px; 
    /*line-height: 50px; /*was 25*/
    font-size: 12px;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
    font-weight: bold;
    }
    You may need to play around with the padding, etc. to get the best match, but this should get you started.

    Just a quick FYI... in CSS if there is a mark before the name of the item you are calling, a hash (#) indicates it's an id and a dot (.) indicates it's a class.
    Last edited by EpicWebDesign; 06-19-2012 at 09:42 PM.

  • Users who have thanked EpicWebDesign for this post:

    kevb8ll (06-20-2012)

  • #8
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Do I need to reference #access2 in the header.php template file?

    At the moment it has:

    <div id="access" role="navigation">

    How does the php differentiate between the two ids?
    Last edited by kevb8ll; 06-19-2012 at 10:08 PM.

  • #9
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    If all buttons are within a single div, then they are usually called individually by <li> tags so you could assign the ids to those instead of the div. If you want to post the code of header.php it will be easier to assist you

  • #10
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Sliding_Door
     * @since Sliding Door 1.0
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php
    	/*
    	 * Print the <title> tag based on what is being viewed.
    	 */
    	global $page, $paged;
    
    	wp_title( '|', true, 'right' );
    
    	// Add the blog name.
    	bloginfo( 'name' );
    
    	// Add the blog description for the home/front page.
    	$site_description = get_bloginfo( 'description', 'display' );
    	if ( $site_description && ( is_home() || is_front_page() ) )
    		echo " | $site_description";
    
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'slidingdoor' ), max( $paged, $page ) );
    
    	?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
    	/* We add some JavaScript to pages with the comment form
    	 * to support sites with threaded comments (when in use).
    	 */
    	if ( is_singular() && get_option( 'thread_comments' ) )
    		wp_enqueue_script( 'comment-reply' );
    
    	/* Always have wp_head() just before the closing </head>
    	 * tag of your theme, or you will break many plugins, which
    	 * generally use this hook to add elements to <head> such
    	 * as styles, scripts, and meta tags.
    	 */
    	wp_head();
    ?>
    
    <?php $url = get_template_directory_uri()?>
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $url; ?>/imagemenu/imageMenu.css">
    <script type="text/javascript" src="<?php echo $url; ?>/imagemenu/mootools.js"></script>
    <script type="text/javascript" src="<?php echo $url; ?>/imagemenu/imageMenu.js"></script>
    
    </head>
    
    <body <?php body_class(); ?>>
    <div id="wrapper" class="hfeed">
    	<div id="header">
    		<div id="masthead">
    			<div id="branding" role="banner">
    							
    				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    				<<?php echo $heading_tag; ?> id="site-title">
    					<span>
    						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    					</span>
    				</<?php echo $heading_tag; ?>>
    				<div id="site-description"><?php bloginfo( 'description' ); ?></div>
    
    
    				<div id="imageMenu">
    		
    				<!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->
    				<!-- change the href to look like this: <a href="yourlink.com">     -->
    				<?php 
    				$walker = new My_Walker;
    				wp_nav_menu( array( 
    				'theme_location' => 'custom-sliding-menu',
    				'fallback_cb' => 'no_sliding_menu',
    				'container' => '',
    				'container_class' =>'',
    				'container_id' =>'', 
    				'menu_class' =>'',
    				'menu_id' =>'',
    				'depth' => '1',  
    				'walker' => $walker
    				) 
    				); ?>
    				
    			</div>
    				
    <script type="text/javascript">
    			
    			window.addEvent('domready', function(){
    var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:320, border:2, open:<?= $post->menu_order ?>, onOpen:function(e,i){location=(e);}});
    			});
    		</script>	
    
    				
    			</div><!-- #branding -->
    
    			<div id="access" role="navigation">
    			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'slidingdoor' ); ?>"><?php _e( 'Skip to content', 'slidingdoor' ); ?></a></div>
    				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
    				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary') ); ?>
    			</div><!-- #access -->
    		</div><!-- #masthead -->
    	</div><!-- #header -->
    
    	<div id="main">

  • #11
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've sorted it. I have tweaked the CSS to have the page links on one line for each one.

    Thanks for your help epic.

    I do have another problem but will create a new thread.

  • #12
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    You're welcome. Glad you were able to get it fixed.

  • #13
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by EpicWebDesign View Post
    You're welcome. Glad you were able to get it fixed.
    No problem. I wanted to avoid playing with the php template files really - so it made me go back to scratch with the css.

    This forum seems a great resource for help, I'm glad I've found it.


  •  

    Posting Permissions

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