ورود

View Full Version : نحوه ی طراحی صفحه با div



debugger
یک شنبه 08 خرداد 1390, 10:41 صبح
دوستان کسی می تونه یه قالب ساده با DIV طراحی کنه و بزاه بنده ببینم

مثلا یه صفحه HTML ساده که بالاش هدر و دو ستونه باشه و پائینش فوتر باشه

من هر کاری می کنم نمیشه مثل تیبل انعطاف پذیر نیست یا اصلا نمیشه SPLIT کرد

با تشکر

colors
یک شنبه 08 خرداد 1390, 16:20 عصر
درود

بفرمایید
(اگر با CSS کار کرده باشید کد بسیار آسانی هست)


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div#shell{ position:absolute; z-index:1; width:99%; height:99%}

div#header{ position:relative; z-index:2; width:100%; height:100px; background: #3C6}

div#content{ position:relative; z-index:2; width:75%; height:450px; background: #39F; float:right}

div#sidebar{ position:relative; z-index:2; width:25%; height:450px; background:#0FF}

div#footer{ position:relative; z-index:2; width::100%; height:100px; background:#0C9}
</style>
</head>

<body>

<div id="shell">

<div id="header">header</div>

<div id="content">content</div>

<div id="sidebar">sidebar</div>

<div id="footer">footer</div>

</div>


</body>
</html>

debugger
چهارشنبه 11 خرداد 1390, 19:04 عصر
لطفا يه كد خوانا بزارين . يه چيزي بزار كه فايل css اش جدا باشه . و بي زحمت فايل را اتچ كن . تا دانلود كنم . اين كد ها نامرتب هستنن سه ساعت باسد اينا رو درست كنم

colors
چهارشنبه 11 خرداد 1390, 20:41 عصر
بفرمایید...

debugger
پنج شنبه 12 خرداد 1390, 13:59 عصر
دوست عزيز چطور ميشه جاي كانتنت و سايد بار را عوض كرد ؟ يا سوال ديگه اينكه فرض كن سايد بار قسمت منو ها هستش وقتي با تيبل كار مي كزديم مي يومديم split مي كرديم حالا اينجا بايد چي كار كنيم . كلا با درست كردن div در قسمت هاي مختلف مشكل دارم . الان مثلا هر كاري كردم نتونستم دو ستونه اش كنم

لطفا پراپرتي هاي مهم در css را كه در كار با Div خيلي كاربرد دارند را بنويسيد با كمي توضيح مختصر

با اكثر پراپرتي ها اشنا هستم

ممنونم ميشوم اگر بنده را راهنمايي فرمائيد

colors
پنج شنبه 12 خرداد 1390, 16:53 عصر
درود

دوست عزیز دقیق نمیدون شم چه نوع راهنمایی لازم دارید!

دقت کنید که DIV ها همانند table صفات خاصه زیادی ندارند - مثلا در تگ table شما میتونید مستقیما توسط صفت width عرض جدول رو مشخص کنید اما تگ div از این خصوصیات پشتیبانی نمیکنه و شما باید با استفاده از CSS خصوصیات رو اعمال کنید - توصیه میکنم یک کتاب الکترونیکی در مورد CSS بخونید تا با آن آشنا شوید چون به دست گرفتن کنترل DIV ها نیاز به کار با CSS داره .

جواب سوال اول : برای جابه جا کردن دیوها باید به خصوصیات CSS آن دسترسی داشته و آنها را تغییر داده .
جواب سوال دوم : باید یک DIV دیگر تعریف کنید . می تونید داخل دیو ساید بار دوتا دیو تعریف کنید .

پراپرتی های مهم در CSS زیاد هستن و تعریف همه آنها در اینجا جالب نیست و بازم توصیه میکنم به یه کتاب مراجعه کنید . ( کتاب های فروان و رایگانی به زبان فارسی برای CSS وجود داره )

موفق باشید