The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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?

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.

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.

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.

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?

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.

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;

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.

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.

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.

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?

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 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?

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

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?