php item alignment

[egemen_i]

hi guys i recently installed terms_osc plugin on my osclass website. i tried everything to align "checkbox" and "i agree text" which is (Kullanici sozlesmesini okudum kabul ediyorum) on SAME ROW but couldn't do it.



This is plugins form.php

<?php 
View::newInstance()->_exportVariableToView('page', Page::newInstance()->findByInternalName('terms_osc'));
?>
<div id="terms_osc_page" style="display:none;">
    <?php echo osc_static_page_text(); ?>
</div>

<label for="terms_osc_box">
<input type="checkbox" id="terms_osc_box" name="terms_osc_box" value="1"/></label>
<?php echo sprintf(__('<a id="terms_osc_a" href="example.com" >Kullanıcı Sözleşmesini</a> okudum kabul ediyorum</a>', 'terms_osc'), osc_base_url(), osc_base_url()) ; ?>
<br />

<link href="<?php echo osc_base_url().'oc-content/plugins/'.osc_plugin_folder(__FILE__);?>css/basic.css" rel="stylesheet" type="text/css" />
<link href="<?php echo osc_base_url().'oc-content/plugins/'.osc_plugin_folder(__FILE__);?>css/demo.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<?php echo osc_base_url().'oc-content/plugins/'.osc_plugin_folder(__FILE__);?>js/jquery.simplemodal.1.4.2.min.js"></script>
<script>

	$(document).ready(function(){
    $("#terms_osc_box").rules("add", {required: true, messages: { required: "<?php _e('It is obligatory to accept the Terms and Conditions.', 'terms_osc'); ?>" }});});
	
    $("#terms_osc_a").click(function(){$("#terms_osc_page").modal();}); 

</script>

I changed to this but not worked

<label style="display:inline;" for="terms_osc_box">
<input type="checkbox" id="terms_osc_box" name="terms_osc_box" value="1"/>
<?php echo sprintf(__('<a id="terms_osc_a" href="example.com" >Kullanıcı Sözleşmesini</a> okudum kabul ediyorum</a>', 'terms_osc'), osc_base_url(), osc_base_url()) ; ?>
</label>

Also this here is my basic.css and demo.css of plugin

Basic.css

/*
 * SimpleModal Basic Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: basic.css 257 2010-07-27 23:06:56Z emartin24 $
 */

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

Demo.css

body {background:#fff; color:#333; font: 12px/22px verdana, arial, sans-serif; height:100%; margin:0 auto; width:100%;}
h1 {color:#3a6d8c; font-size:34px; line-height:40px; margin:0;}
h3 {color:#3a6d8c; font-size:22px; line-height:26px; font-weight:normal; margin:0 0 8px 0;}
img {border:0;}
#logo {margin-bottom:20px; width:300px;}
#logo h1 {color:#666; letter-spacing:-1px; font-weight:normal;}
#logo h1 span {color:#444; font-weight:bold;}
#logo .title {color:#999; font-size:12px;}
#container {margin:0 auto; padding-top:20px; width:800px;}
#content {border-bottom:1px dotted #999; border-top:1px dotted #999; padding:20px 0;}
#footer {clear:left; color:#888; margin:20px 0;}
#footer a:link, #footer a:visited {color:#888; text-decoration:none;}
#footer a:hover {color:#333; text-decoration:underline;}

[captainccs]

Try making the form wider, from the image it looks like the checkbox and the text are too wide for the container they are in. That would cause a line break.

[Enver]

i tried everything to align "checkbox" and "i agree text" which is (Kullanıcı sözlesmesini okudum kabul ediyorum) on SAME ROW but couldn't do it.

This is really a question for the CSS section but on top of the suggestion from captainccs, I would suggest including this in your demo.css file:

input[type='checkbox']
{
  float: right;
  clear: none;
}

input[for='terms_osc_box']
{
  float: left;
  clear: none;
}

Also your PHP code is writing the javascript validation warning in English:

<?php _e('It is obligatory to accept the Terms and Conditions.', 'terms_osc'); ?>

Which kind of defeats the purpose while your form is in Turkish. I understand the problem because either your server or your web page may not be set to handle the UTF-8 charset. You could try setting Turkish in your javascript using '\u' plus the code of the relevant special character. You can find the codes for special characters in the Latin-1 Supplement here and Latin Extended-A including special Turkish characters here. Also make sure the charset of your web page is set to Unicode (charset="UTF-8")

For example, replace the line above with something like this:

<?php _e('Kullan\u0131c\u0131 s\u00F6zle\u015Fmesini okumaya ve kabul etmeye gerekiyor.', 'terms_osc'); ?>

Which should print as: 'Kullanıcı sözleşmesini okumaya ve kabul etmeye gerekiyor' when your javascript file runs the warning. My apologies if the grammar is not quite right but it should give you the general idea.

For future reference, you can also do a similar thing in strings that are set directly to the web page with PHP (in server-side validation, for instance) but use 'x' instead of 'u' before the code points.