Hi,
I have some buttons on my webpage that I developed myself using span tags and CSS classes. The problem is if a user shrinks the window in a resize the buttons start to overlap each other and generally look rubbish!
I think that nowrap might be the solution but I haven't found a way to make it work yet, does anyone know if that is the solution to my problem and, if so, what is the syntax for doing it?
I have each button as an individual span and all the buttons are contained in one overall span (so I can move the group as one) like so:
<span class="functionToolbar">
<span id="splitV" class="functionButton">Split Vertically</span>
<span id="splitH" class="functionButton">Split Horizontally</span>
</span>
Anyone know how I can stop them wrapping n overlapping on a window resize??Could you post a link to the page? it's hard to envisage the whole of the code to identify what could be wrong when we can only see part of it.I cant post a link because i don't have access to webspace yet, I'm working on it locally. I was just wondering if you have any idea can nowrap be used with elements like span, the only examples I can find are it being used with table data.Have you tried {white-space
re;}? Or just add a non-breaking space between each span!I think what you're looking for is:
#splitv, #splith, {
white-space: nowrap;
}
I've also attached an HTML file that would do the same thing as your code above (creating a horizontal menu).
The only difference is that the spans are replaced by anchor tags with the display set to block, which are then floated to the left, and the white-space property of the A tags are set to nowrap. Each menu item will bounce down to the line below if the window is not wide enough, but the layout won't break.
NOTE: I haven't been able to test this out on MAC browsers yet as I'm sitting at home on a PC. I think IE5/Mac will give you some guff.
The code I've attached works on:
IE6/Win XP
NS7 Win XP
Moz 1.0/PC
Opera 6.04/PC
I have some buttons on my webpage that I developed myself using span tags and CSS classes. The problem is if a user shrinks the window in a resize the buttons start to overlap each other and generally look rubbish!
I think that nowrap might be the solution but I haven't found a way to make it work yet, does anyone know if that is the solution to my problem and, if so, what is the syntax for doing it?
I have each button as an individual span and all the buttons are contained in one overall span (so I can move the group as one) like so:
<span class="functionToolbar">
<span id="splitV" class="functionButton">Split Vertically</span>
<span id="splitH" class="functionButton">Split Horizontally</span>
</span>
Anyone know how I can stop them wrapping n overlapping on a window resize??Could you post a link to the page? it's hard to envisage the whole of the code to identify what could be wrong when we can only see part of it.I cant post a link because i don't have access to webspace yet, I'm working on it locally. I was just wondering if you have any idea can nowrap be used with elements like span, the only examples I can find are it being used with table data.Have you tried {white-space
re;}? Or just add a non-breaking space between each span!I think what you're looking for is:#splitv, #splith, {
white-space: nowrap;
}
I've also attached an HTML file that would do the same thing as your code above (creating a horizontal menu).
The only difference is that the spans are replaced by anchor tags with the display set to block, which are then floated to the left, and the white-space property of the A tags are set to nowrap. Each menu item will bounce down to the line below if the window is not wide enough, but the layout won't break.
NOTE: I haven't been able to test this out on MAC browsers yet as I'm sitting at home on a PC. I think IE5/Mac will give you some guff.
The code I've attached works on:
IE6/Win XP
NS7 Win XP
Moz 1.0/PC
Opera 6.04/PC