SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div inline with field in parent div

    Hi there,

    I'm really struggling to get two div's to appear inline within a parent div (code below). There are javascript elements that require this structure (for text to appear when field selected). Just simply need to get the div "usernote" to appear inline with the form field, as opposed to under the field.

    Any help would be greatly appreciated!

    Thanks!
    Josh

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
      <meta http-equiv="content-language" content="en" />
      <title>User Registration</title>
    <style>
    html, body {
      color: #000;
      background-color: #fff;
      font-size:15px;
    }
    
    form div.active {
      background-color: #F5F5DC;
      border: 0px solid #8a8;
    }
    
    #username
    {
    	font-family:Arial;
    	font-weight:bold;
    	padding-top: 1em;
    	padding-bottom: 1em;
    	width:300px;
    	padding-left:20px;
    }
    
    #usernote
    {
    	font-weight: 400;
    	font-family:Arial;
    	padding: 0em;
    	font-size:12px;
    	width:300px;
    }
    
    #user_registration
    {
    	border:1px solid #6495ED;
    	width:700px;
    	background-color: #ECF1EF;
    	margin-left:100px;
    }
    
    #user_registration p
    {
    	clear:both;
    	margin-top:0px;
    	margin-bottom:0px;
    }
    
    </style>
    <script type="text/javascript"><!--
    function hasClassName(el,c){
      c=c.replace(/\-/g,'\\-');
      return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
    }
    function addClassName(el,c){
      if(hasClassName(el,c)) return;
      var curClass=el.className||'';
      el.className=curClass+((curClass.length>0)?' ':'')+c;
    }
    function removeClassName(el,c){
      var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
      el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
    }
    function highlightElm(el,light){
      if(!el) return;
      if(light) addClassName(el,'active');
      else removeClassName(el,'active');
    }
    window.onload = function(){
    	document.getElementById('field1').onblur = function() {
    	document.getElementById('usernote').style.display = 'none';
    	highlightElm(this.parentNode, false);
    }
    	document.getElementById('field1').onfocus = function() {
        document.getElementById('usernote').style.display = 'block';
        highlightElm(this.parentNode, true);
    }
    }
    
    // -->
    </script>
    
    
    </head>
    <body>
    
    <form method="post" action="" id="user_registration" name="user_registration">
    <div id="username">
    	Username
    	<p></p>
    	<input type="text" id="field1" name="field1" size="30" tabindex="1">
    
    	<div id="usernote" style="display:none;">
    	Your username can only contain letters (A-Z) or numbers (0-9)
    	</div>
    </div>
    
    
    </form>	
    
    </body>
    </html>

  2. #2
    SitePoint Addict Beaumont's Avatar
    Join Date
    Mar 2005
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #usernote has to be a div, it can't be a span? If it has to be a div, then to do it table-lessly you'd either need to float the input and the div left or do something with absolute positioning. What's the empty paragraph for?

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see the #usernote as a paragraph. I took your code and changed it a little: (Or you could skip the div and use form as handle. Hope I didn't change the structure in whole.)
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>User Registration</title>
    <meta http-equiv="content-language" content="en" />
    <style>
    html, body {
      background-color: #fff;
      color: #000;
      font-size:15px;
    }
    div#user_registration {
    	margin-left:100px;
    	padding: 20px;
    	width:700px;
    	border:1px solid #6495ED;
    	background-color: #ECF1EF;
    }
    p#username {
    	margin: 0;
    	width:300px;
    	font-family:Arial;
    	font-weight:bold;
    }
    #user_registration form {
    	margin: 0;
    }
    #user_registration input {
    	float: left;
    	margin-right: 20px; /* Keeps distance to usernote in IE */
    }
    p#usernote {
    	margin: 0;
    	margin-left: 200px; /* Usernote not wrapping under input in FF */
    	width:300px;
    	font-family:Arial;
    	font-weight: 400;
    	font-size:12px;
    }
    </style>
    <script type="text/javascript">
    <!--
    function hasClassName(el,c){
      c=c.replace(/\-/g,'\\-');
      return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
    }
    function addClassName(el,c){
      if(hasClassName(el,c)) return;
      var curClass=el.className||'';
      el.className=curClass+((curClass.length>0)?' ':'')+c;
    }
    function removeClassName(el,c){
      var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
      el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
    }
    function highlightElm(el,light){
      if(!el) return;
      if(light) addClassName(el,'active');
      else removeClassName(el,'active');
    }
    window.onload = function(){
    	document.getElementById('field1').onblur = function() {
    	document.getElementById('usernote').style.display = 'none';
    	highlightElm(this.parentNode, false);
    }
    	document.getElementById('field1').onfocus = function() {
        document.getElementById('usernote').style.display = 'block';
        highlightElm(this.parentNode, true);
    }
    }
    // -->
    </script>
    </head>
    <body>
    	<div id="user_registration">
    		<p id="username">Username</p>
    		<form method="post" action="" name="user_registration">
    			<input id="field1" type="text" name="field1" size="30" tabindex="1" />
    		</form>
    		<p style="display:none;" id="usernote">Your username can only contain letters (A-Z) or numbers (0-9)</p>
    	</div>
    </body>
    </html>
    Last edited by Erik J; Dec 27, 2007 at 00:39. Reason: Annoying line-feed in java code (html-code generated)

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to you both! Erik J. -- love your solution, but now the active form field does not highlight brown. I do believe it's not possible to have both the text and the highlighting appear on field activation. I might need to do a different approach.

    Many thanks!
    Josh

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no "active" div in your html code. If I get it right, the class "active" would go to the input tag?
    Edit / I think there are elements missing in your code example.
    Last edited by Erik J; Dec 30, 2007 at 02:47.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •