I have a simple page for a chat system.
Test page can be found here: http://komasurfer.com/chat-test/
Here's the code:
<html>
<head>
<style type="text/css">
#page-wrap {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
/*for sidebar*/
margin-right: -110px;
background-color: #AAAAFF;
}
#chat-wrap {
border: 1px solid #eee;
margin: 0 5px 10px 0;
float: left;
/*margin for sidebar*/
margin-right:115px;
border: 1px solid red;
background-color: #600000; }
#chat-area {
width:100%;
height: 400px;
border: 1px solid #666;
float: left;
}
#sidebar {
border: 1px solid green;
float: right;
width: 110px;
padding: 0px 0px 0px 5px;
}
#entry {
background-color: #ffffff;
padding: 5px;
font-size: 1em;
clear: both;
border: 3px solid #999;
height: 40px;
width: 97%; }
#entry-btn {
padding: 18px;
float: right; }
.left {float: left; }
.right {float: right; }
.c {clear: both; }
</style>
</head>
<body>
<div id="page-wrap">
<div id="sidebar">
SIDEBAR
</div>
<div id="chat-wrap">
<div id="chat-area">
<div id="loading">connecting to server...</div>
</div>
</div>
<div class="c"></div>
<form id="send-message-area">
<div>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr><td align="left" width="98%" style="padding-right:5px;">
<textarea tabindex="1" maxlength="2000" id="entry"></textarea>
</td><td align="right">
<input id="entry-btn" type="button" value="Send">
</td></tr></tbody></table>
</div>
</form>
</div>
</body>
</html>
I've been trying for a very long time now to get the red box (with the contents of the chat) to expand to the sidebar.
If I add a width of 100% to that box, it always disregards the margin that I set for the sidebar and expands to the width of the container box.
How can I make the red chat area expand to the sidebar (minus a safety margin of 5 pixels)?
The layout is a floating one, so I cannot work with absolute measurements. And the sidebar should be 110 pixels.
Remove float:left from chat-wrap and increase the right margin like this:
#chat-wrap {
background-color: #600000;
border: 1px solid red;
margin: 0 136px 10px 0;
}
Related
I'm trying to make a comment box that is horizontal with the name box, because the text box was fixed on the top. When I tried to apply margin-top on the text area and form, it moves the name box and the whole entire profile down with it. Is there a way to move the text area down, without affecting anything else. Here is my code:
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label for="fname">Profile Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
Another option is to put a position to the label tag and this tag have a relative position and you can change top and right to move when you want.
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
label{
position:relative;
top:50px;
right:100px;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label class="label-prueba" for="fname"> Profile <br> Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
I have seen your code and found your problem, my suggestion is kindly add two property to your .textarea class and that is position:relative and top as per your requirement.
textarea{
position:relative;
top:100px;
}
try margin-top with a negative value, for instance: margin-top: -2px;
I'm coding my first website as a favor and there's some unwanted white space at the bottom that won't go away.
I've checked all the usual solutions like giving the body & footer heights, and setting bottom margins & padding to 0 but they don't seem to be working.
Could somebody please take a look at the code (linked below) and let me know what I'm doing wrong?
https://jsfiddle.net/cshotter/s9k1w6z7/
CSS
<!DOCTYPE html>
<html>
<head>
<title>Quality Precast Concepts</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
background-color: #EEEEEE;
}
a:link {
color: #111111;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.break {
clear: both;
}
#container {
width: auto;
}
#header {
width: 100%;
height: 163px;
color: #FFFFFF;
background-color: #DDDDDD;
}
.fixedwidthheader {
width: 1000px;
background-color: #D2691E;
margin: 0 auto;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
.fixedwidthbody {
width: 1000px;
background-color: #EEEEEE;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
.fixedwidthfooter {
width: 1000px;
background-color: #D2691E;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
#toplogodiv {
float: left;
padding-top: 10px;
padding-left: 10px;
margin: 0 auto;
}
#toplogodiv img {
height: 120px;
}
#headercontactinfo {
width: 300px;
text-align: right;
float: right;
position: relative;
top: 46px;
margin: 0 auto;
font-size: 1.1em;
}
#headercontactinfo p {
padding-right: 10px;
}
#headermenudiv {
position: relative;
top: 9px;
left: -1px;
}
#headermenudiv ul {
background-color: #333333;
padding: 0;
margin: 0;
height: 20px
}
#headermenudiv li {
list-style: none;
font-size: 0.8em;
float: left;
padding: 0px 10px 0 10px;
border-right: 1px solid #D2691E;
background-color: none;
margin-top: 3px;
}
#midsection {
color: #333333;
width: auto;
background-color: #DDDDDD;
}
#midsection img {
width: 1000px;
height: 360px;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 1px black;
}
#maincontent {
padding: 10px 0 20px 10px;
background-color: #EEEEEE;
position: relative;
top: -24px;
}
.list {
padding-left: 10px;
}
#frontpagemap {
padding: 0;
margin: 0;
float: right;
position: relative;
top: -310px;
left: -50px;
}
#base {
background-color: #DDDDDD;
width: 100%;
height: 160px;
color: white;
}
#footer {
height: 65px;
}
#footer img {
position: relative;
top: -30px;
left: 10px;
width: 140px;
}
#footercontact {
float: right;
position: relative;
top: -8px;
left: -10px;
}
#designtag {
float: left;
height: 20px;
}
</style>
</head>
HTML
<body >
<div id="container">
<div id="header">
<div class="fixedwidthheader" id="border">
<div id="toplogodiv">
<img src="images/logo.png">
</div>
<div id="headercontactinfo">
<p>03 347 4768</p>
<p>sales#qualityprecast.co.nz</p>
</div>
<div class="break"></div>
<div id="headermenudiv">
<div class="fixedwidthheader">
<ul>
<li>Home</li>
<li>Products</li>
<li>Projects</li>
<li>About Us</li>
<li>The Team</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="break"></div>
<div id="midsection">
<div class="fixedwidthbody">
<img src="images/header.jpg">
<div id="maincontent">
<h1>Welcome to Quality Precast Concepts</h1>
<h3>Quality Precast & Prestressed Concrete made in Christchurch</h3>
<p>We are a Canterbury born and bred company located on Christchurch’s doorstep – Rolleston. Our aim is to be the supplier of choice for high quality precast & prestressed products. Because of our locastion and adaptable set-up, we are able offer an extensive and complete range of manufacturing and product options to meet your precast concrete needs.</p>
<p>Our areas of expertise include:</p>
<p class="list"><strong>Prestressed</strong></p>
<ul>
<li>Unispan</li>
<li>Flat Slab</li>
<li>Interspan (rib & infill system)</li>
<li>Double Tees</li>
<li>Hollow Core</li>
</ul>
<p class="list"><strong>Precast</strong></p>
<ul>
<li>Tilt Slab Panels</li>
<li>Beams</li>
<li>Columns</li>
<li>Spandrels</li>
<li>Bleachers</li>
<li>Stairs & Landings</li>
</ul>
<div id="frontpagemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.8448452950684!2d172.3751009160351!3d-43.58894799364694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d32033a1f3d6193%3A0xa416fb59f65b7fab!2s889+Jones+Rd%2C+Rolleston+7675!5e0!3m2!1sen!2snz!4v1450467163060" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="base">
<div class="fixedwidthfooter">
<div id="footer">
<img src="images/logo.png">
<div id="footercontact">
<p>Contact us today | 03 347 4768 | sales#qualityprecast.co.nz</p>
<p>889 Jones Road, Rolleston, Christchurch</p>
</div>
<div id="designtag">
Website by CSWeb-Design
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It has to do with the map styles that you've included. You're doing some positioning on frontpagemap that is causing the extra whitespace.
#frontpagemap {
padding: 0;
margin: 0;
float: right;
position: relative;
top: -310px;
left: -50px;
}
Basically, when you do position: relative; the element takes the space that it would normally take up, but you just kind of made it look like it was up higher with top: -310px. It still, technically, takes up the space that it normally took up.
A quick fix would be to use margin-top instead. Which will actually move the element and the space it is taking up, as opposed to just making it appear as though it was positioned up higher.
Your footer is smaller than the footer's container. That's why there's empty space.
Either remove the height:160px from #base or add a position:relative to it, then position:absolute; bottom:0px to .fixedwidthfooter (both have slightly different results).
You're setting the 'base' height to 160px. No need, try getting rid of that.
You need to remove height from the base class
#base {
background-color: #DDDDDD;
width: 100%;
/*height: 160px;*/
color: white;
}
I have updated jsfiddle to show a way to remove the whitespace from the bottom.
I made two changes to the css. I changed the #base height to auto and I changed the height of the .footer img to 20px. You will of course want to use a height for the image that is appropriate. The point I wanted to illustrate is that part of the issue is that the image height is pushing things down.
Please mark this as the accepted answer if it fixes your issue.
I've been trying to vertically center some images in my code, and I finally got a solution working on JSFiddle but when I try to paste the same code to a html file the contents aren't centered. Here is the fiddle: http://jsfiddle.net/kf8mksy0/ and the images are centered vertically:
But when I try to paste the code:
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100% !important;
font-size: 100%;
-webkit-text-size-adjust:none;
background-color: #FAFAFA
}
#header {
background-color: #FFF;
height: 53px;
padding: 19px 0;
border-top: 6px solid #000;
border-bottom: 1px solid #000;
min-width: 450px;
margin: auto;
}
#header-content-left {
float: left;
padding: 0 0 0 5%;
height: 53px;
}
#header-content-center-1{
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 2%;
border-left: 1px solid #000;
margin: auto;
}
#header-content-center-2{
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 1%;
margin: auto;
}
#header-content-right {
float: right;
height: 53px;
padding: 0 5% 0 2%;
border-left: 1px solid #000;
}
#header-content-center-1 img, #header-content-center-2 img {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div id="header">
<div id="header-content-left"><img src="http://lorempixel.com/150/50/" width="175" height="53"/></div>
<div id="header-content-right"><img src= "http://lorempixel.com/150/50/" width="96" height="52" /></div>
<div id="header-content-center-1"><img src="http://lorempixel.com/150/50/" width="78" height="12" /></div>
<div id="header-content-center-2"><img src="http://lorempixel.com/150/50/" width="76" height="12" /></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The small buttons aren't centered vertically anymore:
I have tried the same code in Chrome, Firefox and IE so I'm sure it's not just browser-wide. Am I missing some declaration? I have DOCTYPE, xlmns and meta tag declarations on my final html but it is not working there either.
JSfiddle uses html5 declaration.
You can change this from the fiddle options on the left.
I used this code in a simple html page and works fine in chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
width: 100% !important;
font-size: 100%;
-webkit-text-size-adjust:none;
background-color: #FAFAFA
}
#header {
background-color: #FFF;
height: 53px;
padding: 19px 0;
border-top: 6px solid #000;
border-bottom: 1px solid #000;
min-width: 450px;
margin: auto;
}
#header-content-left {
float: left;
padding: 0 0 0 5%;
height: 53px;
}
#header-content-center-1 {
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 2%;
border-left: 1px solid #000;
margin: auto;
}
#header-content-center-2 {
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 1%;
margin: auto;
}
#header-content-right {
float: right;
height: 53px;
padding: 0 5% 0 2%;
border-left: 1px solid #000;
}
#header-content-center-1 img, #header-content-center-2 img {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div id="header">
<div id="header-content-left">
<img src="http://lorempixel.com/150/50/" width="175" height="53" />
</div>
<div id="header-content-right">
<img src="http://lorempixel.com/150/50/" width="96" height="52" />
</div>
<div id="header-content-center-1">
<img src="http://lorempixel.com/150/50/" width="78" height="12" />
</div>
<div id="header-content-center-2">
<img src="http://lorempixel.com/150/50/" width="76" height="12" />
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
UPDATE:
How "DOCTYPE" affects the rendering of HTML elements on different browsers?
Different browsers render the different tags differently. Whenever we define a DOCTYPE, it means we are telling to the browser that HTML Standards of the specified DOCTYPE have been used.
Doctype info
Use the standard HTML5 doctype. That seemed to do the trick across the IDEs/browsers I have installed, but I'm not sure why 4.01/etc..doesn't work.
EDIT: Ah bollocks, idioteque found it...nice catch buddy!
List item
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too
This should be an easy one for someone. I am creating tabs with CSS (please, I don't need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my "tab bar" don't line up. I do not know why.
The HTML:
<html>
<head>
<link rel="stylesheet" href="prototype.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
</div>
</div>
</div>
</body>
<html>
The CSS:
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
}
I appreciate any help.
Try: http://jsfiddle.net/dYz9k/1/
.tab {
border: 1px solid black;
border-top: 0;
margin-left: 5px;
padding: 3px;
display: inline-block
}
I set display: inline-block, and removed the margin-top and border-top.
display: inline-block allows the padding to work as you're expecting.
Hm..not 100% certain if that'a what you're asking, but try setting padding:0 on .tab class
Have you considered using a list, better for Accessibility
Example here http://jsfiddle.net/hdhkn/
HTML
<html>
<head>
</head>
<body>
<div id="container">
<div id="content">
<ul id="tabs">
<li id="tab0" class="tab">
No Circuit
</li>
<li id="tab1" class="tab">
Digital Inputs
</li>
</ul>
</div>
</div>
</body>
<html>
CSS
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
list-style:none;
height:40px;
}
.tab {
border: 1px solid black;
border-top:none;
margin-left: 5px;
padding: 3px;
float:left;
display:block;
}
Is this what you want to accomplish? Or do you want your tabs(.tab) to be on top of #tabs?
I've added overflow: hidden to #tabs and changed the margin-left to margin-right.
You're putting padding on inline elements (the tabs), that always causes unexpected results.
Cleaned it up a bit for you.
<html>
<head>
<style type="text/css">
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
width: 868px;
}
#tabs {
border-bottom: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
border-bottom:0px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
float:left;
}
.clear {
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
<span class="clear"></span>
</div>
</div>
</div>
</body>
<html>