Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question alignment with css

    Hello everyone,
    My problem is that I can't place "keep me login" and the checkbox on the same line.
    Here is my css code and part of my html code:
    css:
    Code:
    #login.inputcheckbox {
        margin-left: 0;
    	float: left;
    }
    
    #login.inputcheckbox {
        border: 0 none;
        vertical-align: middle;
    }
    
    #login .login_form_label_field input {
        position: relative;
        top: 1px;
        vertical-align: bottom;
    }
    and my html code is:

    Code:
    <td class="login_form_label_field">
    <input type="checkbox" checked="1" name="persistent" id="persistent" value="1" class="inputcheckbox" />
    <input type="hidden" value="1" name="default_persistent" />
    <label for="persistent" id="label_persistent">Keep me login</label>
    </td>
    could someone help me?

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need all your code including Doctype.
    Or better still a link to the site.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ok, I'm gonna send it

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> E-soko  -  Welcome </title>
    <link href="css/layout_grids.css" rel="stylesheet" type="text/css"/>
    <div id="login">
    			<form id="form" name="form" method="post" action="#">
    				<table cellspacing="0">
    				<tbody>
    					<tr>
    						<td class="labels">
    						<label for="Email">Email</label>
    						</td>
    						
    						<td class="labels">
    						<label for="pass">Password</label>
    						</td>
    						
    					</tr>
    					
    					<tr>
    						<td>
    						<input type="text" tabindex="1" value="ntwali2007@yahoo.fr" id="email" name="email" class="inputtext">
    						</td>
    						
    						<td>
    						<input type="password" tabindex="2" id="pass" name="pass" class="inputtext">
    						</td>
    						
    						<td>
    						<label for="u902450_3" class="uiButton uiButtonConfirm"><input type="submit" id="u902450_3" tabindex="4" value="login"></label>
    						</label>
    						</td>
    					</tr>
    					
    					<tr>
    					<td class="login_form_label_field">
    						<input type="checkbox" checked="1" name="persistent" id="persistent" value="1" class="inputcheckbox" />
    						<input type="hidden" value="1" name="default_persistent" />
    						<label for="persistent" id="label_persistent">Keep me login</label>
    					</td>
    					<td class="login_form_label_field"><a rel="nofollow" href="">Forgot Password? </a>
    					</td>
    					
    					</tr>
    				</tbody>
    				</table>
    			</form>
    		 </div>

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have made a few corrections,. Is this what you want?

    Quite a few HTML tags were missing.
    It stll has errors but as I am not certain what you want I have left them.
    I am not certain if I have all your CSS

    Frank

    If you go to the Sources program in my signature, you can find validation programs at the top of the three columns where you can validate your code,
    Last edited by effpeetee; 04-04-2011 at 12:01 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    jns1992 (04-04-2011)

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    could you send me the source code after modification

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    this is all my css:

    Code:
    {
      /** 
       * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera 
       * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
       *
       * @workaround
       * @affected IE8, FF, Webkit, Opera
       * @css-for all
       * @valid CSS3
       */
    
      body { overflow-y: scroll; }
    
      /*------------------------------------------------------------------------------------------------------*/
      
      /**
       * (en) Formatting YAML's  basic layout elements
       * (de) Gestaltung des YAML Basis-Layouts
       */
    
      /* (en) Marginal areas & page background */
      /* (de) Randbereiche & Seitenhintergrund */
      body { background: #FFF; }
    
      /* (en) Centering layout in old IE-versions */
      /* (de) Zentrierung des Layouts in alten IE-versionen */
      body { text-align: center; }
      .page_margins { text-align:left; margin: 0 auto; }
    
      /* (en) Layout: width, background, borders */
      /* (de) Layout: Breite, Hintergrund, Rahmen */
      .page_margins {
        margin: 0 auto;
    }
    .page_margins {
        max-width: 95em;
        width: auto;
    }
    .page {
        padding: 0 18px;
        position: relative;
    }
      #nav, #main, #extended, #footer { overflow:hidden; min-width: 960px; }
    
      /* (en) Designing main layout elements */
      /* (de) Gestaltung der Hauptelemente des Layouts */
      #footer { background: #FFF; color: #ccc; }
      
      #nav {
        background: #000088;
        /* padding-top:10px; */
        padding-bottom:10px;
        /*padding-top:10px; */
        border-bottom: 1px #ddd solid;
      }
    
      #main {
        background: #fff;
      }
    
      #main .c25r { border-left: 1px #eee solid; }
      
      #nav_main{ background: #000088 };
    
      #extended { background: #fff; border-top: 1px #eee solid; }
      #extended .c25l,  #extended .c50l { border-right: 1px #eee solid; }
    
      #extended .subc  { padding: 0 10px; }
      #extended .subcl { padding: 0 10px 0 0; }
      #extended .subcr { padding: 0 0 0 10px; }
    
      #main, #extended { padding-top: 20px; padding-bottom: 20px; }
    
      #footer { border-top: 1px #eee solid; }
      #footer .page { padding: 4px 0px; }
    
     /**
      * ------------------------------------------------------------------------------------------------- #
      *
      * (en) Styling of layout specific elements
      * (de) Gestaltung layoutabhängiger Elemente
      */
      #footer a { color: #fff; background:transparent; font-weight: bold; }
      #footer a:focus,
      #footer a:hover,
      #footer a:active { background-color: transparent; text-decoration:underline; }
    
     /**
      * ------------------------------------------------------------------------------------------------- #
      *
      * Stylized 
      *
      * (en) Visual styling for skiplink navigation
      * (de) Visuelle Gestaltung der Skiplink-Navigation
      *
      * @section content-skiplinks
      */
      /* ----------- stylized ----------- */
    } 
    #stylized h1 {
    	font-size:14px;
    	font-weight:bold;
    	margin-bottom:8px;
    	letter-spacing: 0.5em;
    }
    
    #stylized p{
    	font-size:11px;
    	color:#666666;
    	margin-bottom:20px;
    	border-bottom:solid 1px #b8ddf0;
    	padding-bottom:10px;
    }
    
    #stylized label{
    	display:block;
    	font-weight:bold;
    	font-size: 11px;
    	text-align:right;
    	width:140px;
    	float:left;
    }
    
    #stylized .small{
    	color:#666666;
    	display:block;
    	font-size:11px;
    	font-weight:normal;
    	text-align:right;
    	/* width:140px; */
    }
    
    #stylized input{
    	float:left;
    	font-size:12px;
    	padding:4px 2px;
    	border: 1px solid #CCCCCC;
    	width:235px;
    	margin:2px 0 20px 10px;
    	height:20px;
    }
    
    #stylized input:focus, #stylized input:hover{
    	background: none repeat scroll 0 0 #F4F4FF;
    	border: 1px solid #8888CC;
    }
    
    #stylized button{
    	background: none repeat scroll 0 0 #000088;
    	border: 1px solid #000066;
    	color: #FFFFFF;
    	clear:both;
    	margin-left:150px; 
    	height:31px;
    	text-align:center;
    	line-height:31px;
    	font-size:11px;
    	font-weight:bold;
    	width: 135px;
    }
    
    #stylized select {
    	border: 1px solid #CCCCCC;
    	float:left;
    	padding:4px 2px;
    	margin:2px 0 20px 10px;
    	color: #FFFFFF;
    	height: 25x;
    	width: 100px;
    }
    
    #stylized select :focus{
    	border: 1px solid #8888CC;
    }
    	
    
    /** 
     * Login box
     *
     */
    #login{
    	float: right;
    	color: #000000;
        direction: ltr;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        text-align: left;
    }
    
    #login table tr{
    	vertical-align: top;
    }
    #login table tr td{
    	padding: 0 0 0 14px;
    }
    
    #login table tr td .labels{
        padding-bottom: 3px;
    }
    
    #login td, td.label{
        font-size: 11px;
        text-align: left;
    }
    
    #login label{
        font-weight: normal;
        margin: 0;
        cursor: pointer;
        vertical-align: middle;
    }
    
    #login #email {
        direction: ltr;
    }
    
    #login .inputtext, #login .inputpassword {
        border-color: #CCCCCC;
        margin: 0;
        width: 142px;
    }
    
    #login.inputtext, #login.inputpassword {
        margin: 0;
        padding-bottom: 4px;
    }
    
    #login textarea, #login .inputtext, #login .inputpassword {
        border: 1px solid #CCCCCC;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        padding: 3px;
    }
    
    #login .inputtext, #login .inputpassword {
        border-color: #CCCCCC;
        margin: 0;
        width: 142px;
    }
    
    #login.inputtext, #login.inputpassword {
        margin: 0;
        padding-bottom: 4px;
    }
    
    #login textarea, #login.inputtext, #login.inputpassword {
        border: 1px solid #CCCCCC;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        padding: 3px;
    }
    
    #login .menu_login_container label {
        margin: 0;
    	background-position: 0 -48px;
    }
    
    #login input.submit{
    	background: #000088;
    }
    
    #login.uiButton, #login.uiButtonSuppressed:active, #login.uiButtonSuppressed:focus, #login.uiButtonSuppressed:hover {
    	border: 1px solid #000066;
    	color: #FFFFFF;
    	cursor: pointer;
    	display: inline-block;
    	padding: 2px 6px;
    	vertical-align: top;
    	white-space: nowrap;
    	text-align:center;
    	line-height: normal !important;
    	font-size:11px;
    	font-weight:bold;   
    	
    }
    
    #login label {
        color: #666666;
        cursor: pointer;
        font-weight: normal;
        vertical-align: middle;
    	width: 155px;
    }
    
    
    #login.login_form_label_field label, #login.login_form_label_field a {
        position: relative;
        top: -2px;
        vertical-align: bottom;
    	font-weight: normal;
        margin: 0;
    }
    
    #login td, #login td.label {
        font-size: 11px;
        text-align: left;
    	width: 60px;
    }
    
    #login.login_form_label_field input {
        position: relative;
        top: 1px;
        vertical-align: bottom;
    }
    #login.inputcheckbox {
        margin-left: 0;
    	float: left;
    }
    
    #login.inputcheckbox {
        border: 0 none;
        vertical-align: middle;
    }
    
    #login .login_form_label_field input {
        position: relative;
        top: 1px;
        vertical-align: bottom;
    }
    
    #login.login_form_label_field label, #login.login_form_label_field a {
        position: relative;
        top: -2px;
        vertical-align: bottom;
    }
    
    #login.login_form_label_field {
        padding-bottom: 3px;
        padding-top: 1px;
        vertical-align: bottom;
    }
    
    #login table tr td {
        padding: 0 0 0 14px;
    }
    
    #login td, #login td.label {
        font-size: 11px;
        text-align: left;
    }

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here it is.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> E-soko  -  Welcome </title>
    <link href="css/layout_grids.css" rel="stylesheet" type="text/css"/>
    <style type="css/text">
    #login.inputcheckbox {
        margin-left: 0;
    	float: left;
    }
    
    #login.inputcheckbox {
        border: 0 none;
        vertical-align: middle;
    }
    
    #login .login_form_label_field input {
        position: relative;
        top: 1px;
        vertical-align: bottom;
    }
    </style>
    </head>
    <body>
    <div id="login">
    			<form id="form" name="form" method="post" action="#">
    				<table cellspacing="0">
    				<tbody>
    					<tr>
    						<td class="labels">
    						<label for="Email">Email</label>
    						</td>
    						
    						<td class="labels">
    						<label for="pass">Password</label>
    						</td>
    
    					</tr>
    
    					<tr>
    						<td>
    						<input type="text" tabindex="1" value="ntwali2007@yahoo.fr" id="email" name="email" class="inputtext" />
    						</td>
    						
    						<td>
    						<input type="password" tabindex="2" id="pass" name="pass" class="inputtext" />
    						</td>
    
    						<td>
    						<label for="u902450_3" class="uiButton uiButtonConfirm"><input type="submit" id="u902450_3" tabindex="4" value="login"></label>
    						</td>
    					</tr>
    					
    					<tr>
    					<td class="login_form_label_field">
    						<input type="checkbox" checked="1" name="persistent" id="persistent" value="1" class="inputcheckbox" />
    						<input type="hidden" value="1" name="default_persistent" />
    						<label for="persistent" id="label_persistent">Keep me login</label>
    					</td>
    					<td class="login_form_label_field"><a rel="nofollow" href="">Forgot Password?</a>
    					</td>
    					
    					</tr>
    				</tbody>
    				</table>
    			</form>
    		 </div> 
               
    
    jns1992 
    View Public Profile 
    Send a private message to jns1992
    Send email to jns1992 
    Find More Posts by jns1992 
    Add jns1992 to Your Contacts
    
     
    
    Bookmarks 
     del.icio.us  StumbleUpon  Google  Digg  
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, try to check all my css code. I have posted it above.

    ------------------
    Jonas

  • #10
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I copied this code, and pasted it in notepad, but not change, try to do it too

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have done three versions.

    Here
    Here
    and Here.

    See if any one is prefered.

    Frank

    I have made a style shett for the last one. layout_grids.css

    [URL="http://www.exitfegs.co.uk/layout_grids.css"[/URL]
    Last edited by effpeetee; 04-04-2011 at 01:38 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    jns1992 (04-04-2011)

  • #12
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, but I have other css files, which manages other parts of my web page, and it seems to me that these scripts css change the layout of the page that you have just help me, I will send you these other scripts css, you can look that makes "keep me login" is returned to the line.

    content.css:
    Code:
      /* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
    
      p { line-height:1.5em; margin:0 0 1em 0; }
    
      blockquote, cite, q {
        font-family:Georgia, "Times New Roman", Times, serif;
        font-style:italic;
      }
      blockquote { margin:0 0 1em 1.6em; color:#666; }
    
      strong,b { font-weight:bold; }
      em,i { font-style:italic; }
    
      big { font-size:116.667%; }
      small { font-size:91.667%; }
     
      pre { line-height:1.5em; margin:0 0 1em 0; }
      pre, code, kbd, tt, samp, var { font-size:100%; }
      pre, code { color:#800; }
      kbd, samp, var, tt { color:#666; font-weight:bold; }
      var, dfn { font-style:italic; }
    
      acronym, abbr {
        border-bottom:1px #aaa dotted;
        font-variant:small-caps;
        letter-spacing:.07em;
        cursor:help;
      }
      
      sub { vertical-align: sub; font-size: smaller; }
      sup { vertical-align: super; font-size: smaller; }
    
      hr {
        color:#fff;
        background:transparent;
        margin:0 0 0.5em 0;
        padding:0 0 0.5em 0;
        border:0;
        border-bottom:1px #eee solid;
      }

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The difficulty is that we don't know what looks you are aiming for. Is the present one that I amended what you want or if not what do you want changed?
    Is the last css you posted for the same page or for a different.one?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Tags for this Thread

    Posting Permissions

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