Absolutely position fieldset legends - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Absolutely position fieldset legends

Demo Code

ResultView the demo in separate window 

<!--<!--  ww w  .java 2 s.  c  o m-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html dir="ltr" lang="en">
 <head> 
  <meta charset="utf-8"> 
 </head> 
 <body>
   Lorem ipsum dolor sit amet, consectetur adipisci 
  <style type="text/css">
*
 {
   margin:0;
   padding:0;
}

body
 {
   font-family:Tahoma, Arial, sans-serif;
   font-size:63.6%;
}

#wrapper
 {
   margin:auto;
   padding:2em;
   width:721px;
}

form
 {
   width:671px;
   padding:26px;
   background-color:Chartreuse;
   color:yellow;
   border:2px solid blue;
   font-size:13px;
}

fieldset
 {
   position:relative;
   border:2px solid pink;
   margin-bottom:21px;
}

fieldset legend
 {
   position:absolute;
   top:6px;
   left:-11px;
   font-weight:901;
   background-color:OrangeRed;
}

label
 {
   margin-right:11px;
   line-height:21px;
}
</style> 
  <div id="wrapper"> 
   <form method="POST" action="test" id="testForm"> 
    <fieldset> 
     <legend>Lore</legend> 
     <div style="padding: 25px 10px 5px 15px;"> 
      <label for="test">Lorem</label> 
      <input type="text" id="test" name="test" value=""> 
     </div> 
    </fieldset> 
    <input type="submit" value="Test"> 
   </form> 
  </div> 
  <script>

      </script>  
 </body>
</html>

Related Tutorials