I’m pretty new to HTML and CSS, and I’m currently working on an internal webpage for work. I’ve got almost all functionality done so I’ve started going back and finding things to clean up in the code and ways to make the page look a little nicer. I’m hoping maybe I can get some tips on one particular page. It was the first one I did and I’ve gotten a lot of backlash on how I handled some things. Here’s a short explanation of the page, take note that this is also an asp.net project: At the top of the page is the title, followed directly by a video that is put there by using a content management system and asp.net code. Below that there is a large space where there are actually 4 overlapping text blocks, but only one is visible when the page loads. Below the text are 4 buttons. Each button makes the current text become invisible and the associated text become visible. I’ve had some people tell me to try to do this all in Javascript, but this was after I had almost the whole page done, and to be honest, I’m about as experience with Javascript as I am with HTML and CSS. One major question I have is regarding the overlapping text. Everyone seems to think it’s bad for me to use position:absolute in my CSS, but I can’t figure out any other way to put the text in the same place. If anyone can look at this page and let me know a better way to do it or a good way to clean it all up, I’m open to all suggestions and constructive criticism! I’m just here to learn!
Someone previously had mentioned since I’m using asp.net and in visual studio I see code that you guys can’t easily use, I should run the page and then grab the source from there, so that is what I have done below. Because of that you will see the layout page joined with the actual page I’m worried about, so there is some code for the menu at the top. I have left off the code at the bottom for the RSS Feeds.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="\css/LayoutStyleSheet.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OurCompany - My ASP.NET Application</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
</head>
<body id="layoutBody" style=" font-family: 'Oswald', sans-serif;">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="spacerDiv">
<a class="navbar-left"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="Browser does not support image."/></a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul id="navigationbar" class="nav navbar-nav">
<li id="homebutton" class="dropdown"><a href="#"><a href="/">Home</a></a></li>
<li class="menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/OurCompany">Our History</a></li>
<li><a href="/OurCompany/Facilities">Facilities</a></li>
</ul>
</li>
<li class="menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
<li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
<li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
<li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
<li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="/FormsHandlers/FAQ">FAQ</a></li>
</ul>
</li>
<li class=" menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">ISS Support</a></li>
<li><a href="#">Purchase Requests</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
<form id="searchbar" method="get">
<input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
<input type="submit" id="searchbutton" value="Go!"/>
</form>
</div><!-- /.navbar-collapse -->
</nav>
<!DOCTYPE Html>
<link href="\css/AboutUsStyleSheet.css" rel="stylesheet" />
<div align="center">
<div>
<h1>About Us</h1>
</div>
<div class="promovid">
<video width="850" height="700" autoplay>
<source src="//videos.contentful.com/6yl0vo95lmum/6iPFqBAYZU6o6C4SQA0SuQ/a591a02b365a5d30cacd23b2909d6747/SC2_Finished_Promo.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
</div>
<div class="text">
<div id="missionstatement"></div>
<div id="missionstatement2">
<div class="vision">
<h3>Vision</h3>
</div>
<div class="missionP1">
<p>
To lead the supply chain services industry through the delivery of high quality service and manufacturing solutions, <br/>while maximizing strategic value to our customers by exceeding expectations and facilitating growth.
</p>
</div>
<div class="mission">
<h3>Mission</h3>
</div>
<div class="missionP2 ">
<p>
SC2, a 100% employee‐owned company, represents a promise to deliver high quality, on time, cost‐effective supply‐chain<br/> Solutions—offering customized services from a team that is committed to excellence.
</p>
</div>
</div>
<div id="esop">
<div class="esoptitle">
<h3>What is ESOP?</h3>
</div>
<div class="esopP1">
<p>
Employee Stock Ownership Plan (ESOP) is a benefit program that provides company stock to its employees. <br/>
Several features make ESOPs unique:<br/>
<li>
An ESOP is required by law to invest primarily in the securities of the sponsoring employer.<br/>
</li>
<li>
An ESOP is unique among qualified employee benefit plans in its ability to borrow money.<br/>
</li>
<li>
As a result, "leveraged ESOPs" may be used as a value-added advantage to corporate finance.<br/>
</li>
<li>
All full-time employees participate, reaping the benefits of business success.<br/>
</li>
</p>
</div>
<div class="esop1">
<h3>Employee Ownership Makes a Difference</h3>
</div>
<div class="esopP2">
<p>
There are approximately 11,000 employee-owned companies in the United States; only about 1,000 of those are 100% owned by employees.<br/><br/>
At SC2, the success and growth of our employee-owners is directly related to the success and growth of our company. Everyone at SC2 has a vested interest in the success of the company which prodcues a competitive advantage.<br/><br/>
Business ownership fills our employees with pride. Our talented and experienced employee owners take great pride in servicing our customers. Employees are rewarded through increased compensation and rising stock valuations.<br/><br/>
The commitment and dedication associated with employee ownersehip has continued to be the recipe for our Success.<br/>
</p>
</div>
</div>
<div id="sc2difference">
<div class="sc2title1">
<h3>The Difference</h3>
</div>
<div class="sc2P1">
<p>
At SC2 Supply Chain Services & Solutions we do more than provide a service, we offer customized supply chain solutions which provide unmatched value in our industry. We offer:
</p>
</div>
<div class="sc2title2">
<h3>Expertise & Technology</h3>
</div>
<div class="sc2P2">
<p>
For over 25 years, SC2 has provided supply chain services and solutions to Tier 1 & Tier 2 Manufacturers and OEMs. Throughout this time, we have invested in the technology and the techniques that ensure quality excellence and efficient delivery. SC2 combines our experience and industry leading systems (Warehouse Management System (WMS), Quality Management System (QMS) and Safety Management System (SMS)) with partners like the world’s largest construction equipment manufacturer to maximize total customer satisfaction.
</p>
</div>
<div class="sc2title3">
<h3>Variety & Flexibility</h3>
</div>
<div class="sc2P3">
<p>Because all companies have unique needs, SC2 provides a one-stop shop for supply chain solutions. From finishing and fabrication to manufacturing support and asset recovery, we work closely with our partners to evaluate services that provide maximum value supply chain solutions.</p>
</div>
<div class="sc2title4">
<h3>Precision & Efficiency</h3>
</div>
<div class="sc2P4">
<p>Every part, every piece, every dollar and every minute counts in this industry. That’s why we’ve spent the last two decades developing and refining our systems to provide precise and efficient solutions for our partners. These superior systems ensure that we are always on time and always the best value.</p>
</div>
<div class="sc2title5">
<h3>Quality & Continuous Improvement</h3>
</div>
<div class="sc2P5">
<p>When you partner with SC2, you team with a company that will ensure quality excellence now and in the future. Our systems ensure real-time visibility of internal and external errors. Through Six Sigma and Lean we can guarantee action, elimination of waste and sustainability. We are not only dedicated to quality excellence today, but are devoted to solutions that will provide you with continued cost savings and maximum value.</p>
</div>
<div class="sc2title6">
<h3>Ownership & Commitment</h3>
</div>
<div class="sc2P6">
<p>Unlike any other in our industry, SC2 is proud to be 100% employee owned. Our partners benefit from a motivated and committed workforce that has a vested interest in achieving excellence. Workforce optimization has proven to be a strategic advantage.</p>
</div>
</div>
<div id="ourhistory">
<div class="historytitle">
<h3>Our History</h3>
</div>
<div class="historyP">
<p>
In 1983, Superior Blasting & Painting Inc. opened in Tremont,IL. The business grew over the next five years and in 1987 the company became the supplier in world-wide product returns for a local fortune 500 company. In 1988, the employees purchased the company through an ESOP (Employee Stock Ownership Plan). In the early 1990's, we added many new services such as commercial packaging and sub-assembly.
The company was renamed Superior Consolidated Industries to reflect the new and diverse service offerings. In 1996, we relocated our headquarters to Peoria while expanding to include in-house services and warehouse management. In 2000, we opened two locations in East Peoria to facilitate growth and improve paint operations. By December 2002, we again changed our company name to SC2 Supply Chaing Services to realign with our updated corporate identity and image.
Within the last six years, SC2 has continued to grow in both size and services. In 2004, SC2 acquired NuAir Filter Corporation located in Bloomington/Normal, IL. The addition of NuAir provided many new service offerings such as air filteration, fabrication, kitting, sequencing and in-house maintenance. In the last 3 years, we have added logistics facilities in Mossville and Bartonville, IL. as well as Waco, TX.
Today, our thousands of dedicated employee-owners at our 11 facilities have a personal stake in SC2's success as our customers' satisfaction. We combine efforts to achieve the growth, expansion and diversification necessary to define our future. <br/><br/>
Our Corporate Operating System is outlined by the following principles: <br/>
<ul>
<li>Safety First</li>
<li>Continuous Improvement</li>
<li>Total Customer Satisfaction</li>
<li>Achieve Excellence</li>
</ul>
</p>
</div>
</div>
</div>
<div id="container">
<br>
<ul id="nav">
<li> <a href="#missionstatement">
<div id="start">
<div id="oval"><br/> Mission Statement
</div>
</div></a> </li>
<li> <a href="#esop">
<div id="oval"><br/> ESOP
</div></a> </li>
<li> <a href="#sc2difference">
<div id="oval"><br/> SC2 Difference
</div></a> </li>
<li> <a href="#ourhistory">
<div id="oval"><br/> Our History
</div></a> </li>
</ul>
<script>
function init() {
document.getElementById('start').click();
}
init();
</script>
<br style="clear: both">
</div>
<p> </p>
</div>
CSS:
h1 {
color: white;
padding: 0;
}
.promovid {
height: 42em;
width: 100%;
margin-top: 0%;
padding-top: 0%;
}
.text {
position: relative;
color: white;
width: 100%;
height: 35em;
text-align: left;
padding: 10px;
}
/*Mission Statement Start*/
.vision {
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-left: 12%;
}
.missionP1 {
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: 8%;
margin-left: 12%;
}
.mission {
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: 15%;
margin-left: 12%;
}
.missionP2 {
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: 21%;
margin-left: 12%;
}
/*Mission Statement End*/
/*Our History Start*/
.historytitle {
position: absolute;
top: 0%;
left: 0;
right: 0;
margin: auto;
margin-left: 10%;
}
.historyP {
position: absolute;
top: 10%;
left: 0;
right: 0;
margin: auto;
width: 80%;
}
/*Our History End*/
/*ESOP Start*/
.esoptitle {
position: absolute;
top: 0%;
left: 0;
right: 0;
margin: auto;
margin-left: 11%;
}
.esopP1 {
position: absolute;
top: 0%;
left: 0;
right: 0;
margin: auto;
margin-top: 4%;
margin-left: 11%;
}
.esop1 {
position: absolute;
top: 0%;
left: 0;
right: 0;
margin: auto;
margin-top: 16%;
margin-left: 11%;
}
.esopP2 {
position: absolute;
top: 0%;
left: 0;
right: 0;
margin: auto;
margin-top: 22%;
margin-left: 11%;
}
/*ESOP End*/
/*SC2 Difference Start*/
.sc2title1 {
position: absolute;
top: 0%;
left: 0;
margin: auto;
margin-left: 1%;
}
.sc2P1 {
position: absolute;
top: 0%;
left: 0;
margin: auto;
width: 45%;
margin-top: 4%;
margin-left: 1%;
}
.sc2title2 {
position: absolute;
top: 0%;
left: 0;
margin: auto;
margin-top: 10%;
margin-left: 1%;
}
.sc2P2 {
position: absolute;
top: 0%;
left: 0;
margin: auto;
width: 45%;
margin-top: 15%;
margin-left: 1%;
}
.sc2title3 {
position: absolute;
top: 0%;
left: 0;
margin: auto;
margin-top: 24%;
margin-left: 1%;
}
.sc2P3 {
position: absolute;
top: 0%;
left: 0;
margin: auto;
width: 45%;
margin-top: 29%;
margin-left: 1%;
}
.sc2title4 {
position: absolute;
top: 0%;
right: 24.5%;
margin: auto;
margin-right: 1%;
}
.sc2P4 {
position: absolute;
top: 0%;
right: 0;
margin: auto;
width: 45%;
margin-top: 4%;
margin-right: 1%;
}
.sc2title5 {
position: absolute;
top: 0%;
right: 12%;
margin: auto;
margin-top: 10%;
margin-right: 1%;
}
.sc2P5 {
position: absolute;
top: 0%;
right: 0;
margin: auto;
width: 45%;
margin-top: 15%;
margin-right: 1%;
}
.sc2title6 {
position: absolute;
top: 0%;
right: 20%;
margin: auto;
margin-top: 24%;
margin-right: 1%;
}
.sc2P6 {
position: absolute;
top: 0%;
right: 0;
margin: auto;
width: 45%;
margin-top: 29%;
margin-right: 1%;
}
/*SC2 Difference End*/
#nav li {
float: left;
list-style: none;
text-align: center;
width: 18em;
height: 10em;
margin-left: 6%;
}
#nav li a {
text-decoration: none;
font-size: 1.2em;
}
#nav li a div:hover {
background-color: lightgrey;
}
#missionstatement2, #ourhistory, #esop, #sc2difference {
display: none;
}
#ourhistory:target, #esop:target, #sc2difference:target {
display: block;
animation: highlight 3s forwards;
}
#missionstatement {
position :fixed;
height:0;
width:0;
}
#missionstatement:target + #missionstatement2 {
display: block;
animation: highlight 3s forwards;
}
#oval {
width: 240px;
height: 120px;
background: #9bb9d4;
-moz-border-radius: 135px / 75px;
-webkit-border-radius: 135px / 75px;
border-radius: 135px / 75px;
padding: 5px;
margin: 8px 8px;
font-size: 1.5em;
}
#start {
-moz-border-radius: 135px/75px;
-webkit-border-radius: 135px/75px;
border-radius: 135px/75px;
width: 240px;
height: 120px;
}
#container {
color: white;
min-height: 200px;
padding: 5px;
}