...

View Full Version : CSS Help for text wrapping on menu



kevb8ll
06-19-2012, 03:45 PM
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:



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

}

abduraooft
06-19-2012, 04:00 PM
Can we have a link to your page?

kevb8ll
06-19-2012, 04:10 PM
Durr, yeah of course - sorry.

Page (http://www.m-g-pen.com/wp/gel-pen-page/).

kevb8ll
06-19-2012, 04:11 PM
Just to add, when I am changing stuff I comment it out - I will clear it all up when I'm done!

EpicWebDesign
06-19-2012, 04:26 PM
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:



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.

kevb8ll
06-19-2012, 09:43 PM
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.

EpicWebDesign
06-19-2012, 10:34 PM
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":


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

kevb8ll
06-19-2012, 10:52 PM
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?

EpicWebDesign
06-20-2012, 12:28 AM
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

kevb8ll
06-20-2012, 12:37 AM
<?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">

kevb8ll
06-20-2012, 12:33 PM
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.

EpicWebDesign
06-20-2012, 03:15 PM
You're welcome. Glad you were able to get it fixed.

kevb8ll
06-20-2012, 03:21 PM
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. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum