سوال در مورد html و css

[joker..]

سلام
من چند وقتیه دارم برنامه نویسی تحت وب یاد میگیرم حالا با یه مشکلی برخوردم
من میخوام یه فرم ثبت نام با html درست کنم ولی نمیدونم چیجوری باید تکست باکس هامو مرتب کنم
من فعلا با نت پد و دریم ویور مینویسم تو درم ویور هم فقط مینویسم و از دیزاین هاش استفاده نمیکنم.
قبلا هم تکست باکس هامو با space مرتب میکردم ولی بازهم یکدست نمیشدن و عقب جلو میشدن اگه میشه کمکم کنین

[s2/mri]

سلام

اگه css یاد نداری که بهتره با table فرم و طراحی کنی و اگه هم css یاد داری که با css طراحی کن و مرتبش کن

نمونه فرم هم تو اینترنت هست یه نمونه واست میذارم امیدوارم به نتایج بهتری برسی . لینک (http://www.p30yar.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4/css/35-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%81%D8%B1%D9%85-%D8%AB%D8%A8%D8%AA-%D9%86%D8%A7%D9%85-%D8%A8%D8%A7-css3.html)



موفق باشی

[joker..]

ممنون
خیلی کمکم کرد:لبخندساده:

[azamicu]

شما با ابزار هایی مثل flaot, margin در css اسنکارو براحتی میتونی انجام بدی

[joker..]

من float که میکنم همه میرن یه طرف دیگه تو یه جای خاص وا نمیستن
مارجین هنز یاد ندارم ولی میرم تو وب یه نگاهی میندازم
ممنون از راهنماییتون

[azamicu]

من float که میکنم همه میرن یه طرف دیگه تو یه جای خاص وا نمیستن
مارجین هنز یاد ندارم ولی میرم تو وب یه نگاهی میندازم
ممنون از راهنماییتون

نمونه

float: right;

margin: 12px 12px 13px;

[joker..]

من یه div گذاشتم وسط صفحه یه div دیگه تو اون درست کردم و نوشته هارو تو اون نوشتم
بعد یه div دیگه درست کردم فیلد هارو توش گذاشتم
بعد الان میخوام این دوتا div کنار هم قرار بگیرن نمیتونم و div سومی میره زیر سومی
div اول:width:750px
دوم:100px
سوم:500px

[azamicu]

دایو والد رو عرضش رو برابر مجموع عرض بچه هاش کن و به بچه هاش float یکسان بده و اگر بچه هاش border دارن اونم باید به مجموع عرض های اضافه کنی

[joker..]

نشد که نشد
با vertical-align هم نشد
با margin هم نشد
یه بازم دایو سوم رو حذف کردم و چیزای توشو تو دایو والد گذاشتم نشد
ممکنه واسه direction:rtl باشه؟

[H:Shojaei]

سلام
راههايي كه دوستان ميگن خوب و بهينست ولي چرا از تيبل استفاده نميكنيد؟
اصلا از اساتيد ميپرسم چرا از تيبل استفاده نكنيم يعني كدوم بهتره استايل دهي با css يا با تيبل نوشتن؟

[joker..]

من بخاطر اینکه هنوز تو مرحله آموزشم یه سری محدودیتهایی دارم
معلمم تاکید کرده از table استفاده نکنین دلیلشم گفت که تگ های دایو زودتر از تیبل لود میشن

[azamicu]

استفاده از تیبل منسوخ شدست توی دنیا
کداتو بزار نیگاه کنیم
این خیلی سادست نمیدونم چرا گیر کردی و راهش همونه که بهت گفتم

[joker..]

http://s1.picofile.com/file/7874920535/Reg.rar.html
اینم لینک
http://s1.picofile.com/file/7874920535/Reg.rar.html

[azamicu]

سلام
اولا برا دایوی که کلاس sediv داره floar مشخص نکردی
دوما والد دایوات اون fieldset که گذاشتی هست و جدش دایو بعدیشه و fieldsetداخلش padding داره که باید اندازه اونم به دایو اصلیت اضافه کنی پس عرض دایو moraba میشه 790

[joker..]

من فلوت رو تست کردم بعدشم برداشتمش
من یه بارم اندازه دایو دومو 100 و سومو 200 گذاشتم یعنی خیلی کمتر از کل دایوها
ولی بازم رفت زیرش

[webtracker]

azamicu @ درست می گن ولی یک نصحیت از من بنده حقیر اینکه سعی کنید عناصر داخلی را به جای عرض ثابت از درصد استفاده کنید.مثلا در اینجا شما به این صورت می تونید کار کنید
.thdiv {
float: right;
width: 80%;


}
.sediv {
color: #999999;
direction: rtl;
float: right;
font-size: larger;
width: 20%;


}

[tadayoni]

اول این توضیح رو بدم که تصویر پس زمینه ای که انتخاب کردید خیلی بزرگ هستش و اصلا مناسب طراحی وب نیست . اون رو عوض کنید و یه گرادینت بذارید تا کارتون بهتر و سبک تر بشه
این روش کار کردن با div برای اشیاء مرتبط به هم کاملا اشتباهه !!!!!!!!!!!!!!!!!
نمیدونم چرا دارید این کار رو میکنید !!!
شما اومدید دو تا div تعریف کردید که به یکی کلاس sediv رو دادید و تمامی lable های خودتون رو توی اون قرار دادید و همچنین یه div دیگه با کلاس thdiv تعریف کردید و فیلدها رو هم توی اون قرار دادید ...
جناب مهندس azamicu درست عرض کردن که روش کار با table منسوخ شده ولی این روش که اشیاء توی div با تگ <br> از هم جدا بشن که خیلی بدتر از table هستش !!!!!!!!!!!!!

دوست عزیز اشیاء توی صفحه شما باید مرتبط به هم باشند و div اونها یکی باشه و به div مربوطه استایل بدید .
من یه نمونه از اون اشیاء رو کدش رو اینجا مینویسم و اگه متوجه نشدید بگید تا کل صفحه شما رو به این حالت در بیارم و براتون بفرستم تا روش کار رو متوجه بشید

مثلا برای نام و نام خانوادگی باید اینطور عمل میکردید :


<div class="item">
<lable> نام : </lable>
<input type="text" />
</div>
<div class="item">
<lable> نام خانوادگی : </lable>
<input type="text" />
</div>


وقتی اینطوری کد بنویسید دادن استایل خیلی راحت تر میشه و کنترل شما بیشتر هستش . همچنین دیگه نیازی نیست با br خطوط رو از هم فاصله بدید و به مشکل عدم هماهنگی اشیاء توی صفحه برخورد بکنید ...

[azamicu]

وای چرا br
مگه متنه که با br
فقط با float

[tadayoni]

وای چرا br
مگه متنه که با br
فقط با float
نمونه ای که دوستمون واسه دانلود گذاشته بودن با br هستش و اصلا درست کار نشده
من یه نمونه کوچیک برای ایشون گذاشتم

[refugee]

استفاده از table یک خوبی هایی داره و یک بدی هایی هم داره : یکی از خوبی هاش موقع چاپ کردن است که خیلی راحت میتونید استفاده کنید . و همچنین برای استفاده در قالب های ایمیل مناسب میباشد .

اما برای استفاده د فرم ها تیبل به قول دوستمون منسوخ شده است و کسی دیگه استفاده نمیکند همچنین قدرتی که سی اس اس و دایو به طراح میده تیبل ندارد .

در مورد استفاده از % در عناصر داخلی و همچنین استفاده نکردن از br هم با این دو عزیز موافقم .



دوست استارتر من :

درست کردن یک فرم نیازمند یک سری اطلاعات است که میتونید نمونه های فرم ها رو از توی نت سرچ کنید .

[na_des]

سلام
راههايي كه دوستان ميگن خوب و بهينست ولي چرا از تيبل استفاده نميكنيد؟
اصلا از اساتيد ميپرسم چرا از تيبل استفاده نكنيم يعني كدوم بهتره استايل دهي با css يا با تيبل نوشتن؟
سلام من که استاد نیستم ...
اما همون جور که دوستان گفتن در روش های جدید دیگه از table استفاده نمیشه چرا که اول باید table ، tr ، td لود بشه و سرعت کمتری نسبت به div داره . حتی من جایی شنیدم که به زودی div باید کنار گذاشت ...

[tadayoni]

سلام من که استاد نیستم ...
اما همون جور که دوستان گفتن در روش های جدید دیگه از table استفاده نمیشه چرا که اول باید table ، tr ، td لود بشه و سرعت کمتری نسبت به div داره . حتی من جایی شنیدم که به زودی div باید کنار گذاشت ...
توی html 5 سعی شده اشیاء داخل صفحه تماما دارای مفهوم باشه . یعنی مثلا دیگه بجای اینکه یه div درست کنیم و id اون رو header بدیم و بذاریمش بالای صفحه ، یک شئ بنام header ایجاد شده که خودش میره و سر جای خودش قرار میگیره و موتورهای جستجو هم خیلی بهتر ساختار قالب مارو درک میکنند و ...

[joker..]

مشکل اصلی من اینه کهوقتی میخواستم فیلدهارو بزارم یکیشون عقب میرفت یکیشون جلو ولی تا حدودی تونستم با زدنspaca و کدش فیلدهارو مرتب کنم ولی بازم در حد دلخواهم نشد
واسه همین تصمیم گرفتم از دایو استفاده کنم و یه مشکل دیگه درست کردم
واسه همین اگه هرکدومو توی یک دایو بزارم بازهم یکیشون میره عقب و یکیشون جلو. ولی مشکل اصلی که حل نمیشه و فقط زیرهم نمیرن

[joker..]

چیجوری میتونم حجم عکسو کم کنم؟
یک راهش که سیاه و سفید کردنه بقیشو نمیدونم
میتونم رزولوشنشو بیارم پایین و لی میترسم واسه صفحم کوچیک بشه

[joker..]

من از درصد هم استفاده کردم نشد
بعد یه دایو کوچیک درست کردم همه عناصر رو تو اون گذاشتم و نوشته هارو فلوت رایت و فیلد هارو فلوت لفت کردم تا یه جاهایی درست شد ولی دوتا فیلد آخر از دایو میزنن بیرون و اولین فیلد هم از بالای دایو حدود 200 پیکسل فاصله داره

[na_des]

چیجوری میتونم حجم عکسو کم کنم؟
یک راهش که سیاه و سفید کردنه بقیشو نمیدونم
میتونم رزولوشنشو بیارم پایین و لی میترسم واسه صفحم کوچیک بشه

سلام به نظرم بهتره عناصری که در طراحی میخاید استفاده کنید اول اماده کنید بعد سراغ طراحی قالبش برید . برا کم کردن حجم عکس اگه منظورتون کدنویسیه که نمیدونم اما اگه منظورتون غیر از اینه از photoshop و firework و ... میتونید استفاده کنید . با این نرم افزارا هر کاری که لازمه مثه تغییر سایز و رزولوشن را به راحتی میتونید انجام بدید . یه راه ساده ترم هست که اموزشش در سایت quicklearn.ir موجوده .

[na_des]

من از درصد هم استفاده کردم نشد
بعد یه دایو کوچیک درست کردم همه عناصر رو تو اون گذاشتم و نوشته هارو فلوت رایت و فیلد هارو فلوت لفت کردم تا یه جاهایی درست شد ولی دوتا فیلد آخر از دایو میزنن بیرون
برا این مشکل اگه از overflow استفاده کنید فک کنم حل بشه

[webtracker]

چیجوری میتونم حجم عکسو کم کنم؟
یک راهش که سیاه و سفید کردنه بقیشو نمیدونم
میتونم رزولوشنشو بیارم پایین و لی میترسم واسه صفحم کوچیک بشه

من نمی دنم چرا شما از این عکس برای پس زمینه استفاده می کنید اصولا از چنین تصاویر کاملی در فوتر بیشتر استفاده میشه و تصاویر بک گراند کلی یک ساختار تکرار شونده دارند مثل موزاییک.http://subtlepatterns.com از این سایت یک لیست الگوها را ببینید (به علت محدودیت از طرف cdn خارجی برای کشورهای ایران سی اس اس سایت کامل لود نمیشه از چیز شکن استفاده کنید )و اگه می خواهید به روزتر باشید از بک گراند سفید یا یک بافت سفید استفاده کنید

[H:Shojaei]

توی html 5 سعی شده اشیاء داخل صفحه تماما دارای مفهوم باشه . یعنی مثلا دیگه بجای اینکه یه div درست کنیم و id اون رو header بدیم و بذاریمش بالای صفحه ، یک شئ بنام header ایجاد شده که خودش میره و سر جای خودش قرار میگیره و موتورهای جستجو هم خیلی بهتر ساختار قالب مارو درک میکنند و ...

آره واقعا اين خيلي ميتونه كمك كنه دوستان اينجا (http://www.w3schools.com/html/html5_semantic_elements.asp) رو ببينيد

[webtracker]

آره واقعا اين خيلي ميتونه كمك كنه دوستان اينجا (http://www.w3schools.com/html/html5_semantic_elements.asp) رو ببينيد

آره درست می گین ولی در اینجا که هنوز دارن ازاینترنت اکسپلورر 6و7,8 منقرض شده استفاده می کنند چطور از html5 میشه استفاده کرد حتی css2 را بر اساس قواینن خودش رعایت می کنه بدون توجه به استاندارد جهانی و بگزریم از اینکه css3 اصلا ساپورت نمیکنه

[tadayoni]

مشکل اصلی من اینه کهوقتی میخواستم فیلدهارو بزارم یکیشون عقب میرفت یکیشون جلو ولی تا حدودی تونستم با زدنspaca و کدش فیلدهارو مرتب کنم ولی بازم در حد دلخواهم نشد
واسه همین تصمیم گرفتم از دایو استفاده کنم و یه مشکل دیگه درست کردم
واسه همین اگه هرکدومو توی یک دایو بزارم بازهم یکیشون میره عقب و یکیشون جلو. ولی مشکل اصلی که حل نمیشه و فقط زیرهم نمیرن

دوست عزیز متوجه منظور من شدید ؟
باید برای هر دایو یه استایل بدید . مثلا به یه کلاس مربوطش کنید !!!!!!!!!!!!!
اینطوری عقب و جلو رفتن رو کنترل می کنید !!!

[tadayoni]

این کد رو توی یه فایل html کپی کن و اجرا کن تا نتیجه رو مشاهده کنی
به مثال ساده هستش . حتما به نحوه استفاده display: inline-block; هم دقت کن



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="http://tadayoni.ir">
<meta http-equiv="Reply-to" content="tadayoni.ir@gmail.com">
<title>Untitled</title>
<style type="text/css">
body{
direction: rtl;
}
.my_form{
width: 600px;
background-color: #ccc;
padding: 10px 20px;
margin: 0 auto;
}

.item{
margin: 10px 0;
}

.item label{
width: 100px;
display: inline-block;
}

.item input[type= "text"]{
width: 300px;
}
</style>
</head>
<body>
<div class="my_form">

<div class="item">
<label>نام :</label>
<input type="text" />
</div>

<div class="item">
<label>نام خانوادگی :</label>
<input type="text" />
</div>

<div class="item">
<label>شماره تلفن :</label>
<input type="text" />
</div>

</div>
<a href="http://tadayoni.ir" target="_blank">http://tadayoni.ir</a>
</body>
</html>

[azamicu]

برای کم کردن حجم عکس اونو باید با فرمتهای مخصوص وب سیو کنی
توی فتوشاپ گزینه های alt, ctrl , shift , s رو بزن پنجره سیو باز میشه و همه فرمت ها رو برای وب استاندارد کرده میتونی نوعی که میخوای انتخاب کنی و کیفیتشو کم زیاد کنی و خروجیشو توی وب ببینی

[joker..]

مشکلم با اون چیزی که آقای تدینی گفت حل شد
ممنون