Dynamically Set Width

[shadowayex]

I have a nice little layout for a php program I'm building, but I was to have an element's (more specifically a <span>'s) width to extend from where it starts to the end of the page. The deal is where it starts changes due to tabs being built differently for each situation. Is there a way to make the <span> extend the rest of the page with each situation?If you need an example or a better reason why, here:

________ ________ ________| Tab 1 || Tab 2 || Tab 3 | |_____________________________\________________________/ \____________________________/			 |							 |There could be			 This must extend to the endany amount of these.

[Enthusiastic Student]

Hi RagaeDoes it have to be a span? If you just place a div it will automatically fill the rest. Maybe this comes from 'display: block;', but I'm not sure.Enthusiastic

[shadowayex]

I tried a <div> and it automatically put it on it's own line, so that's not gonna work. Nice thought though.

[jlhaslip]

post the code you have developed to date. thanks.

[shadowayex]

The code is written with PHP included, so if you're not adept in PHP it might confuse you, but here it is:Styling

<style type="text/css">span.column 	{width: 200px;}div.hidden	{height: 0px;		 overflow: hidden;		 visibility: hidden;}div.visible	{border-left: 2px solid #000000;		 border-bottom: 2px solid #000000;		 border-right: 2px solid #000000;		 float: left;		 height: auto;		 margin-top: 2px;		 overflow: visible;		 padding: 10px;		 visibility: visible;		 width: 100%;}span.tab	{border-top: 2px solid #000000;		 border-left: 2px solid #000000;		 border-bottom: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}span.tab2	{border: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}span.sel	{border-top: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}span.sel2	{border-top: 2px solid #000000;		 border-left: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}div.footer 	{float: left;            	 margin-top: 20px;            	 width: 100%;}</style>

Tabs

if($folder > 0){?>	<span id="tab<?php echo $id; ?>" onclick="changeType('<?php echo $id; ?>');">		<a href="java script: void(0);">Folders</a>	</span><?php$id += 1;}if($image > 0){?>	<span id="tab<?php echo $id; ?>" onclick="changeType('<?php echo $id; ?>');">		<a href="java script: void(0);">Image Files</a>	</span><?php$id += 1;}if($html > 0){?>	<span id="tab<?php echo $id; ?>" onclick="changeType('<?php echo $id; ?>');">		<a href="java script: void(0);">HTML Files</a>	</span><?php$id += 1;}if($css > 0){?>	<span id="tab<?php echo $id; ?>" onclick="changeType('<?php echo $id; ?>');">		<a href="java script: void(0);">CSS Files</a>	</span><?php$id += 1;}if($js > 0){?>	<span id="tab<?php echo $id; ?>" onclick="changeType('<?php echo $id; ?>');">		<a href="java script: void(0);">JS Files<a/>	</span><?php$id += 1;}if($php > 0){?>	<span id="tab<?php echo $id; ?>" onclick="changeType('<?php echo $id; ?>');">		<a href="java script: void(0);">PHP Files</a>	</span><?php$id += 1;}if($txt > 0){?>	<span id="tab<?php echo $id; ?>" onclick="changeType('<?php echo $id; ?>');">		<a href="java script: void(0);">TXT Files</a>	</span><?php$id += 1;}echo '</div>';

The PHP code dynamically writes them.The final element (which will probably be a <span>) isn't in there because I can't get one to go in properly.JavaScript is used to change the class names. It looks like this:

function changeType(type){	var fields = document.getElementById("fields").value;	for(i=1;i<=fields;i++)	{		var divid = "type" + type;		var spanid = "tab" + type;		var div = document.getElementById("type" + i).id;		var span = document.getElementById("tab" + i).id;		if(div == divid && span == spanid)		{			document.getElementById(div).className = "visible";			if(span == "tab1")			{				document.getElementById(span).className = "sel2";			}			else			{				document.getElementById(span).className = "sel";			}		}		else		{			document.getElementById(div).className = "hidden";			if(span == ("tab" + ((type*1) - 1)))			{				document.getElementById(span).className = "tab2";			}			else			{				document.getElementById(span).className = "tab";			}		}	}}

Here's a static code with three tabs if someone can use it to figure out a solution:

	<span id="tab1" onclick="changeType('1');">		<a href="java script: void(0);">Folders</a>	</span>	<span id="tab2" onclick="changeType('2');">		<a href="java script: void(0);">CSS Files</a>	</span>	<span id="tab3" onclick="changeType('3');">		<a href="java script: void(0);">PHP Files</a>	</span>/*There needs to be a final element to finish out the row*/

[jlhaslip]

A span is an inline element which carries no width. Use a div to go full page width. Style the div to suit.

[Jerry62704]

The code is written with PHP included, so if you're not adept in PHP it might confuse you, but here it is:Styling

<style type="text/css">span.column 	{width: 200px;}div.hidden	{height: 0px;		 overflow: hidden;		 visibility: hidden;}div.visible	{border-left: 2px solid #000000;		 border-bottom: 2px solid #000000;		 border-right: 2px solid #000000;		 float: left;		 height: auto;		 margin-top: 2px;		 overflow: visible;		 padding: 10px;		 visibility: visible;		 width: 100%;}span.tab	{border-top: 2px solid #000000;		 border-left: 2px solid #000000;		 border-bottom: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}span.tab2	{border: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}span.sel	{border-top: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}span.sel2	{border-top: 2px solid #000000;		 border-left: 2px solid #000000;		 color: blue;		 margin: 0px;		 padding: 2px;}div.footer 	{float: left;            	 margin-top: 20px;            	 width: 100%;}</style>

[

Span doesn't allow width. Your choice is to use a div with a float or relative attribute to keep it on the same line as something else or to change the default of the span to block - then you have the same problem as you currently have with div.

[Jerry62704]

I have a nice little layout for a php program I'm building, but I was to have an element's (more specifically a <span>'s) width to extend from where it starts to the end of the page. The deal is where it starts changes due to tabs being built differently for each situation. Is there a way to make the <span> extend the rest of the page with each situation?If you need an example or a better reason why, here:

________ ________ ________| Tab 1 || Tab 2 || Tab 3 | |_____________________________\________________________/ \____________________________/			 |							 |There could be			 This must extend to the endany amount of these.

Is the stuff at the end just to take up space? Does it color the remaining space after the tabs are all accounted for?If so, it seems like a div to me with a background color that contains any number of divs that are floated left (the Tabs) that may have a different color or such.

[shadowayex]

I realize a span has no width, but a width can be set to it. I started with divs but they gave me the exact same problem and using spans made for less code, so that's why I switched.I don't want to use background images as the size of the page itself so far calls for slow loading, so images are going to make that worse.Divs would not span all the way like I wanted them to, at least not the border.It is a space taker and it's supposed to have a left border of 2px and a bottom border of 2px.No elements I've tried have worked. I can get them on the same line, but they won't span the rest of the page with the bottom border >_<.

[Jerry62704]

This will load fast and you can add as many tabs as you want:

<!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>Home</title><style type="text/css">* {	border: 0;	margin: 0;	padding: 0;	}.tabFloat {	float: left;	background-color:green;	margin-left: 10px;	padding: 0 5px;	width: 70px;	}.tabDiv1 {	background-color:pink;	width:100%;	margin-bottom:3px;	}.tabDiv2 {	background-color:yellow;	width:100%;	margin-bottom:3px;	}</style></head><body><div class="tabDiv1">	<div class="tabFloat">		tab 1-1	</div>	<div class="tabFloat">		tab 1-2	</div>	<div class="tabFloat">		tab 1-3	</div><div><div class="tabDiv2">	<div class="tabFloat">		tab 2-1	</div>	<div class="tabFloat">		tab 2-2	</div>	<div class="tabFloat">		tab 2-3	</div>	<div class="tabFloat">		tab 2-4	</div>	<div class="tabFloat">		tab 2-5	</div>	<div class="tabFloat">		tab 2-6	</div></div><div class="tabDiv1">	<div class="tabFloat">		tab 3-1	</div>	<div class="tabFloat">		tab 3-2	</div>	<div class="tabFloat">		tab 3-3	</div>	<div class="tabFloat">		tab 3-4	</div>	<div class="tabFloat">		tab 3-5	</div>	<div class="tabFloat">		tab 3-6	</div>	<div class="tabFloat">		tab 3-7	</div>	<div class="tabFloat">		tab 3-8	</div>	<div class="tabFloat">		tab 3-9	</div>	<div class="tabFloat">		tab 3-10	</div>	<div class="tabFloat">		tab 3-11	</div>	<div class="tabFloat">		tab 3-12	</div>	<div class="tabFloat">		tab 3-13	</div>	<div class="tabFloat">		tab 3-14	</div>	<div class="tabFloat">		tab 3-15	</div>	<div class="tabFloat">		tab 3-16	</div>	<div class="tabFloat">		tab 3-17	</div>	<div class="tabFloat">		tab 3-18	</div><div></body></html>

[shadowayex]

Tabs are dynamically put in. Certain conditions must apply for the tab to exist. Also, when a tab is clicked, it bottom border is erased. For example:

When tab one is active:_________ ________| Tab One || Tab Two||		|________|____________________|								   ||Page							   ||_____________________________________|But When Tab 2 is active: _________ ________| Tab One || Tab Two||________||		|____________________|									||Page								||________________________________________|

And each tab exists if a certain condition applies, so Tab One could be one thing for one person, and something else for another.So let's say it was to display number of animals someone owns. Bob owns 2 cats and a dog. Jill owns a dog and 3 fish. Tab one for Bob would show the cats but for Jill would show her dog. Tab 2 would work the same way. But tab one and two would always retain the status of one and two, no matter what the show.I ust need a way to fill the extra space.