hasankaz
08-06-2009, 02:14 PM
Hi everyone,
I have created tabs using Dreamweaver but somehow text underneath tab got white space, I am trying to achieve something where text underneath can shift its position(upwards) depending on available space?
<style type="text/css">
<!--
.head1 {
background-color: #9cc005;
height: 45px;
width: 148px;
margin:0px;
color:#FFFFFF;
padding-top:10px;
text-align:left;
clear:both;
}
.head2 {
background-color: #b8dc32;
height: 45px;
width: 146px;
color:#FFFFFF;
/*margin: -42px 0px 0px 148px;*/
position:inherit;
padding-top:10px;
text-align:left;
}
.des {
background-color: #9cc005;
width: 294px;
margin-top: 0px;
text-align:left;
position:absolute;
}
.des1 {
background-color: #9cc005;
width: 294px;
margin-top: 0px;
position:inherit;
visibility: hidden;
text-align:left;
clear:both;
}
-->
</style>
<!--[if !IE]>-->
<style type="text/css">
.head2 {
margin: -55px 0px 0px 148px !important;
}
</style>
<!--<![endif]-->
<!--[if IE]>
<style type="text/css">
.head2 {
margin: -45px 0px 0px 148px !important;
}
</style>
<![endif]-->
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
//-->
</script>
<div id="RightColumn" style="overflow:hidden; height:auto;">
<div class="head1 SmallFonts" id="heading1" onclick="MM_showHideLayers('main1','','show','main2','','hide');MM_changeProp('heading1','','backgroundColor','#9cc005','DIV');MM_changeProp('heading2','','backgroundCol or','#b8dc32','DIV')"><b> Find a treatment<br />
near you</b></div>
<div class="head2 SmallFonts" id="heading2" onclick="MM_showHideLayers('main2','','show','main1','','hide');MM_changeProp('heading2','','backgroundColor','#9cc005','DIV');MM_changeProp('heading1','','backgroundCol or','#b8dc32','DIV')"><b> Find a consultant<br />
near you</b></div>
<div class="des" id="main1"><!----Content 1 starts here ------->
<table width="270" border="0" align="center" cellpadding="3" cellspacing="2">
<tr>
<td class="SmallFonts"><strong>Choose from the list:</strong></td>
</tr>
<tr>
<td>
<select name="p_treatment_id" id="select" class="FormDrop" style="width:225px" >
<option value="">Choose a treatment</option>
<option value="197">Abdominal surgery for Crohn's Disease</option>
<option value="199">Acupuncture</option>
<option value="234">Adenoidectomy (child)</option>
<option value="342">Allergy services</option>
<option value="196">Anal fistula surgery</option>
<option value="183">Angioplasty</option>
<option value="347">Ankle replacement</option>
</select> </td>
</tr>
<tr>
<td class="SmallFonts">By postcode, town or country</td>
</tr>
<tr>
<td><label>
<input type="text" name="textfield3" id="textfield3">
</label></td>
</tr>
<tr>
<td><table align="left" cellpadding="0" cellspacing="0">
<TR>
<TH scope="col" class="SmallFonts"> </TH>
</TR>
<TR>
<TH scope="col">
<TABLE width="150" border="0" align="left" cellPadding="0" cellSpacing="0">
<TBODY>
<TR>
<TH vAlign="top" scope="col" width="25" height="15" class="SmallFonts"> </TH>
<TH vAlign="bottom" scope="col" width="25" height="15"> </TH>
<TH vAlign="top" scope="col" width="25" height="15" class="SmallFonts"> </TH>
<TH vAlign="bottom" scope="col" width="25" height="15"> </TH>
<TH vAlign="top" scope="col" width="25" height="15" class="SmallFonts"> </TH>
<TH vAlign="bottom" scope="col" width="25" height="15"> </TH>
</TR>
</TBODY>
</TABLE>
<INPUT id="imageField4" type="image" alt="Search" src="images/buttons/search_button.gif" align="right" border="0" name="imageField5">
</TH>
</TR>
</table>
</td>
</tr>
</table>
<!---------------- Content 1 ends here ------------->
</div>
<div class="des1" id="main2">
<!------- Content 2 starts here ----------->
<table width="270" border="0" align="center" cellpadding="3" cellspacing="2">
<tr>
<td colspan="2" class="SmallFonts"><strong>By surname:</strong></td>
</tr>
<tr>
<td colspan="2"><input name="textfield" type="text" class="FormInput" id="textfield2" value="Enter surname eg... Smith" onFocus="if (this.value=='eg. Knee')
{this.value=''};" ></td>
</tr>
<tr>
<td colspan="2" class="SmallFonts"><strong>By keywords:</strong></td>
</tr>
<tr>
<td colspan="2"><input name="textfield2" type="text" class="FormInput" id="textfield" value="Enter keywords eg... Cosmetic" onFocus="if (this.value=='eg. Knee')
{this.value=''};" ></td>
</tr>
<tr>
<td colspan="2" class="WhiteFonts SmallFonts"><b>Or</b></td>
</tr>
<tr>
<td colspan="2" class="SmallFonts">By specialty:</td>
</tr>
<tr>
<td colspan="2">
<SELECT name="p_speciality" style="width:225px" class="FormDrop">
<OPTION value="" selected>-By Specialty (please select)-</OPTION>
<OPTION value="618">Allergy</OPTION>
<OPTION value="2">Anaesthetics</OPTION>
<OPTION value="4">Audiology</OPTION>
<OPTION value="8">Breast surgery</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td colspan="2" class="SmallFonts">By location:</td>
</tr>
<tr>
<td colspan="2">
<SELECT name="p_locality" class="FormDrop">
<OPTION value="" selected>-By Location (please select)-
<OPTION value="298">Albyn Hospital
<OPTION value="314">Bath Clinic
</SELECT>
</td>
</tr>
<tr>
<td><INPUT id="imageField" type="image" alt="Search" src="/images/buttons/search_button.gif" align="top" name="imageField4"></td>
<td class="WhiteFonts SmallFonts"><b>View all</b></td>
</tr>
</table>
<!------- Content 2 ends here ------------->
</div>
</div>
Text should be right under the tab, where green bit finishes<br>
Text should be right under the tab<br>
Text should be right under the tab
Sorry for long code thanks in advance
I have created tabs using Dreamweaver but somehow text underneath tab got white space, I am trying to achieve something where text underneath can shift its position(upwards) depending on available space?
<style type="text/css">
<!--
.head1 {
background-color: #9cc005;
height: 45px;
width: 148px;
margin:0px;
color:#FFFFFF;
padding-top:10px;
text-align:left;
clear:both;
}
.head2 {
background-color: #b8dc32;
height: 45px;
width: 146px;
color:#FFFFFF;
/*margin: -42px 0px 0px 148px;*/
position:inherit;
padding-top:10px;
text-align:left;
}
.des {
background-color: #9cc005;
width: 294px;
margin-top: 0px;
text-align:left;
position:absolute;
}
.des1 {
background-color: #9cc005;
width: 294px;
margin-top: 0px;
position:inherit;
visibility: hidden;
text-align:left;
clear:both;
}
-->
</style>
<!--[if !IE]>-->
<style type="text/css">
.head2 {
margin: -55px 0px 0px 148px !important;
}
</style>
<!--<![endif]-->
<!--[if IE]>
<style type="text/css">
.head2 {
margin: -45px 0px 0px 148px !important;
}
</style>
<![endif]-->
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
//-->
</script>
<div id="RightColumn" style="overflow:hidden; height:auto;">
<div class="head1 SmallFonts" id="heading1" onclick="MM_showHideLayers('main1','','show','main2','','hide');MM_changeProp('heading1','','backgroundColor','#9cc005','DIV');MM_changeProp('heading2','','backgroundCol or','#b8dc32','DIV')"><b> Find a treatment<br />
near you</b></div>
<div class="head2 SmallFonts" id="heading2" onclick="MM_showHideLayers('main2','','show','main1','','hide');MM_changeProp('heading2','','backgroundColor','#9cc005','DIV');MM_changeProp('heading1','','backgroundCol or','#b8dc32','DIV')"><b> Find a consultant<br />
near you</b></div>
<div class="des" id="main1"><!----Content 1 starts here ------->
<table width="270" border="0" align="center" cellpadding="3" cellspacing="2">
<tr>
<td class="SmallFonts"><strong>Choose from the list:</strong></td>
</tr>
<tr>
<td>
<select name="p_treatment_id" id="select" class="FormDrop" style="width:225px" >
<option value="">Choose a treatment</option>
<option value="197">Abdominal surgery for Crohn's Disease</option>
<option value="199">Acupuncture</option>
<option value="234">Adenoidectomy (child)</option>
<option value="342">Allergy services</option>
<option value="196">Anal fistula surgery</option>
<option value="183">Angioplasty</option>
<option value="347">Ankle replacement</option>
</select> </td>
</tr>
<tr>
<td class="SmallFonts">By postcode, town or country</td>
</tr>
<tr>
<td><label>
<input type="text" name="textfield3" id="textfield3">
</label></td>
</tr>
<tr>
<td><table align="left" cellpadding="0" cellspacing="0">
<TR>
<TH scope="col" class="SmallFonts"> </TH>
</TR>
<TR>
<TH scope="col">
<TABLE width="150" border="0" align="left" cellPadding="0" cellSpacing="0">
<TBODY>
<TR>
<TH vAlign="top" scope="col" width="25" height="15" class="SmallFonts"> </TH>
<TH vAlign="bottom" scope="col" width="25" height="15"> </TH>
<TH vAlign="top" scope="col" width="25" height="15" class="SmallFonts"> </TH>
<TH vAlign="bottom" scope="col" width="25" height="15"> </TH>
<TH vAlign="top" scope="col" width="25" height="15" class="SmallFonts"> </TH>
<TH vAlign="bottom" scope="col" width="25" height="15"> </TH>
</TR>
</TBODY>
</TABLE>
<INPUT id="imageField4" type="image" alt="Search" src="images/buttons/search_button.gif" align="right" border="0" name="imageField5">
</TH>
</TR>
</table>
</td>
</tr>
</table>
<!---------------- Content 1 ends here ------------->
</div>
<div class="des1" id="main2">
<!------- Content 2 starts here ----------->
<table width="270" border="0" align="center" cellpadding="3" cellspacing="2">
<tr>
<td colspan="2" class="SmallFonts"><strong>By surname:</strong></td>
</tr>
<tr>
<td colspan="2"><input name="textfield" type="text" class="FormInput" id="textfield2" value="Enter surname eg... Smith" onFocus="if (this.value=='eg. Knee')
{this.value=''};" ></td>
</tr>
<tr>
<td colspan="2" class="SmallFonts"><strong>By keywords:</strong></td>
</tr>
<tr>
<td colspan="2"><input name="textfield2" type="text" class="FormInput" id="textfield" value="Enter keywords eg... Cosmetic" onFocus="if (this.value=='eg. Knee')
{this.value=''};" ></td>
</tr>
<tr>
<td colspan="2" class="WhiteFonts SmallFonts"><b>Or</b></td>
</tr>
<tr>
<td colspan="2" class="SmallFonts">By specialty:</td>
</tr>
<tr>
<td colspan="2">
<SELECT name="p_speciality" style="width:225px" class="FormDrop">
<OPTION value="" selected>-By Specialty (please select)-</OPTION>
<OPTION value="618">Allergy</OPTION>
<OPTION value="2">Anaesthetics</OPTION>
<OPTION value="4">Audiology</OPTION>
<OPTION value="8">Breast surgery</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td colspan="2" class="SmallFonts">By location:</td>
</tr>
<tr>
<td colspan="2">
<SELECT name="p_locality" class="FormDrop">
<OPTION value="" selected>-By Location (please select)-
<OPTION value="298">Albyn Hospital
<OPTION value="314">Bath Clinic
</SELECT>
</td>
</tr>
<tr>
<td><INPUT id="imageField" type="image" alt="Search" src="/images/buttons/search_button.gif" align="top" name="imageField4"></td>
<td class="WhiteFonts SmallFonts"><b>View all</b></td>
</tr>
</table>
<!------- Content 2 ends here ------------->
</div>
</div>
Text should be right under the tab, where green bit finishes<br>
Text should be right under the tab<br>
Text should be right under the tab
Sorry for long code thanks in advance