مبتدی: تگ div [بایگانی]

mehran788

پنج شنبه 26 اردیبهشت 1392, 10:23 صبح

با سلام و عرض خسته نباشید خدمت دوستان
من تازه طراحی وب رو شروع کردم و دارم یاد می گیرم و دنبال آموزش می گشتم که تو همین تالار با پست طراحی یک وب سایت ساده روبرو شدم که تو part 1 اون با تگ div خیلی کار کرده بود
من هرچی روش فکر کردم و بررسی کردم نتونستم این تگ ها رو درک ککنم اگه ممکنه من کد رو اینجا می ذارم تا کسی کمی درباره این تگ واسم توضیح بده
کد css:
* {
margin=0;
padding=0;
}
body {
background-color: #FFF;
font-family: Tahoma;
font-size: 12px;
}

#Head-Bg {
background-image: url('image/header.png');
background-repeat: repeat-x;
main-height: 600px;
}

#Wraper {
width: 1000px;
margin: auto;
main-height:100px;
overflow: hidden;
}

#Header-Wraper {
width: 100px;
height: 130px;
float: right;
}
#Header-Logo-Wraper {
height: 84px;
margin: 16px auto auto;
width: 232px;
}
#Header-Logo1 {
background-image: url("Images/logo1-h.png");
background-repeat: no-repeat;
float: right;
height: 40px;
margin-top: 30px;
width: 165px;
}
#Header-Logo2 {
background-image: url("Images/logo2-h.png");
background-repeat: no-repeat;
float: right;
height: 47px;
margin-right: -34px;
width: 66px;
}
#Menu-Wraper {
width: 1000px;
height: 37px;
float: right;
}
#Menu-List-Wraper {
width: 700px;
height: 37px;
float: right;
}
#Search-Wraper {
float: left;
height: 31px;
margin-top: 4px;
width: 300px;
}
#Menu-List-Wraper ul {
display:inline;
list-style-type: none;
}
#Menu-List-Wraper ul li {
background-image: url('Images/Menu-Bg.png');
background-repeat: no-repeat;
float: right;
height: 37px;
width: 114px;
line-height: 33px;
text-align: center;
margin-right: 2px;
}
#Menu-List-Wraper ul li:Hover {
background-image: url('Images/Menu-Bg-Hover.png');
background-repeat: no-repeat;
}
#Menu-List-Wraper ul li a{
color: #06A9E0;
font-size: 13px;
padding: 8px 28px 10px 21px;
text-decoration: none;
}
#Menu-List-Wraper ul li a:Hover {
color:#fff;
text-decoration: none;
}
#Menu-Home a {
background-image: url("Images/Home-Icon.png");
background-repeat: no-repeat;
line-height: 25px;
margin-left: 8px;
padding: 0 6px 14px 28px;
}
#Menu-Home {
width: 45px;
height: 37px;
float: right;
background-image: url('Images/Menu-Bg-Home.png');
background-repeat: no-repeat;
}
#Menu-Home:Hover {
width: 45px;
height: 37px;
float: right;
background-image: url('Images/Menu-Bg-Home-Hover.png');
background-repeat: no-repeat;
}
#Search-Txt-Wraper {
width: 200px;
height:31px;
float: right;
}
#STW-R {
width: 6px;
height: 31px;
float: right;
background-image: url('Images/Search-Bg_R.png');
background-repeat: no-repeat;
}
#STW-C {
width: 188px;
height: 31px;
float: right;
background-image: url('Images/Search-Bg_C.png');
background-repeat: repeat-x;
}
#STW-L {
width: 6px;
height: 31px;
float: right;
background-image: url('Images/Search-Bg_L.png');
background-repeat: no-repeat;
}
#Btn-Search {
width: 30px;
height: 30px;
float: right;
background-image: url('Images/Search-Btn-Bg.png');
background-repeat: no-repeat;
background-position: center top;
position: relative;
right: 31px;
top: 1px;
}
#Btn-Search:Hover {
background-position: center -30px;
}
.FU-TXT {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #909090;
direction: rtl;
font-family: tahoma;
height: 27px;
width: 160px;
}
کد html:

<!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">
<head>
<title>وب سایت من</title>
<link href="Edu-Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Head-Bg">
<div id="Wraper">
<div id="Header-Wraper">
<div id="Header-Logo-Wraper">
<div id="Header-Logo1"></div>
<div id="Header-Logo2"></div>
</div>
</div>
<div id="Menu-Wraper">
<div id="Menu-List-Wraper">
<div id="Menu-Home"><a href="#"></a></div>
<ul>
<li><a href="#">مقالات</a></li>
<li><a href="#">توضیحات</a></li>
<li><a href="#">درباره من</a></li>
<li><a href="#">تماس با من</a></li>
</ul>
</div>
<div id="Search-Wraper">
<div id="Btn-Search"></div>
<div id="Search-Txt-Wraper">
<div id="STW-R"></div>
<div id="STW-C"><input class="FU-TXT" id="Text1" type="text" value="جستجو.." onfocus="if(this.value == 'جستجو..') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'جستجو..'; }" /></div>
<div id="STW-L"></div>
</div>
</div>
</div>
</div>
</div>
من تو همین اول کد گیر کردم و نتونستم اونجور که باید این کد ها رو درک کنم تا بتونم خودم یکیش رو بنویسم

