I am trying to learn CSS and as part of it I am trying to recreate the menu on
news.ycombinator.com without looking at how it is organized on the actually page.
Here is my css
body{
margin:0;
}
#outerdiv {
height:100%;
border-left: 2px solid #fcfaf4;
border-right: 2px solid #fcfaf4;
background:#fcfaf4;
position: relative;
left: 15%;
width:70%;
}
#menudiv{
background-color: rgb(255, 102, 0);
height:4%;
width:100%;
white-space:nowrap;
}
#ycimage{
border: 1px solid white;
width="18";
height="18";
padding:1px;
position: relative;
left:2px;
top:2px;
margin:2px;
}
p{
white-space:nowrap;
}
My html
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="outerdiv">
<div id ="menudiv">
<img src="y18.gif" id="ycimage" >
<p>
<b id="companyname" >Hacker News </b>
|
new
|
comments
|
show
</p>
</div>
</div>
</body>
I have tried to define nowrap property on element inside div "menudiv"
HOwever, the word Hacker News appears on the new line, after the image. How can I keep it on the same line?
This is because <p> is for paragraph and clears both sides of it with a new-line. Remove the <p> or set it to be an inline object using Display
Something along the lines of:
p{display:inline;}
Consider using the <span> tag instead of the <p> tag.
I dont think you can achieve the way you have tried.
Make the elements display:inline-block.
body {
margin: 0;
}
#outerdiv {
height: 100%;
border-left: 2px solid #fcfaf4;
border-right: 2px solid #fcfaf4;
background: #fcfaf4;
position: relative;
left: 15%;
width: 70%;
}
#menudiv {
background-color: rgb(255, 102, 0);
height: 4%;
width: 100%;
}
ul {
list-style-type: none;
display: inline-block;
margin: 0;
}
ul li {
display: inline-block;
}
#ycimage {
border: 1px solid white;
width: 18px;
height: 18px;
padding: 1px;
position: relative;
left: 2px;
top: 2px;
margin: 2px;
}
<div id="outerdiv">
<div id="menudiv">
<img src="y18.gif" id="ycimage">
<ul>
<li> <b id="companyname">Hacker News | </b>
</li>
<li>new <strong>|</strong>
</li>
<li>comments <strong>|</strong>
</li>
<li>show</li>
</ul>
</div>
Hope it helps
Related
I am creating a profile page and on that page there is a div which spans 100 percent of the page. After I set the height and margins and refresh page there is a colored div, the height that I want with no white space. When I try to do the same for my end of page and set overflow hidden, instead of the page ending there,I am able to scroll and see the page continuing. My goal is to have all my content in between the whitespace of top and bottom divs. This is not homework, it is my personal project.
Thank You in advance for your help and time.
Attached is my html code:
*{
margin:0px;
padding:0px;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
.vanilla{
position: absolute;
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
The following is what I originally attempted:
#body2{
background-color: rgb(255,253,208);
overflow-x: hidden;
}
#me{
position: absolute;
top: 150px;
left: 435px;
}
.section1{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
:hover{
color: white;
}
#about{
position: relative;
left: 535px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#age{
position: relative;
top: 70px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#education{
position: relative;
top: 440px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
padding-bottom: 0px;
}
#languages{
position: relative;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 10px;
bottom: 40px;
line-height: 36px;
}
#languages ul li {
list-style-type:none;
}
#comp_lang{
position: relative;
bottom: 380px;
left: 815px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
line-height: 36px;
}
#comp_lang ul li {
list-style-type:none;
}
#comp_lang2{
position: relative;
top: -245px;
left: 870px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#comp_lang2 ul li{
list-style-type: none;
}
.remarks{
margin: 0px;
width: 165px;
height: 200 px;
}
#endgame{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
z-index: -2;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="profile.css">
</head>
<body id="body2">
<div id="me">
<img src="profile2.jpg"alt="Hello" height=500px;>
</div>
<div class="section1">
<h1 id="about"><b>Who is Intisar?</b></h1>
</div>
<div id="age">
<h2> Age : </h2>
<h3> I am 23 years old!</h3>
</div>
<div id="education">
<h2> Education : </h2>
<h3>
I am a high-school graduate.<br>
I am in my third year<br>
at something College.<br>
I am studying<br>
Software Development and Design.<br>
Interest in Web Development and Design<br>
</h3>
</div>
<div id="languages">
<h2> Trilingual in :</h2>
<ul>
<li>English</li>
<li>Bengali</li>
<li>Spanish</li>
</ul>
</div>
<div id="comp_lang">
<h2> Computer Lanuguages I am competent in : <br> </h2>
<ul>
<li>Python</li>
<li>C++</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>SQL</li>
<li>PHP</li>
</ul>
</div>
<div id="comp_lang2">
<h2> Lanuguages and software in Progress : </h2>
<ul>
<li>Wordpress</li>
<li>Ruby</li>
</ul>
</div>
<div class="endgame">
<h3>Something</h3>
</div>
</body>
</html>
You can achieve this by css grid, the current approach is not very good.
I wrote a little bit of code for you. If you don't understand it, let me know.
https://www.w3schools.com/cssref/pr_grid-template-rows.asp
It might be tricky for you if you are not fimiliar with grid, so let me know if you need help.
Preview here
<div class="parent">
<header><h1>Header</h1></header>
<main>
<img src="https://images.unsplash.com/photo-1605032659978-a5bd04094a16?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1603943817715-f50e0a2c413a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1605910470315-abac78c52d73?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
</main>
<footer><h1>Footer Content</h1></footer>
</div>
<style>
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
width: 100vw;
}
main{
overflow:auto;
}
// css below this is just for styling
footer, header, main{
padding: 1rem;
text-align: center;
}
footer{
background-color:red;
}
header{
background-color:yellow
}
</style>
Use the Below Code to keep everything within the view-port and work on whitespace area .
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
}
.vanilla{
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
So I am coding my final project for HTML and when formatting pictures, I accidentally put it too far to the right and it extended my web page horizontally and now that I have fixed the image there is a lot of extra space on the right side. The same thing happened vertically but I just set my height to 100% for my body tag and it took care of it, I tried doing this with width but it just shrinks my content while not changing the physical size of the web page. I would appreciate any help you guys could provide. Here is picture of the web page enter image description here
Here is code
<html>
<title> Bodybuilding </title>
<head>
<style>
.image1 {
z-index: -1;
}
.active {
background-color: #000000
}
.image2 {
position: absolute;
right: 26px;
top: 10px;
}
.title {
position: relative;
top: -250px;
border-style: solid;
border-color: #0E878A;
font-size: 49.5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
top: -245px;
background-color: #333;
border-top: 2px solid #bbb;
border-left: 2px solid #bbb;
border-bottom: 2px solid #bbb;
border-radius: 10px;
}
li {
float: left;
border-right: 2px solid #bbb;
}
li a {
display: inline;
color: #0E878A;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 35px;
}
li a:hover {
background-color: #111;
}
h2 {
position: relative;
top: -797px;
}
p {
position: relative;
top: -797px;
font-size: 30px;
}
.arnold {
position: relative;
left : 1130px;
top: -235px;
}
body {
background: linear-gradient(#939FA0,#41858B);
height: 100%;
width: 98.27%;
}
h3 {
position: relative;
top: -765px;
</style>
</head>
<div class="image1">
<img src="bbifbb.png" width="359" height="250">
</div>
<div class="image2">
<img src="bbphil.jpg" width="359" height="250">
</div>
<div class ="title">
<center>
<h1> Bodybuilding </h1>
</center>
</div>
<body bgcolor="#939FA0">
<body>
<ul>
<li><a class = "active" href="bbfinal.html">Home</a></li>
<li>Famous Bodybuilders</li>
<li>Mr. Olympia</li>
<li>Steroids</li>
<li>Modern Bodybuilders</li>
<li>Competitions</li>
<li>Find Competitions</li>
<li>Contact Me</li>
</ul>
<div class ="arnold">
<img src="bbarnold.jpg">
</div>
You are doing the following in your code:
.arnold {
position: relative;
left : 1130px;
top: -235px;
}
Since the position is relative, the left property sets the left edge of all elements with class 'arnold' to be 1130 pixels to the right of their normal position. That results in the extra scroll space to the right.
So, the title asks the whole question pretty much. I just can't get it to work like i'd like. I want it so when I hover over the image the message displays right under it but I can't seem to get that to work. Any suggestions would help!
Here's what I got!
html, body {
background-color: #0A6DFF;
margin: 0;
padding: 0;
}
.cont img{
position: relative;
display: inline-block;
margin: 2%;
border: 5px solid black;
}
.gsFour {
position: relative;
display: none;
margin: 2%;
border:1px solid #000;
}
.gsFive {
position: relative;
display: none;
margin: 2%;
border:1px solid #000;
}
.gsSeven {
position: relative;
display: none;
margin: 2%;
border:1px solid #000;
}
#imgFour:hover ~ .gsFour {
display: inline;
}
#imgFive:hover ~ .gsFive {
display: inline;
}
#imgSeven:hover ~ .gsSeven {
display: inline;
}
#imgFour:hover {
border: 5px solid white;
}
#imgFive:hover {
border: 5px solid white;
}
#imgSeven:hover {
border: 5px solid white;
}
<!DOCTYPE html>
<html>
<head>
<title>Phones</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<p><h1>Hover your mouse over the images!</h1></p>
<hr>
<div class="cont">
<img id="imgFour" src="imgs/gsFour.jpg">
<img id="imgFive" src="imgs/gs5.jpg">
<img id="imgSeven" src="imgs/gs7.jpg">
<br>
<p class="gsFour">This is a galaxy s4!</p>
<p class="gsFive">This is a galaxy s5!</p>
<p class="gsSeven">This is a galaxy gs7!</p>
</div>
</center>
</body>
</html>
This is honestly the best I could come up with so far. Thanks again!
<div class="cont">
<!-- wrap img and p tag inside 'posion' div -->
<div class="posion">
<img id="imgFour" src="imgs/gsFour.jpg">
<p class="gsFour">This is a galaxy s4!</p>
</div>
<div class="posion">
<img id="imgFive" src="imgs/gs5.jpg">
<p class="gsFive">This is a galaxy s5!</p>
</div>
<div class="posion">
<img id="imgSeven" src="imgs/gs7.jpg">
<p class="gsSeven">This is a galaxy gs7!</p>
</div>
</div>
<style>
/* new add css*/
.posion {
position: relative;
display: inline-block;
}
.posion img:hover ~ p{
position: absolute;
top: 50%;
width: 96%;
left: 2%;
}
</style>
What you need to do is use the position:absolute property on the element, in this case the class .gsFour. Take a look at the fiddle below and see what you think.
https://jsfiddle.net/37L19t6L/
As I've mentioned in the comments, you should reconsider your use of the <center> element seeing as this has been deprecated see here.
If you need more information on how to use positioning in CSS, here is a great article, which helped me a long time ago.
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.
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>