What's new
By:
Filters
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

STUCK ON THIS FOR OVER A WEEK! PLEASE HELP ME

K

ksbyers

New member
Ok so i am new to all of this and i have been having a really hard time figuring this out. I need to be able to have a top nav bar which i am actually using as a table of contents and then i need a side nav bar which is being used to open up different sections that the user will need to access/see this is not for a website this is actually for a call center script. Please any advise will be very helpful please just take it easy on me the last forum i tried to join was not very nice...
below is the css i will post the html after as it is too long to add



<!DOCTYPE html>
<html>

<!USE THIS TO SET THE STYLE>

<!THIS IS THE START OF CSS DO NOT EDIT>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
background-color: #999999;
overflow: auto;
white-space: nowrap;
}

div.scrollmenu a {
display: inline-block;
color: blue;
text-align: center;
padding: 14px;
text-decoration: none;
}

div.scrollmenu a:hover {
background-color: #777777;
}
* {box-sizing: border-box}

body {font-family: "Lato", sans-serif;}



/* Style the tab */

.tab {

float: left;

border: 2px solid #fff;

background-color: #fff;

width: 18%;

height: 200px;
position: fixed;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 25px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.03s;
font-size: 20px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #fff;
}

/* Create an active/current "tab button" class */
.tab button.active {
background-color: #acdd;
}

/* Style the tab content */
.tabcontent {
float: right;
padding: 0px 200px;
border: 1px solid #fff;
width: 80%;
border-left: none;
height: auto;


}
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin-top:0in;
margin-right:0in;
margin-bottom:8.0pt;
margin-left:0in;
line-height:105%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Calibri";
mso-bidi-theme-font:minor-bidi;}
/*THIS SETS THE STYLE FOR ANY SECTIONS SHOWN WITH HEADINGS OF DETAILS*/

details {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
font-family: Calibri;
font-size: 24px
/*THIS SETS THE STYLE FOR ANY SUB SECTION 1'S HEADINGS*/
}
#sub1 {
font-family: "Calibri", sans-serif;
font-size: 23px;
color: blue;
font-weight: bold;
}
/*THIS SETS THE STYLE FOR ANY AGENT REMINDER SECTIONS*/

#agent {
color: red;
font-family: "Calibri", sans-serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
text-align: left;

}

/*THIS SETS THE STYLE FOR ANY PLACEHOLDERS THAT FIVE9 READS*/

#placeholders {
color: red;
font-family: "Calibri", sans-serif;
font-size: 22px;
font-style: italic;
}
/*THIS SETS THE STYLE FOR ALL CLOSED HEADINGS*/

details > summary {
padding: 10px 5px;
background-color: #fff;
border: none;
box-shadow: 4px 3px 4px white;
cursor: pointer;
font-family: Calibri;
font-size: 20px;
text-align: left
}
/*THIS SETS THE STYLE FOR ALL AGENT TO READ TO CUST SECTIONS*/

details > p {
border-radius: 0 0 10px 10px;
background-color: #fff;
padding: 5px 10px;
margin: 0;
font-family: Calibri;
font-size: 22px
}
/*THIS SETS THE STYLE FOR ALL OPEN HEADINGS*/

details[open] > summary {
background-color: #ccf;
border-bottom: 1px solid #aaa;
margin-bottom: 0em;
font-family:Calibri;
font-size: 24px;
text-align: left
}
/*THIS SETS THE ARROW TO BE LINED UP WITH THE TEXT*/

details summary > * {
display: inline;
}
/*THIS SETS THE STYLE FOR ALL OPEN HEADINGS SHOWN AS DETAILS*/

details[open] {
padding: 5px;
background-color: #fff;
margin-bottom: 20px;
font-family: Calibri;
font-size: 24px;
text-align: left
}
/*THIS SETS THE STYLE FOR THE SCRIPT HEADING WITH PROGRAM NAME PH NUMBER ETC*/

body {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
font-family: Calibri;
font-size: 24px;
text-align: center;
}
hr {
position: relative;
border: none;
height: 5px;
background: black;
margin-bottom: 5px;
}
/*THIS IS THE END OF CSS DO NOT EDIT*/
</style>
 
I WILL HAVE TO MAKE ANOTHER COUPLE OF POSTINGS AS MY CODE IS VERY LONG

<body>

<div class="tab">
<button class="tablinks" onclick="openCCNX(event, 'Script')" id="defaultOpen">Script</button>
<button class="tablinks" onclick="openCCNX(event, 'Spanish Script')">Spanish Script</button>
<button class="tablinks" onclick="openCCNX(event, 'Report Same Day Reschedule')">Report Same Day Reschedule</button>
<button class="tablinks" onclick="openCCNX(event, 'PDS ONLY Create New Zendesk Ticket')">PDS ONLY BELOW</button>
<button class="tablinks" onclick="openCCNX(event, 'PDS ONLY Create New Zendesk Ticket')">PDS ONLY Create New Zendesk Ticket</button>
<button class="tablinks" onclick="openCCNX(event, 'PDS ONLY DispatchTracker')">PDS ONLY DispatchTracker</button>

</div>
<div id="Script" class="tabcontent">
<h3></h3>
<p>


<div align=center>
<h2>Table of Contents</h2>
<p>Click on the section you wish to go to below:</p>

<div class="scrollmenu">
<a href="#Heading">Heading</a>
<a href="#GENERAL_GREETING">General Greeting</a>
<a href="#EXISTING_OR_NEW">Existing Or New</a>
<a href="#PICKUP_NEW_ORDER">Pickup Options For A New Order</a>
<a href="#OWNER_NEW_ORDER">New Orders: Are You The Owner Of The Appliance?</a>
<a href="#LANDLORD_FORM_NEW_ORDER">New Orders (if landlord form is needed)</a>
<a href="#LANDLORD_FORM_EXISTING">Existing Orders (if landlord form is needed)</a>
<a href="#CUSTOMER_DEMOGRAPHICS">Customer Demographics (Spell And Read back)</a>
<a href="#ADDITIONAL_INFO">Additional Info Tab</a>
<a href="#STAIRS_NEW_ORDER">New Orders: STAIRS</a>
<a href="#UNIT_INFO">Collect Unit Information</a>
<a href="#SURVEY_QUESTIONS">Ask Survey Questions in Survey Tab</a>
<a href="#INCENTIVE">Review Incentive Type, Amount, Mailing Address, And Timeframe</a>
<a href="#IN_HOME_REMINDERS">In Home Pick-up Reminders</a>
<a href="#OUTSIDE_REMINDERS">Outside No Contact Pick-up Reminder</a>
<a href="#CLOSING">Closing Statement</a>
<a href="#COMPLAINT">Complaint or Escalation Process</a>
<a href="#SCRIPT_HISTORY">Work</a>
<a href="#work">Script History And Updates</a>
</center>

</div>
 
You must log in or register to reply here.

Similar threads

X
Rocket League's Nike FC Cup Event kicks off next week
Replies
0
Views
220
xinghong
X
X
Rocket League Season four is arriving later this week for all structures
Replies
0
Views
231
xinghong
X
D
Where is the padding coming from - Help please
Replies
0
Views
90
daverudge1966
D
S
Please help me for the media queries
Replies
0
Views
176
SMBHTML
S
K
on click button not working. Could you please help me in identifying the bug
Replies
0
Views
533
Kiriti
K
Back
Top