<div id="Head-Bg">
<div id="Wraper">
<div id="Header-Wraper">
<div id="Header-Logo1"></div>
<div id="Header-Logo2"></div>
</div>
</div>
</div>
ممنون میشم اگه کسی کمکم کنه

saradarya

پنج شنبه 26 اردیبهشت 1392, 11:05 صبح

اچ تی ام ال رو مشکل داری یا سی اس اس؟

r4hgozar

پنج شنبه 26 اردیبهشت 1392, 11:29 صبح

عزیز من هم همینطوری شروع کردم به یاد گرفتن طراحی وب.
اول بشین خاصیت ها رو بررسی کنن
یعنی margin, float,position,..........
بعد می تونی بهتر درک کنی.
نگاه کن دایو رد یه جعبه در نظر بگیر. تو می تونی جعبه ها رو کنار هم بزاری ( با استفاده از خاصیت هایی که گفتم بررسی کن). جعبه ها رو توی هم بزاری یا زیر هم و مدل های مختلف دیگه.
بستگی داره چی بخوای و از خاصیت ها چطوری استفاده کنی.

راستی عجله نکن/ یکم وقت بزار

موفق باشی

mehbod.rayaneh

پنج شنبه 26 اردیبهشت 1392, 12:36 عصر

سلام
من 1 توضیح مختصر میدم! ولی اگه 1 کتاب در مورد html خونده بودید کاملا براتون قابل درک بود! :چشمک:
ببینید div ها جداولی هستند ک شما میتونید با استفاده از اونها صفحه را html را جدول بندی کنید و توی هر جدول محتوی دلخواهتون را قرار بدید!
استایل دادن به div ها را میتونید با فراخوانی از css اینجام بدید. خوب؟
ینی وقتی شما میخواید به یکی از جداولتون اندازه بدید میتونید برید توی css و این کارو انجام بدید! خوب؟
حالا برا این ک به هر جدول استایل اختصاصی بدید و معلوم باشه ک کدوم استایل مال کدوم جدوله 1 id یا class برا جدول میذاریم!
به این شکل ک اگه توی اچ تی ام ال بنویسید : <div id="gholam"></div> و بخواید بهش استایل بدید توی css مینویسید :
#gholam {
width: 6px;
height: 31px;
float: right;}
و برای کلاس هم به همین شکل : <div class="gholam"></div>
در css مینویسیم :
.gholam {
width: 6px;
height: 31px;
float: right;}
ب همین راحتی! فقط تفاوتشون اینه ک جداول کلی تر را با id و جدوال جزئی را با class استایل میدن و طبق استاندارد w3 از id یک بار میتونید استفاده کنید ولی از class بینهایت!
ب همین راحتی!
فهمیدید چی شد؟!

mehran788

پنج شنبه 26 اردیبهشت 1392, 17:15 عصر

سلام
من 1 توضیح مختصر میدم! ولی اگه 1 کتاب در مورد html خونده بودید کاملا براتون قابل درک بود! :چشمک:
ببینید div ها جداولی هستند ک شما میتونید با استفاده از اونها صفحه را html را جدول بندی کنید و توی هر جدول محتوی دلخواهتون را قرار بدید!
استایل دادن به div ها را میتونید با فراخوانی از css اینجام بدید. خوب؟
ینی وقتی شما میخواید به یکی از جداولتون اندازه بدید میتونید برید توی css و این کارو انجام بدید! خوب؟
حالا برا این ک به هر جدول استایل اختصاصی بدید و معلوم باشه ک کدوم استایل مال کدوم جدوله 1 id یا class برا جدول میذاریم!
به این شکل ک اگه توی اچ تی ام ال بنویسید : <div id="gholam"></div> و بخواید بهش استایل بدید توی css مینویسید :
#gholam {
width: 6px;
height: 31px;
float: right;}
و برای کلاس هم به همین شکل : <div class="gholam"></div>
در css مینویسیم :
.gholam {
width: 6px;
height: 31px;
float: right;}
ب همین راحتی! فقط تفاوتشون اینه ک جداول کلی تر را با id و جدوال جزئی را با class استایل میدن و طبق استاندارد w3 از id یک بار میتونید استفاده کنید ولی از class بینهایت!
ب همین راحتی!
فهمیدید چی شد؟!

