I'm Fairly new to ASP/HTML/CSS and trying to develop a web form but im coming across some design issues/aligning stuff correctly
I want to move the tab menu as seen in the picture to under personal details, how can I do this using css as it has not worked for me so far, relevant code is below and thanks in advance for any suggestions
<div class="col-sm-12" runat="server" id="studentForm">
<h2>Student details</h2>
<div class="textLeft">
<asp:Label runat="server" ID="lblGender" AssociatedControlID="ddlGender">Gender:</asp:Label><asp:DropDownList ID="ddlGender" runat="server" CssClass="Ainput" /><br />
<asp:Label runat="server" ID="lblTitle" AssociatedControlID="ddlTitle">Title:</asp:Label>
<asp:DropDownList ID="ddlTitle" runat="server" CssClass="Ainput" /><br />
<asp:Label runat="server" ID="lblSurname" AssociatedControlID="txtSurname">Surname: </asp:Label><asp:TextBox runat="server" ID="txtSurname" CssClass="Ainput" /><br />
<asp:Label runat="server" ID="lblForenames" AssociatedControlID="txtForenames">Forenames: </asp:Label><asp:TextBox runat="server" ID="txtForenames" CssClass="Ainput" /><br />
<asp:Label runat="server" ID="lblDOB" AssociatedControlID="txtDOB">Date of Birth: </asp:Label>
<!--<asp:DropDownList runat="server" ID="ddlDOBDay" /> <asp:DropDownList runat="server" ID="ddlDOBMonth" /> <asp:DropDownList runat="server" ID="ddlDOBYear" />-->
<asp:TextBox type="date" runat="server" ID="txtDOB" CssClass="Ainput" />
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtDOB" Type="Date" MinimumValue="01/01/1930" MaximumValue="01/01/2007" Display="Dynamic" ErrorMessage="RangeValidator" ForeColor="Red" CssClass="Ainput">Invalid DOB</asp:RangeValidator>
<br />
<h2>Personal details</h2>
<br />
<asp:Label runat="server" ID="lblStudentNumber2" AssociatedControlID="txtStudentNumber2">Student Number: </asp:Label><asp:TextBox runat="server" ID="txtStudentNumber2" CssClass="Ainput3" /><br />
<asp:Label runat="server" ID="lblEmail" AssociatedControlID="txtEmail"> Email Address: </asp:Label><asp:TextBox runat="server" ID="txtEmail" CssClass="Ainput3" /><br />
</div>
<div class="textRight">
<br />
<asp:Label runat="server" ID="lblDisabilityType" AssociatedControlID="ddlDisabilityType" CssClass="Tinput2">Disability Type: </asp:Label>
<asp:DropDownList ID="ddlDisabilityType" runat="server" CssClass="Ainput2" /><br />
<asp:Label runat="server" ID="lblDisAllowance" AssociatedControlID="ddlDisAllowance" CssClass="Tinput2">Disability Allowance: </asp:Label>
<asp:DropDownList ID="ddlDisAllowance" runat="server" CssClass="Ainput2" /><br />
<asp:Label runat="server" ID="lblEthnicity" AssociatedControlID="ddlEthnicity" CssClass="Tinput2">Ethnicity: </asp:Label>
<asp:DropDownList ID="ddlEthnicity" runat="server" CssClass="Ainput2" /><br />
<asp:Label runat="server" ID="lblCountryofBirth" AssociatedControlID="ddlCountryofBirth" CssClass="Tinput2">Country of Birth: </asp:Label>
<asp:DropDownList ID="ddlCountryofBirth" runat="server" CssClass="Ainput2" /><br />
<asp:Label runat="server" ID="lblNationality" AssociatedControlID="ddlNationality" CssClass="Tinput2">Nationality: </asp:Label>
<asp:DropDownList ID="ddlNationality" runat="server" CssClass="Ainput2" /><br />
<asp:Label runat="server" ID="lblDomicile" AssociatedControlID="ddlDomicile" CssClass="Tinput2">Domicile: </asp:Label>
<asp:DropDownList ID="ddlDomicile" runat="server" CssClass="Ainput2" /><br />
</div>
<div class="container" runat="server" cssclass="tabmenu">
<div class="row">
<div class="col-md-14" runat="server" cssclass="tabmenu">
<div class="tabbable" runat="server" cssclass="tabmenu">
<ul class="nav nav-tabs" runat="server" cssclass="tabmenu">
<li class="active"><a href="#one" data-toggle="tab">Address Details</a></li>
<li><a href="#two" data-toggle="tab">Emergency Contact Details</a></li>
<li><a href="#three" data-toggle="tab">Qualifications</a></li>
<li><a href="#four" data-toggle="tab">Primary Award Registration Details</a></li>
<li><a href="#five" data-toggle="tab">Module Registrations</a></li>
</ul>
<div class="tab-content" runat="server">
<div class="tab-pane active" id="one">
<h2>Address Details</h2>
<asp:Label runat="server" ID="lblHomeAddress" AssociatedControlID="txtHomeAddress" CssClass="Addlabel">Home Address: </asp:Label><asp:TextBox runat="server" ID="txtHomeAddress" Columns="40" Rows="4" TextMode="multiline" CssClass="Addinput" /><br />
<asp:Label runat="server" ID="lblHomePostcode" AssociatedControlID="txtHomePostcode" CssClass="Addlabel2">Home Postcode: </asp:Label><asp:TextBox runat="server" ID="txtHomePostcode" CssClass="Addinput2" /><br />
<asp:Label runat="server" ID="lblHomeOwner" AssociatedControlID="ddlHomeOwner" CssClass="Addlabel2">Home Owner: </asp:Label><asp:DropDownList ID="ddlHomeOwner" runat="server" CssClass="Addinput2">
<asp:ListItem Value="OWN_HOME">OWN HOME</asp:ListItem>
<asp:ListItem Value="PARENT">PARENT</asp:ListItem>
<asp:ListItem Value="OTHER">OTHER</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label runat="server" ID="lblHomePhone" AssociatedControlID="txtHomePhone" CssClass="Addlabel2">Phone Number: </asp:Label><asp:TextBox runat="server" ID="txtHomePhone" CssClass="Addinput2" /><br />
</div>
<div class="tab-pane" id="two">
<h2>Emergency Contact Details</h2>
<asp:Label runat="server" ID="lblEmergencyRelationship" AssociatedControlID="ddlEmergencyRelationship" CssClass="Emlabel">Emergency Relationship: </asp:Label><asp:DropDownList ID="ddlEmergencyRelationship" runat="server" CssClass="Eminput">
<asp:ListItem Value="PARENT">PARENT</asp:ListItem>
<asp:ListItem Value="PARTNER">PARTNER</asp:ListItem>
<asp:ListItem Value="SPOUSE">SPOUSE</asp:ListItem>
<asp:ListItem Value="SIBLING">SIBLING</asp:ListItem>
<asp:ListItem Value="SIBLING">FRIEND</asp:ListItem>
<asp:ListItem Value="SIBLING">OTHER</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label runat="server" ID="lblEmergencyName" AssociatedControlID="txtEmergencyName" CssClass="Emlabel">Emergency Name: </asp:Label><asp:TextBox runat="server" ID="txtEmergencyName" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblEmergencyPostcode" AssociatedControlID="txtEmergencyPostcode" CssClass="Emlabel">Emergency Postcode: </asp:Label><asp:TextBox runat="server" ID="txtEmergencyPostcode" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblEmegencyPhone" AssociatedControlID="txtEmergencyPhone" CssClass="Emlabel">Emergency Phone:</asp:Label><asp:TextBox runat="server" ID="txtEmergencyPhone" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblEmergencyAddress" AssociatedControlID="txtEmergencyAddress" CssClass="Emlabel2">Emergency Address: </asp:Label><asp:TextBox runat="server" ID="txtEmergencyAddress" Columns="40" Rows="4" TextMode="multiline" CssClass="Eminput2" /><br />
<br />
</div>
<div class="tab-pane" id="three">
<h2>Qualifications</h2>
<br />
<asp:Label runat="server" ID="lblQualSubject" AssociatedControlID="ddlQualSubject" CssClass="Emlabel"> Qualification Subject/Code: </asp:Label><asp:DropDownList ID="ddlQualSubject" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblQualYear" AssociatedControlID="txtQualYear" CssClass="Emlabel"> Qualification Year: </asp:Label><asp:TextBox ID="txtQualYear" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblQualGrade" AssociatedControlID="txtQualGrade" CssClass="Emlabel"> Qualification Grade: </asp:Label><asp:TextBox ID="txtQualGrade" runat="server" CssClass="Eminput" /><br />
</div>
<div class="tab-pane" id="four">
<h2>Primary Award Details</h2>
<br />
<asp:Label runat="server" ID="lblAward" AssociatedControlID="ddlAward" CssClass="Emlabel">Award: </asp:Label><asp:DropDownList ID="ddlAward" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblTarget" AssociatedControlID="ddlTarget" CssClass="Emlabel">Target: </asp:Label><asp:DropDownList ID="ddlTarget" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblRag" AssociatedControlID="ddlRag" CssClass="Emlabel">Rag: </asp:Label><asp:DropDownList ID="ddlRag" runat="server" OnSelectedIndexChanged="ddlRag_SelectedIndexChanged" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblRasp" AssociatedControlID="ddlRasp" CssClass="Emlabel">Rasp: </asp:Label><asp:DropDownList ID="ddlRasp" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblHighestQual" AssociatedControlID="ddlHighestQual" CssClass="Emlabel">Highest Qualification:</asp:Label><asp:DropDownList ID="ddlHighestQual" runat="server" CssClass="Eminput" /><br />
</div>
<div class="tab-pane" id="five">
<h2>Module registrations</h2>
<br />
<asp:Label runat="server" ID="lblModuleCode" AssociatedControlID="ddlModuleCode" CssClass="Emlabel">Module Name:</asp:Label>
<asp:DropDownList ID="ddlModuleCode" runat="server" CssClass="Eminput" />
<br />
<asp:Label runat="server" ID="lblModuleRun" AssociatedControlID="ddlModuleRun" CssClass="Emlabel">Module Run:</asp:Label>
<asp:DropDownList ID="ddlModuleRun" runat="server" CssClass="Eminput" />
<br />
<asp:Label runat="server" ID="lblPoA" AssociatedControlID="ddlPoA" CssClass="Emlabel">Pattern of Attendance:</asp:Label>
<asp:DropDownList ID="ddlPoA" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblFeeStatus" AssociatedControlID="ddlFeeStatus" CssClass="Emlabel">Fee Status:</asp:Label>
<asp:DropDownList ID="ddlFeeStatus" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblIncomeStatus" AssociatedControlID="ddlIncomeStatus" CssClass="Emlabel">Income Status:</asp:Label>
<asp:DropDownList ID="ddlIncomeStatus" runat="server" CssClass="Eminput" /><br />
<asp:Label runat="server" ID="lblSponsors" AssociatedControlID="ddlSponsor" CssClass="Emlabel">Sponsors:</asp:Label>
<asp:DropDownList ID="ddlSponsor" runat="server" CssClass="Eminput" /><br />
</div>
</div>
</div>
</div>
</div>
</div>
And relevant CSS
.tabmenu {
position: absolute;
left: 150px;
border: 1px solid #ccc;
border-radius:8px;
background-color: #f1f1f1;
align-items:center;
font-size: 20.6px;
font-weight:300;
margin:-8px 10px 10px;
}
Aucun commentaire:
Enregistrer un commentaire