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

وبمستر

توسط hasti در 6 سال پیش
0 64.8k 1 6 سال پیش
hasti php-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 حذف کنید درست میشه.

خوش آمدید

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