ممنون دوست عزیز که وقت گذاشتی و برام توضیح دادی
ولی من چند تا سوال دیگگه دارم
اول اینکه شما گفتین ما با تگ div صفحه رو جدول بندی می کنیم تا چیزهایی رو که می خوایم دقیقا تو محل مورد نظر بذاریم حالا ما وقتی اندازه رو مشخص می کنیم مثلا تو همین کد
#gholam {
width: 6px;
height: 31px;
float: right;}
Html دقیقا از کجا می فهمه که ما این اندازه رو تو کجای صفحه می خوایم ایجاد کنیم چون ما مکان ددقیقی واسش مشخص نکردیم
و هم چنین تو کدید که من خودم گذاشتم اولش اینجوریه
<div id="Head-Bg">
<div id="Wraper">
<div id="Header-Wraper">
</div>
</div>
</div>
این سه تا div هدر وب رو بارگذاری می کنه ولی وقتی ما فقط این خط رو می نویسیم کار نمی کنه
<div id="Head-Bg">

</div>
ولی من می بینم که تو css دقیقا تو این بخش هست که عکس رو بارگذاری می کنه
حتی تو این حالت هم کار نمیکنه
<div id="Head-Bg">
<div id="Wraper">

</div>
</div>
ولی وقتی div سوم رو اضافه می کنیم کار می کنه
<div id="Head-Bg">
<div id="Wraper">
<div id="Header-Wraper">
</div>
</div>
</div>
خوب این div سوم دقیقا چی داره که باعث می شه عکس نمایش داده بشه در حالی که عکس تو div اول به برنامه اضافه شده
نمی دونم شاید سوال خیلی چرتی پرسیده باشم ولی باور کنید هر کاری کردم هیچی متوجه نشدم.

mehbod.rayaneh

پنج شنبه 26 اردیبهشت 1392, 21:06 عصر

شما تا نرید در مورد html و Css مطالعه کنید من هرچی هم توضیح بدم متوجه نمی شید!
ولی این ک از کجا میفهمه :
ببینید شما 1 <body> دارید ک کل بدنه سایت را درش قرار میدید!
حالا div هایی ک درش قرار میدید از بالا سمت راست یا چپ مطابق با استایلی ک بهشون میدید چیده میشن و میان پایین!
فاصله جداول از همدیگه و ... را هم با استفاده از margin , padding در css مشخص میکنید!
این جداولی ک گفتم تو در تو هستن! یعنی شما بینهایت جدول تو در تو میتونید بسازید!
حالا بریم سر اون 3 خطی ک شما باهاش مشکل دارید :چشمک:
اگه به دیو اول و استایلی ک بهش دادن توجه کنید :
main-height:100px;
همچی چیزی نداریم!:لبخند:
min-height:100px;داریم!
یعنی حداقل ارتفاع!
اینو هر جا اینجوریه درست کنید!
چون غلط املایی داره ارتفاع را نمیخونه و طبیعتا تا نوشته یا 1 دیو با عرض و ارتفاع معین درش قرار نگیره نمایش داده نمیشه!
ب همین راحتی! توی دیو دوم هم همینطور! و در دیو سوم مشکلی نیست!

heidarymh73

جمعه 27 اردیبهشت 1392, 01:31 صبح

سلام به همگی دوست من div یا هر تگ دیگه از html امروزه بیشتر با css معنی پیدا می کنند اکثرا همین طورند و به تنهایی خیلی ساده هستند
سایت زیر همه اموزشی داره انگلیسی هست اما خوب زبانتونم خوب میشه
w3schools.com
بعد از اون آقای mehran788 در بعضی از قسمت های تاپیکتون دیدم که گفتید اجرا نمیشه
خوب نحوه قرار گرفتم دیو ها در قسمت html کدتون اونجاس
تا جایی که من خوندم اون مقاله اموزشی رو
فکر میکنم اول wrapper بعدش head wrapper بعد head-bg
البته در اون اموزش خیلی راحت توضیح داده و چیز خاصی نیس و در عرض چند ساعت میشه خوندش اما قبلش باید حداقل 50 درصد اشنایی با html,cssداشته باشید

mehran788

جمعه 27 اردیبهشت 1392, 17:17 عصر

دوستان از کمکی کردید واقعا ممنون الان دیگه فهمیدم جریان از چه قراره
باید html , css رو خوب می خوندم ولی به دلیل کمبود وقت فقط یه منبع کوچیک درباره اون خوندم و شروع به کار کردم و با کمک شما الان تقریبا راه افتادم
یه سواال دیگه:اگه بخوایم یک div رو وسط چین کنیم باید چکار انجام بدیم چون من حتی تو سایتب که جناب heidarymh73 گفتن هم رفتم و نگاه کردم ولی float مقداری برای وسط چین کردن نداشت.حالا تکلیف چیه؟

mehbod.rayaneh

جمعه 27 اردیبهشت 1392, 17:21 عصر

وسط چین کردن : margin : auto;