HTML question....

[Bdw3]

Say I'm doing a nav bar with just gif images.
I want the last section to be a space filler that stretches to the edge of the page regardless of the viewers screen resolution.


Example:

[200 pixel blank section of bar][100 pixel button][100 pixel button][100 pixel button][How do I make this one stretch to fill the rest of this line]


:icon6:

[bitWISE]

Set the width of the parent object and the last child to 100%?

[Bdw3]

Parent, Child? o_0

--1 to 10 on HTML knowledge I'm a 4.

Setting the width of anything to 100% jumps it to the next line.

[bitWISE]

Well you need to tell us what exactly you are doing. "HTML" is extremely vague.

If you were using a table:
parent would be the table itself
child would be each cell within the table

[Bdw3]

Just plain ole' HTML.

What I want to do:
http://img270.imageshack.us/img270/7898/bleh4ug.png

I don't want to give it a specific length, I want it to stretch to the edge regardless of res.

Current HTML for the bar you see:

<table height="30" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">

<td width="100%">

<img src="images/header.gif"
height="30" width="200" /><img src="images/button.bmp"
height="30" width="110" /><img src="images/button.bmp"
height="30" width="110" /><img src="images/button.bmp"
height="30" width="110" /><img src="images/button.bmp"
height="30" width="110" /><img src="images/header.gif"
height="30" width="300" />

</td>

</tr>
</table>

header.gif being the blank parts, and button.bmp being the button parts. I'm just trying to get it figured out before I do the buttons.

[mjrpes]

nice to see you are using xhtml

you will need to set the icon image as a 'background' of a table cell. make an image with just the background part of the button, not the text. this can be short in the horizontal direction, since it will repeat. then you set table to be 100% width, and you give the table cell with the menu to be an exact pixel length. you don't give the expanding cell any specific length (it defaults to fill in the remaining length of the table).

Code: Select all

<table height="30" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">

<td width=640>

<img src="images/header.gif"
height="30" width="200" /><img src="images/button.bmp"
height="30" width="110" /><img src="images/button.bmp"
height="30" width="110" /><img src="images/button.bmp"
height="30" width="110" /><img src="images/button.bmp"
height="30" width="110" />
</td>
<td style="background-image: url(images/button_bk.gif); background-repeat: repeat-x">
 
</td>
</tr>
</table>

not sure exactly the code... it should be something like that though.

[bitWISE]

http://perfunction.com/designs/test/navExample.html

Edit: Optimized even further.

[mjrpes]

damn straight

[Bdw3]

hahah, I see.

Awesome! Thanks guys!. :icon14:

[bitWISE]

hahah, I see.

Awesome! Thanks guys!. :icon14:

n/p. It's never too early to get in the habbit of conserving bandwidth and an empty spacer gif is an easy hack when the browser wont listen to your sizing requests.

[MKJ]

could also made the table width 100% and insert every button in a different td. give all tds a width cept for the last and itll stretch
ofcourse thats the ugly way to do it