استایل دهی به فرم توسط css

وبمستر

توسط hasti در 4 سال پیش
0 1k 1 4 سال پیش
hastiphp-sec
0

سلام خسته نباشید من این کد رو وارد کردم ولی نمیدونم مشکلش کجاست که کادرش کیچیکتر از formشده و دکمه ارسالم درکنارtextareaقرارمیگیره؟

<style type="text/css">


body {
    font-family:tahoma;
    font-size:8pt;
    color:#787878;
    direction:rtl;
    text-align:right;
    margin:0 auto;
    width:500px;
    padding:0px;
    background-color:#fff;
    
} 

#main{
    background-color:#FCC; 
	
} 

form {
    margin:0px;
    padding:0px;
} 
input,textarea {
    font-family:tahoma;
    padding:5px;
    font-size:8pt;
    border: 1px solid #cacaca;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
} 

input[type="submit"]{
    font-family:tahoma;
    padding:5px;
    font-size:9pt;
    border: 1px solid #cacaca;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
} 
input[type="submit"]:hover{
    font-family:tahoma;
    padding:5px;
    font-size:9pt;
    border: 1px solid #7613ae;
    background:#7613ae;
    color:#fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
} 

input:hover,textarea:hover {
    border: 1px solid #039;
    padding:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.content {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    margin:50px 0 0 0;
    padding:10px;
    text-align:justify;
    border:1px solid #C03;
    
} 

.forms {
    direction: rtl;
    padding-right:20px;
    text-align: right;
    font: normal 11px Tahoma, Geneva, sans-serif;
} 

.forms label {
    width: 100px;
    float: right;
    margin: 5px 0 0 0;
} 

.forms .form, .forms .form-ltr {
    width: 200px;
    float: right;
    padding: 2px;
    font: normal 11px Tahoma, Geneva, sans-serif;
    margin: 5px 0;
}

.forms .form-ltr {
    direction: ltr;
    text-align: left;
}

.forms .text {
    width: 250px;
    height: 100px;
    overflow: auto;
    font: normal 11px/1.4 Tahoma, Geneva, sans-serif;
}
</style>


<body> 
<div id="main">
<div class="content">
<h2>ارتباط با ما</h2> 
    <p>برای تماس با ما میتوانید از فرم زیر استفاده نمایید</p>
    <div class="forms">                        
    <form action="" method="post">
    <label for="username"> نام : </label>
    <input type="text" class="form" value="" name="name">
    <br/><br/><br/>
    <label for="email"> ایمیل : </label>
    <input type="text" id="email" value="" class="form-ltr" name="email">
    <br/><br/><br/>
    <label for="sub"> موضوع : </label>
    <input type="text" id="sub" value="" class="form" name="subject">
    <br/><br/><br/>
    <label for="mess"> پیام شما : </label>
    <textarea class="form" id="mess" rows="7" name="message"></textarea>
    <br/>

    <br/><br/><br/>
    <input type="submit" name="submit" value="  ارسال  ">
    </form>
    </div>
    </div>
    
    
</div>
0

سلام float: right; رو از .forms .form, .forms .form-ltr حذف کنید درست میشه.

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید