SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Forcing it to ignore spaces in the code?

    I'm doing a tab-navigation that uses images, to make my code easy to read, I'm placing every tab in a line of its own, but that creates a space between the tabs and I don't want that, is there any way of forcing it to ignore the space? I know that in HTML it ignores additional spaces placed after the initial space, is there a way to force it to ignore all spaces?

    like, an opposite of the   character?

    Does that exist?



    This is how I want to write my code:

    <a></a>
    <a></a>
    <a></a>


    but it wont look like how I want it to unless I write it like this;

    <a></a><a></a><a></a>

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May we see the rest of your code?
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  3. #3
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, but I dont see how it'll help a great deal.

    This link would have the correct tab look, there are NO spaces between the tabs:
    http://www.november21st.com/home/index.php#navtab


    Code:
    	<div id="navigation">
    <!--You are here-->	<img src="/images/tabar/here_home.gif" alt="You Are Here" width="70" height="100" /><a href="/21stZone/index.php#navtab" onmouseover="imgOn('img2')" onmouseout="imgOff('img2')"><img name="img2" src="/images/tabar/21stzone_off.gif" alt="21stZone" vspace="0" hspace="0" border="0" width="107" height="100"/></a><a href="/portfolio/index.php#navtab" onmouseover="imgOn('img3')" onmouseout="imgOff('img3')"><img name="img3" src="/images/tabar/portfolio_off.gif" alt="Portfolio" vspace="0" hspace="0" border="0" width="114" height="100"/></a><a href="/services/index.php#navtab" onmouseover="imgOn('img4')" onmouseout="imgOff('img4')"><img name="img4" src="/images/tabar/services_off.gif" alt="Services" vspace="0" hspace="0" border="0" width="97" height="100"/></a><a href="/about/index.php#navtab" onmouseover="imgOn('img5')" onmouseout="imgOff('img5')"><img name="img5" src="/images/tabar/about_off.gif" alt="About" vspace="0" hspace="0" border="0" width="78" height="100"/></a><a href="/contact/index.php#navtab" onmouseover="imgOn('img6')" onmouseout="imgOff('img6')"><img name="img6" src="/images/tabar/contact_off.gif" alt="Contact" vspace="0" hspace="0" border="0" width="101" height="100"/></a>			
    			</div>	<!--End of Navigation-->

    Click on any of the other links in the tab to see how it looks like with the <a></a> on a different line. I like how the code is displayed in the others because the layout makes it easy to edit. The code for the tabs is in the <div id="navigation">, near the top.

    Its an issue because with the spaces between the tabs my site is screwed when someone adjusts the text size.

    This doesn't happen when the spaces are elliminated

  4. #4
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends what the main problem is.

    1) If it's the visual separation of tabs that is bothering you... you really have no choice but to keep all the code on a single line with no white space. Spread it out on to separate lines if you want to edit the code, and then manually remove the white space when done. There's really no way around that (hopefully you have the menu on a single include file so you only need to edit the code once)

    2) If it's just the menu wrapping over to the next line that you want to avoid, then you can force the menu's containing div not to wrap.

    The old school (and I believe deprecated) way is to use <nobr></nobr> tags surrounding your code.

    The CSS way is the white-space property.

    try this

    Code:
    <div id="navigation" style="white-space: nowrap;">

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whitespace does matter between inline elements. You need to make sure that there is no whitespace between an end-tag and the following start-tag:
    HTML Code:
    <a href="1.html">Link 1</a><a
      href="2.html">Link 2</a><a
      href="3.html">Link 3</a>...
    It's not pretty in the source, but you have to do it.

    The option is to float the <a> elements, but that means some other things to look out for.
    Last edited by AutisticCuckoo; May 29, 2005 at 22:24.
    Birnam wood is come to Dunsinane

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Those images and anchors would be more semantic if they were wrapped in a list as follows (still using the same format as Tommy's post above to break lines half way through the tag).

    Code:
     <div id="navigation"> 
       <!--You are here-->
       <ul>
      <li><img src="http://www.november21st.com/images/tabar/here_home.gif" alt="You Are Here" width="70" height="100" /></li><li
      ><a href="/21stZone/index.php#navtab" onmouseover="imgOn('img2')" onmouseout="imgOff('img2')"><img name="img2" src="http://www.november21st.com/images/t...stzone_off.gif" alt="21stZone" vspace="0" hspace="0" border="0" width="107" height="100"/></a></li><li
      ><a href="/portfolio/index.php#navtab" onmouseover="imgOn('img3')" onmouseout="imgOff('img3')"><img name="img3" src="http://www.november21st.com/images/t...tfolio_off.gif" alt="Portfolio" vspace="0" hspace="0" border="0" width="114" height="100"/></a></li><li
    		><a href="/services/index.php#navtab" onmouseover="imgOn('img4')" onmouseout="imgOff('img4')"><img name="img4" src="http://www.november21st.com/images/t...rvices_off.gif" alt="Services" vspace="0" hspace="0" border="0" width="97" height="100"/></a></li><li
      ><a href="/about/index.php#navtab" onmouseover="imgOn('img5')" onmouseout="imgOff('img5')"><img name="img5" src="http://www.november21st.com/images/tabar/about_off.gif" alt="About" vspace="0" hspace="0" border="0" width="78" height="100"/></a></li><li
      ><a href="/contact/index.php#navtab" onmouseover="imgOn('img6')" onmouseout="imgOff('img6')"><img name="img6" src="http://www.november21st.com/images/t...ontact_off.gif" alt="Contact" vspace="0" hspace="0" border="0" width="101" height="100"/></a></li>
      </ul>
     </div>
    CSS:
    Code:
    #navigation ul,#navigation li{
     list-style:none;
     margin:0;
     padding:0;
    }
    #navigation li {display:inline}
    However I would be inclined to put the images in the css and do the rollovers with purely css and no JS. (Or just put the rollover image in the css if you want to keep an image in the html). Either way would mean floating the lists instead though and applying dimensions to each item as appropriate.

  7. #7
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice everyone, what you said really does make sense,

    I'm going to go with what cringer said and put the menu into an include file, it really saves a lot of time, I was being lazy about it before because I was just testing out the look.

    I can't believe I didn't think of that AutisticCuckoo, heheh, breaking before the tag ends DOES make a great deal of sense, I guess I was too caught up with wanting the code to look extremely nice, oh well. I donít want to float the a tags, that's just messy, eh, I'll go with your advice and break before the end of the tag.

    And I'm also going to give what Paul said a shot. I was a bit leery of placing my tabs in a list because I wasn't so sure how to style them CSS wise, but the style you provided works fantastic so I'm no longer scared of it.

    I didn't want to use JS for my rollover tabs, when making the tabs i took special care to get the dimensions right so I can do it with CSS -they all share the same height -100px, but I still didn't know how to do it with CSS alone without running into loads of trouble, how would I do a rollover menu in CSS Paul?

    Is there a way to preload the Ďoní state of the buttons so its not loading every time the user goes over the button?

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    messy in the sense that I rarely apply them correctly?

    It's probably my CSS incompetence more so than anything else really. floats are cool if you understand them, I'm fairly new to CSS, I have floats in my design, but I had to really work my gray matter to comprehend what I'm doing. Maybe I've yet to have my CSS "ah-hah!" moment.

    I'm giving your link a try even though negative numbers scare me.

    Aren't I glad my tabs are all the same height.

  10. #10
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so just like I said, I've given your advice a shot. I managed to;

    Include file to save time
    Break before tag ends
    Place my tabs in a list

    I'm still floundering with turning my JS rollover into a CSS rollover, I've followed Kravvitz's link (its been a bunch of help! thanks) but I think I have one more obstacle to jump over to get it right, and its something Paul mentioned about applying the dimensions; they're not applying right.

    The height is going fine because they share the same height, but they dont share the same width, how do I get around that if I donít want to set a common width?

    the CSS is in the PHP include file, so you dont have to go around hunting for it, here's the link;

    http://www.november21st.com/nav2.php

    And the homepage link, again: http://www.november21st.com/home/index.php#navtab
    (note that the include file is ONLY in that link)

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

    You just need to provide the widths for each list item.

    e.g.
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* CS for CS RollOver*/
    ul#example1, ul#example1 li {
      list-style-type: none;
      padding: 0;
      margin: 0;
      text-align: left;
      height: 100px;
      overflow: hidden;
    }
    ul#example1 {
      margin: 0px auto;  
      width: 569px;  /*total width*/
    }
    ul#example1 li {
      float:left;
      width: 70px;
    }
    ul#example1 li a {
      text-align: center;
      float: left; 
      width: 100%;
      line-height: 100px;
      height: 100px;
      text-indent: -5000px;
      text-decoration: none;
      background-position: 0 0;
    }
    
    ul#example1 li a:hover {
      background-position: 0 -100px;
    /* the second number should be the negative height of the link. */
    }
    ul#example1 li#link1 a{ background-image: url('http://www.november21st.com/images/tabar/switch_home.jpg');}
    ul#example1 li#link1 {width:70px;}
    ul#example1 li#link2 a{ background-image: url('http://www.november21st.com/images/tabar/switch_explore.jpg');}
    ul#example1 li#link2 { width:107px;}
    ul#example1 li#link3 a{background-image: url('http://www.november21st.com/images/tabar/switch_portfolio.jpg');}
    ul#example1 li#link3 {width:114px;}
    ul#example1 li#link4 a{ background-image: url('http://www.november21st.com/images/tabar/switch_services.jpg');}
    ul#example1 li#link4 {width:97px;}
    ul#example1 li#link5 a{ background-image: url('http://www.november21st.com/images/tabar/switch_about.jpg');}
    ul#example1 li#link5 {width:78px;}
    ul#example1 li#link6 a{background-image: url('http://www.november21st.com/images/tabar/switch_contact.jpg');}
    ul#example1 li#link6 {width:101px;}
    </style>
    </head>
    <body>
    <ul id="example1">
      <li id="link1"><a href="#">Home</a></li>
      <li id="link2"><a href="#">Explore</a></li>
      <li id="link3"><a href="#">Portfolio</a></li>
      <li id="link4"><a href="#" >Services</a></li>
      <li id="link5"><a href="#" >About</a></li>
      <li id="link6"><a href="#" >Contact</a></li>
    </ul>
    </body>
    </html>
    Unlike image which have intrinsic width a background image has no width unless you give it some

  12. #12
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh,wow, you rock. I've added widths before but I've done it all wrong because I'd put it in the link a, I put the lengths in the correct place now but it just makes the entire thing 'disappear'....this is so confusing.

    Bah. Your solution sounded logical. How did I manage to screw it up?

  13. #13
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sigh, this is beyond weird. I put your code in a page and it works just fine. I'm definitely screwing something up, but what...

    *scrutinizes own code*


    Edit: Ok, it shows up now, no idea what I was doing wrong though, must be something about how the include file works or something. meh.

    Now I'm going to crack my knuckles and figure out how to use PHP and CSS to have a "current state"

    I've done it before, but not with images for state changes. I suppose more background shifting is in order.

    *gets cracking*

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Now I'm going to crack my knuckles and figure out how to use PHP and CSS to have a "current state"
    This should help.

    http://www.alistapart.com/articles/keepingcurrent/


    Or you could set a different id in the body tag for each menu page and target the current page with it. Of course you have to apply a body id to each page unlike a script solution which automates the process.

  15. #15
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going for the first method first since I've applied it before, I've actually done the tutorial in list-apart, heh, and I've managed to have it working, but this here isn't working for me, eh, I'm not at all sure why. I've added new ids for the current states and changed the pictures but it screwed the page entirely and can't figure out for the life of me WHY its acting up.

    Page: http://www.november21st.com/home/index.php
    php file: http://www.november21st.com/nav.php

    The menu pushed out the last button the instant I added the php code and link id tags in there, do you know why its doing this? It's all shoving the rest of my page waaay down. Confusing.

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

    You've left an unwanted tag in your code here:
    Code:
    <!--
    <ul id="example1">
      <li id="link1"><a href="#" title="Home">Home</a></li>
      <li id="link2"><a href="#" title="Explore">Explore</a></li>
      <li id="link3"><a href="#" title="Portfolio">Portfolio</a></li>
      <li id="link4"><a href="#" title="Services">Services</a></li>
      <li id="link5"><a href="#" title="About">About</a></li>
      <li id="link6"><a href="#" title="Contact">Contact</a></li>
    </ul>
    --><ul id="example1">
    <ul>
    Try taking that out first and then see what happens from there

  17. #17
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's unwanted?

    Eh, I'm not sure I follow you, I need the <ul id="example1"> to style my list. Its there twice but the first list is commented out. I took out the commented list and nothing really changed. Are you saying I should take out the id completely?

    How would my list style then?

    Sorry, here's the nav.php code;

    Code:
    <style type="text/css">
    <!--
    /* CS for CS RollOver*/
    ul#example1, ul#example1 li {
      list-style-type: none;
      padding: 0;
      margin: 0;
      text-align: left;
      height: 100px;
      overflow: hidden;
    }
    ul#example1 {
      margin: 0px auto;  
      width: 569px;  /*total width*/
    }
    ul#example1 li {
      float:left;
      width: 70px;
    }
    ul#example1 li a {
      text-align: center;
      float: left; 
      width: 100%;
      line-height: 100px;
      height: 100px;
      text-indent: -5000px;
      text-decoration: none;
      background-position: 0 0;
    }
    
    ul#example1 li a:hover {
      background-position: 0 -100px;
    /* the second number should be the negative height of the link. */
    }
    ul#example1 li#link1 a{ background-image: url('http://november21st.com/images/tabar/switch_home.jpg');}
    ul#example1 li#link1 {width:70px;}
    ul#example1 li#link2 a{ background-image: url('http://november21st.com/images/tabar/switch_explore.jpg');}
    ul#example1 li#link2 { width:107px;}
    ul#example1 li#link3 a{background-image: url('http://november21st.com/images/tabar/switch_portfolio.jpg');}
    ul#example1 li#link3 {width:114px;}
    ul#example1 li#link4 a{ background-image: url('http://november21st.com/images/tabar/switch_services.jpg');}
    ul#example1 li#link4 {width:97px;}
    ul#example1 li#link5 a{ background-image: url('http://november21st.com/images/tabar/switch_about.jpg');}
    ul#example1 li#link5 {width:78px;}
    ul#example1 li#link6 a{background-image: url('http://november21st.com/images/tabar/switch_contact.jpg');}
    ul#example1 li#link6 {width:100px;}
    
    
    
    ul#example1 li#home { background-image: url('http://november21st.com/images/tabar/switch_here_home.jpg'); width:70px;}
    
    ul#example1 li#explore { background-image: url('http://november21st.com/images/tabar/switch_here_explore.jpg'); width:107px;}
    
    ul#example1 li#portfolio {background-image: url('http://november21st.com/images/tabar/switch_here_portfolio.jpg'); width:114px;}
    
    ul#example1 li#services { background-image: url('http://november21st.com/images/tabar/switch_here_services.jpg'); width:97px;}
    
    ul#example1 li#about { background-image: url('http://november21st.com/images/tabar/switch_here_about.jpg'); width:78px;}
    
    ul#example1 li#contact {background-image: url('http://november21st.com/images/tabar/switch_here_contact.jpg'); width:100px;}
    
    
    -->
    </style>
    
    			<div class= "spacer">&nbsp;	</div>
    
    
    <ul id="example1">
     <ul>
        <li id="link1" <?php if ($thisPage=="home") 
          echo " id=\"home\""; ?>>
          <a href="http://november21st.com/home/index.php#tab-nav">HOME</a></li>
    
        <li id="link2" <?php if ($thisPage=="art") 
          echo " id=\"explore\""; ?>>
          <a href="http://november21st.com//explore/index.php#tab-nav">EXPLORE</a></li>
    
        <li id="link3" <?php if ($thisPage=="portfolio") 
          echo " id=\"portfolio\""; ?>>
          <a href="http://november21st.com//portfolio/index.php#tab-nav">PORTFOLIO</a></li>
    
        <li id="link4" <?php if ($thisPage=="services") 
          echo " id=\"services\""; ?>>
          <a href="http://november21st.com//services/index.php#tab-nav">SERVICES</a></li>
    
        <li id="link5" <?php if ($thisPage=="about") 
          echo " id=\"about\""; ?>>
          <a href="http://november21st.com//about/index.php#tab-nav">ABOUT</a></li>
    
        <li id="link6" <?php if ($thisPage=="contact") 
          echo " id=\"contact\""; ?>>
          <a href="http://november21st.com//contact/index.php#tab-nav">CONTACT</a></li>
      </ul>
    
    
    
    			<div class= "spacer">&nbsp;</div>
    			<div class= "spacer">&nbsp;</div>

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Like this lol
    Code:
    <!--
    <ul id="example1">
    <li id="link1"><a href="#" title="Home">Home</a></li>
    <li id="link2"><a href="#" title="Explore">Explore</a></li>
    <li id="link3"><a href="#" title="Portfolio">Portfolio</a></li>
    <li id="link4"><a href="#" title="Services">Services</a></li>
    <li id="link5"><a href="#" title="About">About</a></li>
    <li id="link6"><a href="#" title="Contact">Contact</a></li>
    </ul>
    -->
    <ul id="example1">
    <li id="link1" > <a href="<A href="http://november21st.com/home/index.php#tab-nav">HOME</a></li">http://november21st.com/home/index.php#tab-nav">HOME</a></li>
    <li id="link2" > <a href="<A href="http://november21st.com//explore/index.php#tab-nav">EXPLORE</a></li">http://november21st.com//explore/index.php#tab-nav">EXPLORE</a></li>
    <li id="link3" > <a href="<A href="http://november21st.com//portfolio/index.php#tab-nav">PORTFOLIO</a></li">http://november21st.com//portfolio/index.php#tab-nav">PORTFOLIO</a></li>
    <li id="link4" > <a href="<A href="http://november21st.com//services/index.php#tab-nav">SERVICES</a></li">http://november21st.com//services/index.php#tab-nav">SERVICES</a></li>
    <li id="link5" > <a href="<A href="http://november21st.com//about/index.php#tab-nav">ABOUT</a></li">http://november21st.com//about/index.php#tab-nav">ABOUT</a></li>
    <li id="link6" > <a href="<A href="http://november21st.com//contact/index.php#tab-nav">CONTACT</a></li">http://november21st.com//contact/index.php#tab-nav">CONTACT</a></li>
    </ul>
    (ignore the extraneous anchors as the message board is parsing the links.)

  19. #19
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooooh, I see! For a second I thought you were crazy, heheh, I usually leap to question my own perception, but the <ul> thing just wasn't clicking with me, heh, man. <ul> and <ul id=".."> looked like two different thing to me. Oh dear.

    Still, gotten a long way from knowing extremely little about HTML and CSS in a month to this, you've been so patient with me, I almost feel guilty about bothering you about this again, but, its not identifying what page its on.

    I actually dont think its php at fault, maybe my styles isn't working? look at the "ul#example1 li#home" - "ul#example1 li#contact" bit, did I style it correctly?

    I don't care much for it showing a hover state when its in the 'current page' so I styled them the way I did thinking it'll show the image and no hover state. I specified the width in the same li, is that right?

    this page: http://www.november21st.com/home/index.php

    has <?php $thisPage="home"; ?> at the top and should show home differently but it isn't.


    Code:
    <style type="text/css">
    <!--
    /* CS for CS RollOver*/
    ul#example1, ul#example1 li {
      list-style-type: none;
      padding: 0;
      margin: 0;
      text-align: left;
      height: 100px;
      overflow: hidden;
    }
    ul#example1 {
      margin: 0px auto;  
      width: 569px;  /*total width*/
    }
    ul#example1 li {
      float:left;
      width: 70px;
    }
    ul#example1 li a {
      text-align: center;
      float: left; 
      width: 100%;
      line-height: 100px;
      height: 100px;
      text-indent: -5000px;
      text-decoration: none;
      background-position: 0 0;
    }
    
    ul#example1 li a:hover {
      background-position: 0 -100px;
    /* the second number should be the negative height of the link. */
    }
    ul#example1 li#link1 a{ background-image: url('http://november21st.com/images/tabar/switch_home.jpg');}
    ul#example1 li#link1 {width:70px;}
    ul#example1 li#link2 a{ background-image: url('http://november21st.com/images/tabar/switch_explore.jpg');}
    ul#example1 li#link2 { width:107px;}
    ul#example1 li#link3 a{background-image: url('http://november21st.com/images/tabar/switch_portfolio.jpg');}
    ul#example1 li#link3 {width:114px;}
    ul#example1 li#link4 a{ background-image: url('http://november21st.com/images/tabar/switch_services.jpg');}
    ul#example1 li#link4 {width:97px;}
    ul#example1 li#link5 a{ background-image: url('http://november21st.com/images/tabar/switch_about.jpg');}
    ul#example1 li#link5 {width:78px;}
    ul#example1 li#link6 a{background-image: url('http://november21st.com/images/tabar/switch_contact.jpg');}
    ul#example1 li#link6 {width:100px;}
    
    
    
    ul#example1 li#home { background-image: url('http://november21st.com/images/tabar/switch_here_home.jpg'); width:70px;}
    
    ul#example1 li#explore { background-image: url('http://november21st.com/images/tabar/switch_here_explore.jpg'); width:107px;}
    
    ul#example1 li#portfolio {background-image: url('http://november21st.com/images/tabar/switch_here_portfolio.jpg'); width:114px;}
    
    ul#example1 li#services { background-image: url('http://november21st.com/images/tabar/switch_here_services.jpg'); width:97px;}
    
    ul#example1 li#about { background-image: url('http://november21st.com/images/tabar/switch_here_about.jpg'); width:78px;}
    
    ul#example1 li#contact {background-image: url('http://november21st.com/images/tabar/switch_here_contact.jpg'); width:100px;}
    
    
    -->
    </style>
    
    			<div class= "spacer">&nbsp;	</div>
    
    
    <ul id="example1">
    
        <li id="link1" <?php if ($thisPage=="home") 
          echo " id=\"home\""; ?>>
          <a href="http://november21st.com/home/index.php#tab-nav">HOME</a></li>
    
        <li id="link2" <?php if ($thisPage=="art") 
          echo " id=\"explore\""; ?>>
          <a href="http://november21st.com//explore/index.php#tab-nav">EXPLORE</a></li>
    
        <li id="link3" <?php if ($thisPage=="portfolio") 
          echo " id=\"portfolio\""; ?>>
          <a href="http://november21st.com//portfolio/index.php#tab-nav">PORTFOLIO</a></li>
    
        <li id="link4" <?php if ($thisPage=="services") 
          echo " id=\"services\""; ?>>
          <a href="http://november21st.com//services/index.php#tab-nav">SERVICES</a></li>
    
        <li id="link5" <?php if ($thisPage=="about") 
          echo " id=\"about\""; ?>>
          <a href="http://november21st.com//about/index.php#tab-nav">ABOUT</a></li>
    
        <li id="link6" <?php if ($thisPage=="contact") 
          echo " id=\"contact\""; ?>>
          <a href="http://november21st.com//contact/index.php#tab-nav">CONTACT</a></li>
      </ul>

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

    Well it looks like you've missed the page identifier php from the top of the page for a start as there is no id being written into the mark-up although the code is correct.

    The other problem is that you are putting the background image on the wrong element! It should be on the anchor and not on the list ( and you can't have 2 id's on the same element so you will need a class instead).

    Code:
    ul#example1 li#link1.home a{ background: url('http://november21st.com/images/tabar/switch_here_home.jpg') no-repeat 0 0; width:70px;}
    Code:
      <li id="link1" <?php if ($thisPage=="home") 
    	  echo " class=\"home\""; ?>> <a href="<A href="http://november21st.com/home/index.php#tab-nav">HOME</a></li">http://november21st.com/home/index.php#tab-nav">HOME</a></li>
    I've tested this and it works fine

  21. #21
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your right, the code does work for the home, I tested it too this time placing the
    <?php $thisPage="home"; ?> in the navigation file itself. For some reason placing <?php $thisPage="home"; ?> in the index file doesn't do anything for the bar, which is weird, its never done that to me before. I tried moving it around and placing it other places, still no luck.

    I'm going to ignore this little detail for now and try to get the other tabs to work, home's the only one working right now. sadly.

    I did exactly what you were doing, but its not responding, eh. I used the same widths as the ones for the other tabs, that should work right? The images aren't hiding or something are they?

    http://www.november21st.com/navcopy.php

    the code is

    Code:
    
    
    ul#example1 li#link1.home a{ background: url('http://november21st.com/images/tabar/switch_here_home.jpg') no-repeat 0 0; width:70px;}
    ul#example1 li#link2.explore a{ background: url('http://november21st.com/images/tabar/switch_here_explore.jpg') no-repeat 0 0; width:107px;}
    ul#example1 li#link3.portfolio a{ background: url('http://november21st.com/images/tabar/switch_here_portfolio.jpg') no-repeat 0 0; width:114px;}
    ul#example1 li#link4.services a{ background: url('http://november21st.com/images/tabar/switch_here_services.jpg') no-repeat 0 0; width:97px;}
    ul#example1 li#link5.about a{ background: url('http://november21st.com/images/tabar/switch_here_about.jpg') no-repeat 0 0; width:78px;}
    ul#example1 li#link6.contact a{ background: url('http://november21st.com/images/tabar/switch_here_contact.jpg') no-repeat 0 0; width:100px;}
    
    -->
    </style>
    
    <ul id="example1">
    <li id="link1" <?php if ($thisPage=="home") echo " class=\"home\""; ?>> <a href="http://november21st.com/home/index.php#tab-nav">HOME</a></li>
    <li id="link2" <?php if ($thisPage=="explore") echo " id=\"explore\""; ?>> <a href="http://november21st.com//explore/index.php#tab-nav">EXPLORE</a></li>
    <li id="link3" <?php if ($thisPage=="portfolio") echo " id=\"portfolio\""; ?>> <a href="http://november21st.com//portfolio/index.php#tab-nav">PORTFOLIO</a></li>
    <li id="link4" <?php if ($thisPage=="services") echo " id=\"services\""; ?>> <a href="http://november21st.com//services/index.php#tab-nav">SERVICES</a></li>
    <li id="link5" <?php if ($thisPage=="about") echo " id=\"about\""; ?>> <a href="http://november21st.com//about/index.php#tab-nav">ABOUT</a></li>
    <li id="link6" <?php if ($thisPage=="contact") echo " id=\"contact\""; ?>> <a href="http://november21st.com//contact/index.php#tab-nav">CONTACT</a></li>
    </ul>
    It LOOKS right. right?


    full code for the file:
    Code:
    <?php $thisPage="home"; ?>
    	
    <style type="text/css">
    <!--
    /* CS for CS RollOver*/
    ul#example1, ul#example1 li {
      list-style-type: none;
      padding: 0;
      margin: 0;
      text-align: left;
      height: 100px;
      overflow: hidden;
    }
    ul#example1 {
      margin: 0px auto;  
      width: 569px;  /*total width*/
    }
    ul#example1 li {
      float:left;
      width: 70px;
    }
    ul#example1 li a {
      text-align: center;
      float: left; 
      width: 100%;
      line-height: 100px;
      height: 100px;
      text-indent: -5000px;
      text-decoration: none;
      background-position: 0 0;
    }
    
    ul#example1 li a:hover {
      background-position: 0 -100px;
    /* the second number should be the negative height of the link. */
    }
    ul#example1 li#link1 a{ background-image: url('http://november21st.com/images/tabar/switch_home.jpg');}
    ul#example1 li#link1 {width:70px;}
    ul#example1 li#link2 a{ background-image: url('http://november21st.com/images/tabar/switch_explore.jpg');}
    ul#example1 li#link2 { width:107px;}
    ul#example1 li#link3 a{background-image: url('http://november21st.com/images/tabar/switch_portfolio.jpg');}
    ul#example1 li#link3 {width:114px;}
    ul#example1 li#link4 a{ background-image: url('http://november21st.com/images/tabar/switch_services.jpg');}
    ul#example1 li#link4 {width:97px;}
    ul#example1 li#link5 a{ background-image: url('http://november21st.com/images/tabar/switch_about.jpg');}
    ul#example1 li#link5 {width:78px;}
    ul#example1 li#link6 a{background-image: url('http://november21st.com/images/tabar/switch_contact.jpg');}
    ul#example1 li#link6 {width:100px;}
    
    
    
    ul#example1 li#link1.home a{ background: url('http://november21st.com/images/tabar/switch_here_home.jpg') no-repeat 0 0; width:70px;}
    ul#example1 li#link2.explore a{ background: url('http://november21st.com/images/tabar/switch_here_explore.jpg') no-repeat 0 0; width:107px;}
    ul#example1 li#link3.portfolio a{ background: url('http://november21st.com/images/tabar/switch_here_portfolio.jpg') no-repeat 0 0; width:114px;}
    ul#example1 li#link4.services a{ background: url('http://november21st.com/images/tabar/switch_here_services.jpg') no-repeat 0 0; width:97px;}
    ul#example1 li#link5.about a{ background: url('http://november21st.com/images/tabar/switch_here_about.jpg') no-repeat 0 0; width:78px;}
    ul#example1 li#link6.contact a{ background: url('http://november21st.com/images/tabar/switch_here_contact.jpg') no-repeat 0 0; width:100px;}
    
    -->
    </style>
    
    			<div class= "spacer">&nbsp;	</div>
    			<a class="nothing" name="tab-nav">&nbsp;</a>
    
    <ul id="example1">
    <li id="link1" <?php if ($thisPage=="home") echo " class=\"home\""; ?>> <a href="http://november21st.com/home/index.php#tab-nav">HOME</a></li>
    <li id="link2" <?php if ($thisPage=="explore") echo " id=\"explore\""; ?>> <a href="http://november21st.com//explore/index.php#tab-nav">EXPLORE</a></li>
    <li id="link3" <?php if ($thisPage=="portfolio") echo " id=\"portfolio\""; ?>> <a href="http://november21st.com//portfolio/index.php#tab-nav">PORTFOLIO</a></li>
    <li id="link4" <?php if ($thisPage=="services") echo " id=\"services\""; ?>> <a href="http://november21st.com//services/index.php#tab-nav">SERVICES</a></li>
    <li id="link5" <?php if ($thisPage=="about") echo " id=\"about\""; ?>> <a href="http://november21st.com//about/index.php#tab-nav">ABOUT</a></li>
    <li id="link6" <?php if ($thisPage=="contact") echo " id=\"contact\""; ?>> <a href="http://november21st.com//contact/index.php#tab-nav">CONTACT</a></li>
    </ul>

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Looks like its working now.

  23. #23
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul! Really appreciate your help! I finally have a working CSS Rollover I'm happy with!


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
  •