SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 48 of 48
  1. #26
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok Mark, so this is how my menu.html should look like?

    Code:
    <ul>
                                <li><a accesskey="d" href="http://www.yvib.com/alicia/?L=users.desktop">My Desktop</a></li>
                                <li><a href="http://www.yvib.com/alicia/?L=contacts.contacts">My Contacts</a></li>
                                <li> <a accesskey="s" href="http://www.yvib.com/alicia/?L=search.users">Search</a></li>
                                <li><a accesskey="b" href="http://www.yvib.com/alicia/?L=blogs.browse">Blogs</a></li>
                                <li><a href="?L=chat.chat">Chatrooms</a></li>
                                <li><a accesskey="f" href="http://www.yvib.com/alicia/?L=inkspot.index">Inkspot</a></li>
    </ul>
    what about this portion of the code $menu = preg_replace("|<li><a href=\"" . basename ?
    is that the href you were talking about?

    and I guess this is the CSS code I should be using:
    Code:
    /* Navigation menu */
    #navigation {
      padding-left: 30px;
    }
    #navigation ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    #navigation li{
        float:left;
        height:27px;
        padding-left:12px;
        background:url(images/tabs_reg_l.png) no-repeat left top;
    }
    #navigation a {
      font: 13px bold "Trebuchet MS", verdana, helvetica, arial, sans-serif;
      color: #515151;
      padding-right:14px;
      padding-left:2px;
            text-decoration: none;
      font-weight: bold;
            float:left;
         background:url(images/tabs_reg_r.png) no-repeat right top;
        height:20px;
        padding-top:7px;
    }
    #navigation li.current{    background:url(images/tabs_active_l.png) no-repeat left top;}
    #navigation li.current a{    background:url(images/tabs_active_r.png) no-repeat right top;}
    #navigation a:hover{color:#c00;}
    are we getting anywhere?

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    As mark said above but you will still need to keep the anchor in the current link because it holds one part of the tab.

    Actually it may be better to add a span instead of the anchor in the replaced string and then we could style the span in the same way that the original anchor was styled so that it holds the right side of the tab image.

    Code:
    <?php
    $menu = file_get_contents("menu.htm");
    $menu = preg_replace("|<li><a href=\"" . basename($_SERVER['PHP_SELF']) . "\">(.*)</[^>]+></li>|U", "<li class=\"current\"><span>$1</span></li>", $menu);
    echo $menu;
    ?>
    Then the css would something like this:

    Code:
    #navigation a,#navigation span {
      font: 13px bold "Trebuchet MS", verdana, helvetica, arial, sans-serif;
      color: #515151;
      padding-right:14px;
      padding-left:2px;
      text-decoration: none;
      font-weight: bold;
      float:left;
      background:url(images/tabs_reg_r.png) no-repeat right top;
      height:20px;
      padding-top:7px;
    }
    #navigation li.current{ 
        background:url(images/tabs_active_l.png) no-repeat left top;
    }
    #navigation li.current span{
     background:url(images/tabs_active_r.png) no-repeat right top;
        color:#fff;
    }
    #navigation a:hover{color:#c00;}

    Good luck

  3. #28
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think we replied in the same time

    is this the anchor you were referring to $menu = preg_replace("|<li><a href=\"" . basename?

    and now my site gets a weird php error on top

  4. #29
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    menu.htm
    Code:
    <ul>
    	<li><a href="http://www.yvib.com/alicia/?L=users.desktop">My Desktop</a></li>
    	<li><a href="http://www.yvib.com/alicia/?L=contacts.contacts">My Contacts</a></li>
    	<li><a href="http://www.yvib.com/alicia/?L=search.users">Search</a></li>
    	<li><a href="http://www.yvib.com/alicia/?L=blogs.browse">Blogs</a></li>
    	<li><a href="http://www.yvib.com/alicia/?L=chat.chat">Chatrooms</a></li>
    	<li><a href="http://www.yvib.com/alicia/?L=inkspot.index">Inkspot</a></li>
    </ul>
    The template
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>{siteName}</title>
    <script type="text/javascript" src="{themePath}/javascript.js"></script>
    <link href="{themePath}/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <body class="page1">
    <!-- header --><!-- /header -->
    <table width="855" border="0" align="center" cellpadding="0" cellspacing="0" class="fullheight">
      <tr>
        <td height="160" colspan="2" valign="top" background="{themePath}/images/frame/header.gif"><table width="100&#37;" height="135" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="122" align="left" valign="top"><img src="{themePath}/images/frame/logo.gif" alt="Logo" width="245" height="122" /></td>
              <td height="122" align="center" valign="bottom"><div id="laneContainer"></div></td>
            </tr>
            <tr>
             <td id="navigation"><!-- breadcrumbs -->
    <?php
    $menu = file_get_contents("menu.htm");
    $menu = preg_replace("|<li><a href=\"" . basename($_SERVER['PHP_SELF']) . "\">(.*)</[^>]+></li>|U", "<li class=\"current\"><span>$1</span></li>", $menu);
    echo $menu;
    ?>
        <!-- /breadcrumbs --></td>
              <td align="right" id="usercontrol">
    		    <ZONE userStatus guest>
    			  <a href="?L">Login</a> 
                  <img src="{themePath}/images/frame/menu_separator.gif" hspace="2" align="absmiddle" />
    			  <a href="?L=registration.register">Register</a>		    </ZONE userStatus guest>
    			<ZONE adminLink enabled>
    			  <a href="?L=admin.index">Admin</a>
    			  <img src="{themePath}/images/frame/menu_separator.gif" hspace="2" align="absmiddle" />
    			</ZONE adminLink enabled>
    			<ZONE adminLink disabled></ZONE adminLink disabled>
    			<ZONE userStatus user>
    			<a href="?logout=true">Logout</a>
    			<img src="{themePath}/images/frame/menu_separator.gif" hspace="2" align="absmiddle" />
    			</ZONE userStatus user>
              <a accesskey="h" href="javascript:popUp('?L=help.help&chromeless=1&origin={system.l}');">Help</a></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="2" valign="top" bgcolor="#FFFFFF">{jump}</td>
      </tr>
      <tr>
        <td colspan="2" height="5" style="background: #00AFF0"><img src="theme/default/images/frame/spacer.gif" alt="Spacer" height="5"></td>
      </tr>
      <tr>
        <td width="60%" height="160" valign="top" bgcolor="#ffffff">
    	<div style="padding:15px;">
    	
    	<div id="footer_elements">
    	  <ZONE footer_element empty>	
    	    <table width="450" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
    	  </ZONE footer_element empty>
    	  <ZONE footer_element random_users>	
    	    <table width="450" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td><h1><span class="footerColorSet1">Some</span> <span class="footerColorSet2">Random Members</span></h1></td>
                <td align="right" valign="middle" style="padding-right:8px;">
    		      <a href="javascript:ajFetch('?proc_footer_element=notepad', 'footer_elements', false, 0);"><img src="{themePath}/images/frame/notepad_icon.gif" alt="Notepad" title="Notepad!" width="21" height="22" /></a> 
    			  <a href="javascript:ajFetch('?proc_footer_element=random', 'footer_elements', false, 0);"><img src="{themePath}/images/frame/cycle_icon.gif" alt="Randomize!" title="Randomize!" width="27" height="24" /></a>			</td>
              </tr>
              <tr>
                <td colspan="2">
    	          <LOOP footerQuery>
                    <div style="float:left; padding-right:6px; clear:none;">
                      <a href="?L=users.profile&id={user.id}">
    
                        <img src="system/image.php?file={user.mainpicture}" alt="Picture" hspace="2" border="0" id="picture" />
    			      </a>
                      <br />
                      <a href="?L=users.profile&id={user.id}">{user.username}</a>
    		        </div>
                  </LOOP footerQuery>
                </td>
              </tr>
            </table>
    	  </ZONE footer_element random_users>
    	  <ZONE footer_element notepad>	
    	    <table width="450" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td><h1><span class="footerColorSet1">My</span> <span class="footerColorSet2">Notepad</span></h1></td>
                <td align="right" valign="middle" style="padding-right:8px;">
    		      <a href="javascript:ajFetch('?proc_footer_element=notepad', 'footer_elements', false, 0);"><img src="{themePath}/images/frame/notepad_icon.gif" alt="Notepad" title="Notepad!" width="21" height="22" /></a> 
    		      <a href="javascript:ajFetch('?proc_footer_element=random', 'footer_elements', false, 0);"><img src="{themePath}/images/frame/cycle_icon.gif" alt="Randomize!" title="Randomize!" width="27" height="24" /></a>			</td>
              </tr>
              <tr>
                <td colspan="2">
    	          <ZONE notepad guest>
    			    <span class="footerColorSet1">Sorry you have to be logged in in order to use the notepad</span>
    			  </ZONE notepad guest>
    			  
    			  <ZONE notepad enabled>
    			    <form method="post">
    				  <textarea name="notepad_body" id="notepad_body" rows="3" class="fullwidth" onkeydown="notepadStateChange();">{notepad_content}</textarea>
    			      <br />
    			      <input type="button" name="Submit" value="Save" class="submit_disabled" id="notepad_save_button" disabled="disabled" onclick="saveNotepad();" />
    			    </form>
    			  </ZONE notepad enabled>
                </td>
              </tr>
            </table>
    	  </ZONE footer_element notepad>
    	</div>
    
    
    	</div>
    	<!-- leftfooterblock --><!-- /leftfooterblock -->
    	</td>
        <td width="40%" valign="top" bgcolor="#FFFFFF"><div style="padding:15px;">
          <h1><span class="footerColorSet1">Important</span> <span class="footerColorSet2">References</span><br />
          </h1>
    	  <table width="100%" border="0" cellspacing="2" cellpadding="0">
            <tr>
              <td><a href="?L=invite.tellafriend&amp;origin={system.origin}" class="footerColorSet1">Tell a friend / Invite a friend </a></td>
            </tr>
            <tr>
              <td height="1" bgcolor="#003366"><img src="{themePath}/images/frame/spacer.gif" alt="Spacer" height="1" /></td>
            </tr>
            <tr>
              <td><a href="?L=info.contact" class="footerColorSet1">Contact us / Report Abuse </a></td>
            </tr>
            <tr>
              <td height="1" bgcolor="#003366"><img src="{themePath}/images/frame/spacer.gif" alt="Spacer" height="1" /></td>
            </tr>
            <tr>
              <td><a href="javascript:bookmark('{siteName}', '{siteURL}')" class="footerColorSet1">Bookmark us </a></td>
            </tr>
            <tr>
              <td height="1" bgcolor="#003366"><img src="{themePath}/images/frame/spacer.gif" alt="Spacer" height="1" /></td>
            </tr>
            <tr>
              <td><a href="?L=info.terms" class="footerColorSet1">Privacy policy &amp; terms of use </a></td>
            </tr>
          </table>
    	  <!-- references --><!-- /references -->
        </div>
    	<!-- rightfooterblock --><!-- /rightfooterblock -->
    	</td>
      </tr>
      <tr>
        <td height="2" colspan="2" bgcolor="#000000"><img src="{themePath}/images/frame/spacer.gif" alt="Spacer" height="2" /></td>
      </tr>
      <tr>
        <td height="65" colspan="2" bgcolor="#020B32"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="middle" id="copyright" style="padding-left:25px;"><a href="http://www.phpizabi.net" target="_blank" id="copyright">Powered by {systemVersion}</a><br />            
              &copy; 2005, 2006 - <a href="http://www.realitymedias.com" target="_blank" id="copyright">Real!ty Medias</a>, All rights reserved </td>
              <td align="right">
    		    <a href="http://www.phpizabi.net"><img src="{themePath}/images/frame/phpizabi.gif" hspace="25" /></a></td>
            </tr>
          </table></td>
      </tr>
    </table>
    <!-- footer -->
    <!-- /footer -->
    <script language="javascript" type="text/javascript">
      launchLANE();
      setTimeout('ajFetch(\'?L=&proc_footer_element=random\', \'footer_elements\', true, 300000);', 300000);
    </script>
    </body>
    </html>
    CSS
    Code:
    #navigation a,#navigation span {
      font: 13px bold "Trebuchet MS", verdana, helvetica, arial, sans-serif;
      color: #515151;
      padding-right:14px;
      padding-left:2px;
      text-decoration: none;
      font-weight: bold;
      float:left;
      background:url(images/tabs_reg_r.png) no-repeat right top;
      height:20px;
      padding-top:7px;
    }
    #navigation li.current{ 
        background:url(images/tabs_active_l.png) no-repeat left top;
    }
    #navigation li.current span{
     background:url(images/tabs_active_r.png) no-repeat right top;
        color:#fff;
    }
    #navigation a:hover{color:#c00;}

  5. #30
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's exactly what I got and I get errors on the page.

    Also in the CSS file, I think I need to address this section also

    #navigation li{
    float:left;
    height:27px;
    padding-left:12px;
    background:url(images/tabs_reg_l.png) no-repeat left top;

    for the left side of the regular tab image

    this is my CSS right now
    Code:
    /* Navigation menu */
    #navigation {
      padding-left: 30px;
    }
    #navigation ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    #navigation li{
        float:left;
        height:27px;
        padding-left:12px;
        background:url(images/tabs_reg_l.png) no-repeat left top;
    }
    #navigation a,#navigation span {
      font: 13px bold "Trebuchet MS", verdana, helvetica, arial, sans-serif;
      color: #515151;
      padding-right:14px;
      padding-left:2px;
      text-decoration: none;
      font-weight: bold;
      float:left;
      background:url(images/tabs_reg_r.png) no-repeat right top;
      height:20px;
      padding-top:7px;
    }
    #navigation li.current{ 
        background:url(images/tabs_active_l.png) no-repeat left top;
    }
    #navigation li.current span{
     background:url(images/tabs_active_r.png) no-repeat right top;
        color:#fff;
    }
    #navigation a:hover{color:#c00;}

  6. #31
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    PHP isn't getting executed... I give up..

    Start again with a semantic page and I could show you how to do it, but with this templating system your working with, it's too hard to make dynamic.

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It seems your templating system won't allow the embedded php to get actioned.

    I have put up an example of the menu in working order to show it does work although I had to remove the accesskeys as each item needs to be the same for the routine to work.

    http://www.pmob.co.uk/temp/phpmenumain.php

    Click on each link to see it in working order. The css is working fine and each menu is highlighted correctly.

    That's about the limit of my php so we may need to move this thread to the php forum if you want to continue with this approach

  8. #33
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it would be hard to do the whole script from the beginning, so unfortunately I can't do that. It's a full script that has a lot of core features.
    Somehow, this script is able to generate the class current on each page, but I'm not sure which file does that. The original site is at demo.phpizabi.net and if you look at the code on each page, you would see that there is a current class in each one of them, so I know that it gets generated somehow.


    Paul, Mark THANK YOU SO MUCH. You have been great and I was a pain the butt.

    I will try to find out from the developers why the php code doesn't get executed or I would ask in the php forum.

    My other option will be to do a javascript menu, like the ones at Nifty Corners/Cubes, but I'm not sure if that's such a good idea

  9. #34
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just wanted to show you one more thing guys:

    in the profile page for the users, there are some tabs defined already, something similar to what I wanna get done, and I also asked the developer and he said that the menu is not included and it should be no problem to accomplish what I want.

    here is the css code for those tabs inside the users profile:

    Code:
    /* TABS STYLESHEET */
    .tabberlive .tabbertabhide {
    	display:none;
    }
    
    .tabber {}
    
    .tabberlive {
    	margin-top:1em;
    }
    
    ul.tabbernav {
    	margin:0;
    	padding: 3px 0;
    	border-bottom: 1px solid #2f63b3;
    	font: bold 11px Verdana, sans-serif;
    }
    
    ul.tabbernav li {
    	list-style: none;
    	margin: 0;
    	display: inline;
    }
    
    ul.tabbernav li a {
    	padding: 3px 0.5em;
    	margin-left: 3px;
    	border: 1px solid #2f63b3;
    	border-bottom: none;
    	background: #AEC9F4;
    	text-decoration: none;
    }
    
    ul.tabbernav li a:link { 
    	color: #2f63b3; 
    }
    ul.tabbernav li a:visited {
    	color: #2f63b3;
    }
    
    ul.tabbernav li a:hover
    {
    	color: #FFFFFF;
    	background: #2f63b3;
    	border-color: #2f63b3;
    }
    
    ul.tabbernav li.tabberactive a {
    	background-color: #DCE6FF;
    	border-bottom: 1px solid #DCE6FF;
    }
    
    ul.tabbernav li.tabberactive a:hover {
    	color: #0D5D9C;
    	background: #DCE6FF;
    	border-bottom: 1px solid #DCE6FF;
    }
    
    .tabberlive .tabbertab {
    	padding:5px;
    	border-top:0;
    }
    
    .tabberlive .tabbertab h2 {
    	display:none;
    }
    
    .tabberlive .tabbertab h3 {
    	display:none;
    }
    so apparently it works, and now it's even more confusing.

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The css above is working because you have a complicated javascript routine that is changing the current tab.

    This is some of it:
    Code:
     /* Class to set the navigation LI when the tab is active, so you can  81     use a different style on the active tab.
      82  */
      83  this.classNavActive = "tabberactive";

  11. #36
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The css above is working because you have a complicated javascript routine that is changing the current tab.

    This is some of it:
    Code:
     /* Class to set the navigation LI when the tab is active, so you can  81     use a different style on the active tab.
      82  */
      83  this.classNavActive = "tabberactive";
    so that's how is done, I see. Are javascript menus bad? I'm thinking on using the ones from Nifty Cubes? I know the disadvantage if somebody has the js turned off, but what about loading times? Slower, faster?

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Are javascript menus bad?
    Not if they degrade gracefully and users can still navigate the whole site with js turned off. That's the challenge

    what about loading times? Slower, faster?
    Well the js will take a little time to load but it shouldn't be that noticeable. However you have a lot of javascript in your page already and you won't just be able to add some more as there are already elements running onload and you will have to hook into the onload event handler routines in your original javascript.(assuming the menus are using onload which I assume they will). (However javascript isn't my thing so take what I say with a pinch of salt.)

    You should really check with your template system first to see what it does and doesn't support so you don't get into a long drawn out discussion like we have done already

    As you are so close with the php menu it might be worth finding out why it's not being called or if it could be placed elsewhere unless of course you are going for a different design then you may as well start from scratch.

  13. #38
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Not if they degrade gracefully and users can still navigate the whole site with js turned off. That's the challenge



    Well the js will take a little time to load but it shouldn't be that noticeable. However you have a lot of javascript in your page already and you won't just be able to add some more as there are already elements running onload and you will have to hook into the onload event handler routines in your original javascript.(assuming the menus are using onload which I assume they will). (However javascript isn't my thing so take what I say with a pinch of salt.)

    You should really check with your template system first to see what it does and doesn't support so you don't get into a long drawn out discussion like we have done already

    As you are so close with the php menu it might be worth finding out why it's not being called or if it could be placed elsewhere unless of course you are going for a different design then you may as well start from scratch.
    about the php thing, I found out that I can add the add to an existing php file that handles all the function calls, and then in frame.tpl, I would have to add an IFRAME that points to that php file. That's another challege I'm assuming I will have to take the menu out of my frame.tpl, and inside that <td id="navigation"> i would have to insert the IFRAME

  14. #39
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I think that you will find that $PHP_SELF will will only get the location of that IFRAME and not the 'parent' of the IFRAME which is needed to write out the classes on the list items.
    So I don't think IFRAME will work

    But then... i've given up remember

  15. #40
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I think that you will find that $PHP_SELF will will only get the location of that IFRAME and not the 'parent' of the IFRAME which is needed to write out the classes on the list items.
    So I don't think IFRAME will work

    But then... i've given up remember
    don't give up Mark

    I posted this in the PHP forum but so far no answer

  16. #41
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok guys, do you think that I can make my menu work like this? If the other one didn't work, maybe this one is easier. here is an example: https://www.linkedin.com/secure/login

    if I have the images done, can you guys help me out with the CSS code?

    I have two images, one for the left part and the other for the right one, the same as in the sliding doors technique.
    Attached Images Attached Images
    Last edited by horatiub; Jan 5, 2007 at 08:54.

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You should be able to fit that menu in place more or less with the code I have already given you as it uses the same technique. Just change the image paths as required. You may need to tweak the side and top padding to match the new image but the technique is still the same.

    Then all you would need to change is the background position on hover to reveal the different part of the image.

    Of course you will still have the problem as before in setting a current page tab unless you have given up on that idea.

    I've been out all day so I haven't offered any code but if you don't think you do it then post again and someone will take a look for you

    Edit:


    Ignore the above as you will need to move the left image into the anchor instead and then add a span for the right image - Give me a few minutes and I'll make some code


  18. #43
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You should be able to fit that menu in place more or less with the code I have already given you as it uses the same technique. Just change the image paths as required. You may need to tweak the side and top padding to match the new image but the technique is still the same.

    Then all you would need to change is the background position on hover to reveal the different part of the image.

    Of course you will still have the problem as before in setting a current page tab unless you have given up on that idea.

    I've been out all day so I haven't offered any code but if you don't think you do it then post again and someone will take a look for you
    thanks Paul, yeah I gave up on that idea. If you take a look at the link I gave you, then you would see how the menu actually looks like https://www.linkedin.com/secure/login

    and yes, I might need some help, I tried to put it up on my site and everything came out wrong. The technique is a little different I think, since the images are different. There are only 2 images instead of 4, and there are different colors on top of each other, as you can see in the attachement.

    If somebody could help me, it would be great, I've been struggling with this menu and I need to move forward, my head is spinning

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    here's a start:

    Code:
    /* Navigation menu */
    #navigation {
      padding-left: 30px;
    }
    #navigation ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    #navigation li{
        float:left;
        height:27px;
    }
    #navigation li a{
        float:left;
        height:27px;
        padding-left:9px;
        background:url(images/nav_left.gif) no-repeat left top;
     font: 13px bold "Trebuchet MS", verdana, helvetica, arial, sans-serif;
     color: #fff;
        text-decoration: none;
    }
    
    #navigation a em{
      padding:5px 16px 0 4px;
      font-weight: bold;
            float:left;
         background:url(images/nav_right.gif) no-repeat right top;
         height:22px;
            font-weight:normal;
            font-style:normal;
            cursor:pointer;
    }
    
    #navigation li a:hover{color:#c00;background:url(images/nav_left.gif) no-repeat 0 -150px}
    #navigation li a:hover em{color:#c00;background:url(images/nav_right.gif) no-repeat 0 -150px}
    
    #navigation li a:active{color:#c00;background:url(images/nav_left.gif) no-repeat 0 -300px}
    #navigation li a:active em{color:#c00;background:url(images/nav_right.gif) no-repeat 0 -300px}

    Code:
                        <td id="navigation"><!-- breadcrumbs -->
                            <ul>
                                <li><a accesskey="d" href="#"><em>My Desktop</em></a></li>
                                <li><a href="#"><em>My Contacts</em></a></li>
                                <li> <a accesskey="s" href="#"><em>Search</em></a></li>
                                <li><a accesskey="b" href="#"><em>Blogs</em></a></li>
                                <li><a href="#"><em>Chatrooms</em></a></li>
                                <li><a accesskey="f" href="#"><em>Inkspot</em></a></li>
                            </ul>
                            <!-- /breadcrumbs --></td>

  20. #45
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you want space between the tabs then add amargin here:

    Code:
    #navigation li{
        float:left;
        height:27px;
    margin-right:3px;
    }

  21. #46
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome. Thank you!!!

    One more thing: when I roll over the tab, the round corners become square. Any idea why?
    also, how can I make my fonts look bold like the ones in the previous link?

    edit: ok, I was able to make the font bold but I can't center it

  22. #47
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The corners can be fixed by changing teh code as follows.

    Code:
    #navigation li a:hover{color:#c00;background:url(images/nav_left.gif) no-repeat 0 -150px}
    #navigation li a:hover em{color:#c00;background:url(images/nav_right.gif) no-repeat 100&#37; -150px}
    
    #navigation li a:active{color:#c00;background:url(images/nav_left.gif) no-repeat 0 -300px}
    #navigation li a:active em{color:#c00;background:url(images/nav_right.gif) no-repeat 100% -300px}
    to center the text you can adjust the padding at the side here.

    Code:
    #navigation a em{
      padding:5px 16px 0 7px;
      font-weight: bold;
            float:left;
         background:url(images/nav_right.gif) no-repeat right top;
         height:22px;
            font-weight:normal;
            font-style:normal;
            cursor:pointer;
    }
    There is 9px padding needed for the left side of the anchor image and I have put 16px padding on the right of the em so if we add 7px padding to the left of the em that equals 16px padding on either side.

  23. #48
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you and once again sorry for all the idiotic questions.

    I'm going to stick with this menu for now, but in the future, I would love to be able to have it done the way I want it.

    I will probably try that PHP function one day, just for the heck of it, so I can learn something. I might have to come back then and ask you to help me add the extra CSS code, but till then, thanks again, you were very patient.


Bookmarks

Posting Permissions

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