PDA

View Full Version : گفتگو: ساخت قالب چند ستوني براي سايت با CSS


MMSHFE
یک شنبه 22 اسفند 1389, 10:27 صبح
با سلام، دوستان به نظرم اين موضوع جالبه. خيلي دوست دارم در اين مورد با هم تبادل نظر كنيم. خودم هم اين موضوع رو شروع كردم ولي يك جاي كار به مشكل برخوردم. اگه تمايل دارين، بفرماييد تا شروع كنيم و درصورت نياز، يكسري آموزش اوليه هم اينجا بگذارم (بعنوان پيشنياز). ضمناً توي كدي كه كار ميكنم، تگهاي سفارشي خودم رو هم ساختم.
موفق و مؤيد باشيد.
-----
ويرايش: راستي، ميدونم كه موضوعش ربطي به PHP نداره ولي جان من انتقالش ندين. من فقط توي تالار PHP ميام و كلاً با بقيه بخشهاي اين سايت كار نميكنم. بعلاوه ميشه ازش توي PHP هم استفاده كرد. پس بگذارين همينجا بمونه.
با تشكر از مديران تالار PHP
mtchabok
یک شنبه 22 اسفند 1389, 10:37 صبح
با سلام
منم موافق این گفتگو هستم ...
پس من شروع میکنم ... من خودم برای چند ستونه کردن صفحاتم توسط css از float ها به صورت کنار هم استفاده میکنم ...
به این صورت که ستون اول float:right ، ستون دوم float:right ، ستون سوم float:left که با اینکار دو ستون اول به سمت راست متمایل میشوند و فقط ستون سوم هس که به سمت چپ می چسبد ...
البته در مورد انعطاف پذیر بودن عرض ستونها هنوز کار بسیار سختی هس در این روش چونکه دادن عرض درصدی بسیار حساس و ظریف هس کار رو با این روش سخت کرده .
البته اگه دوستان راه حلی رو برای عرض ستونهای منعطف دارن خوشحال میشم که در اختیار منم بزارن .
xoogle.ir
یک شنبه 22 اسفند 1389, 11:43 صبح
عرض ستون های منعطف رو با table به راحتی میشه درآورد به این صورت که عرض جدول رو 100 درصد می دهید و 2 ستون براش میسازید و مثلا عرض ستون سمت راست رو 200px تعیین میکنید در این صورت ستون سمت چپ به اندازه رزولیشن صفحه بزرگ و کوچک میشود.
البته استفاده از این راه در پروژه هایی توصیه میشه که seo و سرعت لود بالای اون براتون مهم نیست.

برای ساخت ستون با عرض درصدی با div هم باید یک div رو با عرض 200px و float: right بسازید و position: absolute بسازیر و یک div دیگر رو در کنارش قرار بدین و margin سمت راست div دوم رو مثلا 220px بدهید.
MMSHFE
یک شنبه 22 اسفند 1389, 12:11 عصر
با سلام
منم موافق این گفتگو هستم ...
پس من شروع میکنم ... من خودم برای چند ستونه کردن صفحاتم توسط css از float ها به صورت کنار هم استفاده میکنم ...
به این صورت که ستون اول float:right ، ستون دوم float:right ، ستون سوم float:left که با اینکار دو ستون اول به سمت راست متمایل میشوند و فقط ستون سوم هس که به سمت چپ می چسبد ...
البته در مورد انعطاف پذیر بودن عرض ستونها هنوز کار بسیار سختی هس در این روش چونکه دادن عرض درصدی بسیار حساس و ظریف هس کار رو با این روش سخت کرده .
البته اگه دوستان راه حلی رو برای عرض ستونهای منعطف دارن خوشحال میشم که در اختیار منم بزارن .
با سلام، روشي كه گفتين كاملاً صحيح هست. فقط يك نكته و اون اينكه من همه ستونها رو float: right ميگذارم. ضمناً درمورد عدم انعطاف پذيري عرض ستونها هم واقعاً مشكل وجود داره. البته براي رفع نسبي اين مسئله، من خودم تگهاي دلخواه ايجاد كردم:


<SECTION>
<NAV>
...
</NAV>
<ARTICLES>
...
</ARTICLES>
<POLL>
...
</POLL>
</SECTION>
و بعد در كد CSS اينطوري عمل كردم:

section {
width: 100%;
clear: both;
}
nav,articles,poll {
float: right;
}
nav {
width: 200px;
}
articles {
width: 600px;
}
poll {
width: 200px;
}

اينطوري پهناي كلي ميشه 100 درصد ولي نهايتاً پهناي هر ستون رو نميشه درصدي بيان كرد.
براي اين مورد راه حلي سراغ دارين؟
MMSHFE
یک شنبه 22 اسفند 1389, 12:29 عصر
درمورد استفاده از جدول كلاً موافق اين روش نيستم. درسته كه جواب ميده ولي امروزه همه به دنبال طراحي Table-Less هستن. براي مثال، با وجود اينكه جوملا مزاياي خيلي زيادي نسبت به PHP-Nuke داره ولي هميشه همين طراحي Table-Based جوملاً چماقي بوده كه PHP-Nuke باهاش توي سرش ميكوبيده!
MMSHFE
یک شنبه 22 اسفند 1389, 13:19 عصر
با سلام، مشكل درصد رو رفع كردم:


<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Multi Column Demo</TITLE>
<STYLE type="text/css">
* {
margin: 0px;
padding: 0px;

}
body {
background-color: rgb(153,153,153);
}
section {
background-color: rgb(203,203,203);
width: 100%;
display: block;
overflow: hidden;
clear: both;
}
nav,article,poll {
float: left;
}
nav {
width: 15%;
}
article {
width: 50%;
}
poll {
width: 35%;
}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<NAV>
Menu Goes Here
</NAV>
<ARTICLE>
Articles will be displayed here
</ARTICLE>
<POLL>
And finally, the poll is shown here
</POLL>
</SECTION>
</BODY>
</HTML>

اما الآن اون مشكلي كه گفتم خودش رو نشون ميده:
اگه توي هر بخش از جدول استفاده شده باشه، بين سطرهاي جدول ازنظر عمودي، بعضي مواقع يك فاصله اضافه ايجاد ميشه. اين مشكل توي كتاب مرجع خود CSS3 هم بهش اشاره شده و گفته بايد از position: relative استفاده بشه ولي حقيقتش چون مثالي براي اين كار نداشت، هر چقدر روش كار كردم، جواب موردنظر رو نگرفتم. اگه بتونيم اين مشكل رو رفع كنيم، ميشه گفت كار تمومه. البته مشكل تنظيم عمودي غيرصحيح فقط مربوط به جداول نيست و كلاً در اين روش وجود داره كه بايد روي تعيين موقعيت نسبي كار كنيم تا اين مشكل رو رفع كنيم.
منتظر پيشنهادات دوستان هستم.
$ M 3 H R D A D $
یک شنبه 22 اسفند 1389, 13:20 عصر
بهتر از این سایت نمیشه پیدا کرد http://www.dynamicdrive.com/style/
رضا قربانی
یک شنبه 22 اسفند 1389, 13:25 عصر
عرض ستون های منعطف رو با table به راحتی میشه درآورد به این صورت که عرض جدول رو 100 درصد می دهید و 2 ستون براش میسازید و مثلا عرض ستون سمت راست رو 200px تعیین میکنید در این صورت ستون سمت چپ به اندازه رزولیشن صفحه بزرگ و کوچک میشود.
البته استفاده از این راه در پروژه هایی توصیه میشه که seo و سرعت لود بالای اون براتون مهم نیست.

برای ساخت ستون با عرض درصدی با div هم باید یک div رو با عرض 200px و float: right بسازید و position: absolute بسازیر و یک div دیگر رو در کنارش قرار بدین و margin سمت راست div دوم رو مثلا 220px بدهید.

استفاده از position اصلا استاندارد نیست . و وقتی ازش استفاده می کنیم باید داخل بلاکی با position: relitiveباشه

خود من وقتی سایتی می سازم - همیشه سعی می کنم سایت رو در مرکز صفحه قرار بدم و اندازه رو 1000 یا 900px بگیرم و body رو % می ذارم - و به هیچ وجه دیگه از % استفاده نمی کنم .

همیشه در نظر داشته باشید که بلاک های اصلی سایتتون نباید در صد باشه!!

منم برای بلاک بندی ( اگر سه بلاک داشته باشیم ) سه بلاک رو داخل یک بلاک قرار می دم و به همشون flot:right یا Left میدم ، هیچ موقع یکی رو راست و یکی رو چپ تنظیم نمی کنم.

توی استایل نویسی اولین شرط طراحی ، استاندارد نویسی هست که بتونه با تمامی مرورگر ها همخوانی داشته باشه (حتی اینترنت اکسپلورر ورژن 6)

همه می گن اصلا مرورگر خوبی نیست و اکثر بچه ها که قالب طراحی می کنن توی اکسپلورر 6 بهم می ریزه !!!!! چون اکسپلورر 6 استاندارد هست ، در صورتی که کسی ازش راضی نیست

خود من که دارم قالب طراحی می کنم اول با موزیلا همیشه تست می کنم بعد اپرا - کروم - اکسپلورر که همیشه روی سیستمم نصب هست.

امروزه CSS3 هم اومدی که امکانات خوبی داره ( مثلا می تونیم دور بلاک ها رو حلال بدیم) ولی حیف که تمامی مرورگر ها نمی تونن اون رو پشتیبانی کنند و یا اگر هم تونستن پشتیبانی کنند ، مردمان ایران تا بخوان جا بیافتن یه 3 الی 5 سالی طول می کشه .
============

همین سایتی که آقا مهرداد گذاشتید http://www.dynamicdrive.com/style/ وقتی مرورگرتون رو کوچک می کنید می تونید مشکلات بادی و رو ببینید !!! که بهم می ریزه

البته ، برای اینکه یه کم قالب رو گرافیکی کنیم باید از چیزای نا استاندارد استفاده کنیم که توی 6 بهم می ریزه ولی ما همیشه اکثریت رو در نظر می گیریم.

اگر هم بخوام مثلا 3 بلاک ، ارتفاع یا height رو به صورت اتو auto بذارم اول که هر سه بلاک height : auto; قرار می گیره و اولین بلاک که تمامی بلاک ها داخل اون قرار داره باید display:table; قرار بگیره تا قالب به هم نخوره و وقتی یکی مطلبی داخلش اضافه شد و ارتفاع زیاد شد ما بقی بلاک های زیرین هم ارتفاع آنها زیاد شود
MMSHFE
یک شنبه 22 اسفند 1389, 13:33 عصر
با سلام، ممنون از سايت خوبي كه معرفي كردين ولي قالبهاي اين سايت هم همون مشكلي كه گفتم رو دارن (تراز عمودي اشتباه در هر ستون). اگه با جدول كار كنيد، راحتتر متوجه اين اشتباهات ميشين. به خصوص اگه cellpadding و cellspacing و border رو روي صفر تنظيم كنيد و از يك عكس كوچك (1x1) با زمينه رنگي كه تكرار شده، بعنوان پس زمينه جدول استفاده كنيد.
موفق و مؤيد باشيد.
رضا قربانی
یک شنبه 22 اسفند 1389, 14:38 عصر
برای اینکه دوستان واضحتر متوجه داستان بشن من یه قالب بسیار ساده با جداول طراحی کردم .

کافیه یک صفحه html درست کنید و این کدها رو داخلش قرار بدید و یک پوشه image که داخلش یک عکس به نام Blue hills.jpg قرار گرفته شده رو تشکیل بدید


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<table width="70%" border="1" align="center" bgcolor="#66FFFF">
<tr>
<td><table width="100%" border="1">
<tr>
<td width="100%" height="180"><img src="image/Blue hills.jpg" height="180" width="100%"></td>
</tr>
<tr>
<td width="100%" height="20"> <marquee direction="right" bgcolor="#66CCFF" scrollamount="4" >عرض سایت به صورت اتوماتیک - کافیه مرورگر خودتون رو کوچک کنید و اندازه سایت هم نصب به مرورگر تغییر خواهد کرد</marquee></td>
</tr>
<tr>
<td height="590"><table width="100%" border="1">
<tr>
<td width="60%" height="100%"><table width="70%" border="1" align="center">
<tr>
<td height="20" align="center">اخبار</td>
</tr>
<tr>
<td height="100" align="center" valign="middle">&nbsp;</td>
</tr>
</table></td>
<td width="40%" height="590"><table width="70%" border="1" align="center">
<tr>
<td height="20" align="center" valign="middle">منو</td>
</tr>
<tr>
<td height="100" align="center" valign="middle">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<table width="70%" border="1" align="center">
<tr>
<td height="20" align="center">آمار سایت </td>
</tr>
<tr>
<td height="100" align="center" valign="middle">&nbsp;</td>
</tr>
</table> <p>&nbsp;</p></td>
</tr>
</table></td>
</tr>
<tr>
<td width="100%" height="20">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
$ M 3 H R D A D $
دوشنبه 23 اسفند 1389, 01:51 صبح
من عقیدم اینه که با div طراحی بشه چون IE باهاش سازگارتر از جدوله
دلیلشم اینه که شروع دایو تا آخرشو پردازش میکنه و بعد خروجی میده و این باعث میشه ساختارش بهتر نمایش بده اما جدول انعطاف پذیرترهخ تو نمایش و پشت هم میره برای نمایش و این انعطاف نظم و یکم میاره پایین اما بدیه دایو اینه که باید برای همه قسمت هاش استایل بنویسی با تشکر
MMSHFE
دوشنبه 23 اسفند 1389, 06:48 صبح
اينكه دوباره شد همون استفاده از جدول! هدف از اين گفتگو اينه كه درمورد طراحي با CSS و بصورت Table-Less تبادل نظر كنيم وگرنه ساختن صفحه چند ستوني با جدول كه كار سختي نيست. بعلاوه يكي از مشكلات جدول اينه كه اگه بخوايم يك ستون مطالب زيادي داشته باشه و بقيه مطلب نداشته باشن، بايد توي ستونهاي ديگه، TDهاي خالي ايجاد كنيم كه اصلاً مناسب نيست. فرض كنيد 50 عدد TD خالي توي صفحه باشه. هم باعث كاهش سرعت بارگذاري ميشه و هم اينكه اگه مطلب جديدي بخواد درج بشه، مطالب هر سطر جدول ازنظر ارتفاع با هم داراي يك اندازه خواهند بود كه ممكنه مطلوب نباشه.
لطفاً درمورد رفع مشكلي كه اشاره كردم با CSS تبادل نظر كنيد.
EhsanSQL
دوشنبه 23 اسفند 1389, 07:09 صبح
من همیشه از <div> و CSS استفاده می کنم. برای سازگاری ie هم یه شرط تعریف می کنم تا CSS عوض شه. من اکثر مواقع تک ستونی یا دو ستونی استفاده می کنم و اون ها را توی box با پروپرتی های تزیینی متمرکز رو مرکز تعیین می کنم. برای سلکتور های سه ستون از آی دی استفاده می کنم. برای این که فاصله ها بین ستون ها خوب بیفته از % استفاده می کنم. مثلا:
20% 60% 20%
اما ممکنه یه ستون بد بیفته برای همین از هر اندازی سه دهم کم می کنم:
19.7% 59.7% 19.7%

این طور یه فاصله خالی برای زوم هم میفته.
MMSHFE
دوشنبه 23 اسفند 1389, 07:37 صبح
با سلام، فايل ضميمه رو مشاهده كنيد تا دقيقاً متوجه منظورم بشين. جالبه كه توي IE مشكلي نداره و با FF به مشكل بر ميخوره. البته ناگفته نمونه كه توي IE كلاً حالت سه ستونه حذف ميشه ولي حداقل جدول رو درست نشون ميده!
-----
ويرايش: براي نمايش درست در IE نبايد از تگهاي سفارشي استفاده كرد. اين كد رو جايگزين index.php اصلي كنيد تا در IE هم سه ستونه نمايش داده بشه:


<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Multi Column Demo</TITLE>
<STYLE type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(153,153,153);
}
.section {
background-color: rgb(203,203,203);
width: 100%;
display: block;
overflow: hidden;
clear: both;
}
.nav,.article,.poll {
float: left;
}
.nav {
width: 15%;
}
.article {
width: 50%;
}
.poll {
width: 35%;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="section">
<DIV class="nav">
Menu Goes Here
</DIV>
<DIV class="article">
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR align="left" valign="middle">
<TD><IMG src="p_top-right.png"/></TD>
<TD background="p_top-center.png" style="background-repeat: repeat-x">&nbsp;</TD>
<TD><IMG src="p_top-left.png"/></TD>
</TR>
<TR align="left" valign="middle">
<TD background="p_right.png" style="background-repeat: repeat-y">&nbsp;</TD>
<TD background="bg.bmp" style="background-repeat: repeat">Articles will be displayed here</TD>
<TD background="p_left.png" style="background-repeat: repeat-y">&nbsp;</TD>
</TR>
<TR align="left" valign="middle">
<TD><IMG src="p_bottom-right.png"/></TD>
<TD background="p_bottom-center.png" style="background-repeat: repeat-x">&nbsp;</TD>
<TD><IMG src="p_bottom-left.png"/></TD>
</TR>
</TABLE>
</DIV>
<DIV class="poll">
And finally, the poll is shown here
</DIV>
</DIV>
</BODY>
</HTML>

جالبه كه IE بدون مشكل نمايش ميده. اولين باريه كه ميبينم FF داره كم مياره! :متعجب:
رضا قربانی
دوشنبه 23 اسفند 1389, 10:16 صبح
نه - واسه من ، تو هر سه مرورگر قسمت بالایی از هم پاشیده می شه (اپرا - موزیلا - اینترنت اکسپلورر)
MMSHFE
دوشنبه 23 اسفند 1389, 10:29 صبح
چه نگارشي از IE رو تست كردين؟ من با 6 امتحان كردم! شرمنده كه قديميه ولي انگار بهتر نشون ميده.
رضا قربانی
دوشنبه 23 اسفند 1389, 17:31 عصر
چه نگارشي از IE رو تست كردين؟ من با 6 امتحان كردم! شرمنده كه قديميه ولي انگار بهتر نشون ميده.

از نسخه 8 - و بقیه مرورگرها هم ورژن بالا هستن

همیشه باید اکثریت رو در نظر بگیری
arturmacnight
سه شنبه 24 اسفند 1389, 05:21 صبح
دوست عزیز کد شما اشکالات زیادی داره. شما اون بالا تعریف کردید که HTML5 هست صفحه ولی خیلی از تگهایی که استفاده اشون ممنوعه در HTML5 استفاده کردید.

در HTML5 هم نباید تگ هایی که پایانش خودشونن را با / ببندید. شیوه معرفی بکراند برای td هم فوق العاده اشتباه انجام دادید.

چون ساعت 5:30 صبحه و هنوز نخوابیدم فرصت این رو ندارم که کلا با div براتون طراحی کنم ولی براتون اون دو تا عکس بالا رو درست کردم و اون مشکل رو رفع کردم البته اگه مشکلتون تیکه شدن TR بالا بود!
چیزهایی که به این شکل هستن رو حتما باید کاملا با div طراحی کرد. این شیوه طراحی فوق العاده اشتباهه.

بقیه کدهاتون رو هم به صورتی که توی استایل بکراند رو معرفی کردم معرفی کنید. فرصت نداشتم همه رو درست کنم.

من بحث این تاپیک را کامل نخوندم ولی فکر کنم این رو توی بخش طراحی مطرح می کردید خیلی سریع جواب میگرفتید.

موفق باشید.
MMSHFE
سه شنبه 24 اسفند 1389, 12:18 عصر
با سلام، ضمن تشکر از همکاریتون توی این بحث، هدف از این گفتگو رفع همین مشکلات هست. تا جایی که فهمیدم، فقط به جای استفاده از تگ IMG، از خاصیت Background خود TD استفاده کردین. خوب با این کار مشکل رفع میشه ولی اگه واقعاً ما توی اون تگ یکسری محتوا (مثلاً عکس و...) داشته باشیم، باز هم این مشکل بروز میکنه. درسته؟ (البته الآن دیگه بعید میدونم چون برای TR ارتفاع رو مشخص کردین. اما چرا 23؟ ارتفاع عکس 25 هست. من 25 گذاشتم و باز هم درست نشون داد. دلیل خاصی وجود داشته؟) راستی، خودم هم این جدول رو با DIV پیاده سازی کردم ولی الآن همراهم نیست که بگذارم. اگه خدا بخواد کد اون مدلی رو هم میگذارم.
ممنون.
موفق باشید.
رضا قربانی
شنبه 06 فروردین 1390, 03:58 صبح
سلام دوستان
واسه اینکه سرتون رو درد نیارم سریع می رم سر اصل مطلب

من توی CSS یه a و یه a:hover دارم

یعنی وقتی روی لینکی میری شکل اون لینک عوض می شه
تا اینجا درست

حالا من می خوام که وقتی روی اون لینک کلیک شد و رفت وارد اون صفحه شد این لینکم به صورت hover باقی بمونه

مثلا بعضی از سایت ها روی لینک منوهاشون انجام دادن : وقتی روی یک منوی می زنی ، اون لینک منو ، به همون صورت باقی می مونه(مثلا رنگش عوض می شه)

ممنون می شم راهنماییم کنید
sargardoon
شنبه 06 فروردین 1390, 08:42 صبح
اگر به دنبال طراحی table-less میگردید فکر کنم این مقاله به دردتون بخوره
http://boplo.ir/web-design/html-tables-advantages-disadvantages/

موفق باشید.
sargardoon
شنبه 06 فروردین 1390, 08:47 صبح
سلام دوستان
واسه اینکه سرتون رو درد نیارم سریع می رم سر اصل مطلب

من توی CSS یه a و یه a:hover دارم

یعنی وقتی روی لینکی میری شکل اون لینک عوض می شه
تا اینجا درست

حالا من می خوام که وقتی روی اون لینک کلیک شد و رفت وارد اون صفحه شد این لینکم به صورت hover باقی بمونه

مثلا بعضی از سایت ها روی لینک منوهاشون انجام دادن : وقتی روی یک منوی می زنی ، اون لینک منو ، به همون صورت باقی می مونه(مثلا رنگش عوض می شه)

ممنون می شم راهنماییم کنید

دوست عزیز در css کلا برای لینک چند حالت وجود داره

a:link
a:visit
a:hover
a:active
که ترتیب اینها مهمه هستش، گرینه اول برای لینک در حالت عادی هستش، گرینه دوم برای لینکهای ویزیت شده میباشد، گرینه سوم برای زمانی که موس بروی لینک حرکت میکند و گزینه آخر هم برای لینکهای فعال هستش که فکر کنم این به درد شما میخوره

موفق باشید.
sargardoon
شنبه 06 فروردین 1390, 08:53 صبح
دوستان برای اینکه طرح شما در تمامی مرورگرها کار کنه بهتره براش شرط بذارید مثلا


<!--[if lt IE7]>
<style type="text/css">
YOUR STYLE CODE
</style>
<![endif]-->
lt مخفف less than میباشد که شما میتونید هر مقداری که میخواهید بگذارید. و اگر مثل من از IE متنفرید میتونید از برنامه IETester برای نحوه نمایش در ورژنهای مختلف آن استفاده کنید.
sargardoon
شنبه 06 فروردین 1390, 09:10 صبح
با سلام
منم موافق این گفتگو هستم ...
پس من شروع میکنم ... من خودم برای چند ستونه کردن صفحاتم توسط css از float ها به صورت کنار هم استفاده میکنم ...
به این صورت که ستون اول float:right ، ستون دوم float:right ، ستون سوم float:left که با اینکار دو ستون اول به سمت راست متمایل میشوند و فقط ستون سوم هس که به سمت چپ می چسبد ...
البته در مورد انعطاف پذیر بودن عرض ستونها هنوز کار بسیار سختی هس در این روش چونکه دادن عرض درصدی بسیار حساس و ظریف هس کار رو با این روش سخت کرده .
البته اگه دوستان راه حلی رو برای عرض ستونهای منعطف دارن خوشحال میشم که در اختیار منم بزارن .

من خودم بیشتر به این روش استفاده میکنم که صفحه رو به 3 قسمت تبدیل میکنم Header, Container, Footer و Container به دو قسمت پست و سایدبار تقسیم میکنم
برای مقدار دهی میتونی مقدار width را auto با margin بالا قرار (مثلا 40px برای سمت چپ و راست) بدی و یا از درصد استفاده کنی. اگر مقدار به درصد باشه مزیتهای زیادی از جمله سازگار در انواع screen resolution داره

این عکس پایین ضمیمه کردم نمونه طرحی هستش که من کاملا با استایل طراحیش کردم برای پروژه ای که دارم توی PHP مینویسیم (http://barnamenevis.org/showthread.php?279229-%D8%A7%DB%8C%D8%AF%D9%87-%D9%88-%D8%B1%D8%A7%D8%AD%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%88%D8%A8-%D8%AF%D8%A7%DB%8C%D8%B1%DA%A9%D8%AA%D9%88%D8%B1%D B%8C)


موفق باشید.
sargardoon
شنبه 06 فروردین 1390, 09:25 صبح
یه چیزی که یادم رفت بگم اینکه در طراحی یه نکته یادتون باشه که مرورگرهای به صورت پیش فرض مقدار margin-right, margin-left دارند. به این علت هستش که شما در طراحی به مشکل برمیخورید. این مشکل بیشتر در IE هستش. برای حل این مشکل باید یا از گزینه شرطی استفاده کنید و یا مقدار آنها را نسبت به floating آنها تعیین کنید مثلا اگر float:right انتخاب میکنید حتما مقدار margin-right را هم تعیین کنید تا مشکل برطرف بشه، امیدوارم که تونسته باشم منظورم رو به درستی گفته باشم
parselearn
شنبه 06 فروردین 1390, 10:15 صبح
یه چیزی که یادم رفت بگم اینکه در طراحی یه نکته یادتون باشه که مرورگرهای به صورت پیش فرض مقدار margin-right, margin-left دارند. به این علت هستش که شما در طراحی به مشکل برمیخورید. این مشکل بیشتر در IE هستش. برای حل این مشکل باید یا از گزینه شرطی استفاده کنید و یا مقدار آنها را نسبت به floating آنها تعیین کنید مثلا اگر float:right انتخاب میکنید حتما مقدار margin-right را هم تعیین کنید تا مشکل برطرف بشه، امیدوارم که تونسته باشم منظورم رو به درستی گفته باشم


براي اينكه فاصله ها رو در مرورگرهاي مختلف از بين ببريد. ميتونيد از reset css (http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css) استفاده كنيد
رضا قربانی
شنبه 06 فروردین 1390, 13:54 عصر
براي اينكه فاصله ها رو در مرورگرهاي مختلف از بين ببريد. ميتونيد از reset css (http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css) استفاده كنيد
این رو باید زمانی استفاده کنیم که هنوز قالبی طراحی نکردیم و بر اساس این ریست طراحی کنیم!!! در غیر این صورت در بین سراحی به مشکل بر می خوریم


دوست عزیز در css کلا برای لینک چند حالت وجود داره
1
2
3
4
a:link
a:visit
a:hover
a:active




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


داداش یه مثال می زنی که وقتی روی لینکی رفتیم اون لینک اکتیو بشه
sargardoon
شنبه 06 فروردین 1390, 16:08 عصر
این رو باید زمانی استفاده کنیم که هنوز قالبی طراحی نکردیم و بر اساس این ریست طراحی کنیم!!! در غیر این صورت در بین سراحی به مشکل بر می خوریم



داداش یه مثال می زنی که وقتی روی لینکی رفتیم اون لینک اکتیو بشه

این هم یه مثال امیدوارم که به دردت بخوره

<!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>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>

<div>
<h1>Archive</h1>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
#nav {
margin:0;
padding:0;
background:#808259 0 0 repeat-x;
float:left;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
}

#nav li {
display:inline;
padding:0;
margin:0;
}

#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}

#nav a:hover,
#nav a:focus {
color:#fff;
background:#727454;
}

#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}


موفق باشید.
رضا قربانی
شنبه 06 فروردین 1390, 16:26 عصر
داداش این چیزی که شما دادید درسته ولی وقتی قسمتی دیگه کلیک می کنی اون اکتیو از بین می ره - شما خودتون تست کنید . وقتی روی قسمت بادی سایت کلیک می کنی اون از حالت انتخاب رد می شه

این : http://www.templatemonster.com/category/brewery-templates/ سما راست منوهاش رو نیگاه کن===> من می خوام به همین صورت ساده بی دردسر باشه
MMSHFE
شنبه 06 فروردین 1390, 19:24 عصر
با سلام، دوست عزيز اين مدل لينك كردن با كدنويسي ايجاد شده به اين ترتيب كه اون صفحه كه توش هستين، ازطريق ['SERVER['PHP_SELF_$ استخراج ميشه و هركدوم از گزينه هاي منوها كه خاصيت href اونها با اين مقدار برابر باشه، بصورت تگ A درج نميشه و فقط متن ساده هست. نمونه اين كار رو توي صفحه بندي مطالب حتماً ديدين كه صفحه جاري لينك نيست و متن ساده هست.
موفق باشيد.
رضا قربانی
شنبه 06 فروردین 1390, 20:38 عصر
با سلام، دوست عزيز اين مدل لينك كردن با كدنويسي ايجاد شده به اين ترتيب كه اون صفحه كه توش هستين، ازطريق ['SERVER['PHP_SELF_$ استخراج ميشه و هركدوم از گزينه هاي منوها كه خاصيت href اونها با اين مقدار برابر باشه، بصورت تگ A درج نميشه و فقط متن ساده هست. نمونه اين كار رو توي صفحه بندي مطالب حتماً ديدين كه صفحه جاري لينك نيست و متن ساده هست.
موفق باشيد.
خسته نباشید

می شه یه نمونه ساده اش (مثلا دو تا لینک) رو واسم درست کنید تا من متوجه بشم.

ممنون می شم
MMSHFE
شنبه 06 فروردین 1390, 21:35 عصر
با سلام، به كد زير دقت كنيد (با فرض اينكه لينكها توي ديتابيس در جدولي بنام links ذخيره شده و متن هر لينك توي فيلد title و مسيرش توي فيلد href قرار داره) :


$result=mysql_query('select * from `links` order by `id`');
while($row=mysql_fetch_assoc($result))
{
if($row['href']!=$_SERVER['PHP_SELF'])
{
echo '<A href="'.$row['href'].'">';
}
echo $row['title'];
if($row['href']!=$_SERVER['PHP_SELF'])
{
echo '</A>';
}
echo '<'.'BR'.'/>'."\n";
}

نكته: در جدول مذكور، لينكها بايد به اين صورت ذخيره شده باشن:


/index.php
/test.php
/images/file.jpg

و الي آخر (منظورم فيلد href هست و title مهم نيست چطور ذخيره شده باشه).
موفق باشيد.
sargardoon
یک شنبه 07 فروردین 1390, 17:45 عصر
داداش این چیزی که شما دادید درسته ولی وقتی قسمتی دیگه کلیک می کنی اون اکتیو از بین می ره - شما خودتون تست کنید . وقتی روی قسمت بادی سایت کلیک می کنی اون از حالت انتخاب رد می شه

این : http://www.templatemonster.com/category/brewery-templates/ سما راست منوهاش رو نیگاه کن===> من می خوام به همین صورت ساده بی دردسر باشه
دوست عزیز میتونید با jQuery به راحتی درستش کنید. به نظرم این بهترین راه هستش.
رضا قربانی
یک شنبه 07 فروردین 1390, 20:39 عصر
دوست عزیز میتونید با jQuery به راحتی درستش کنید. به نظرم این بهترین راه هستش. می شه شما هم با jquery بسازید ؟
sargardoon
دوشنبه 08 فروردین 1390, 10:29 صبح
می شه شما هم با jquery بسازید ؟
عزیز دل برادر این هم چندین نمونه از منوها با طرح های مختلف با سورس کد
http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/
http://www.devwebpro.com/jquery-navigation-menu-tutorials/
http://designm.ag/resources/jquery-navigation-plugins/
http://www.ajaxline.com/10-best-jquery-menu-plugins
http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html


این مدلی که شما میخواهید میتونید به این آدرس سر بزنید
http://www.sunsean.com/idTabs/
http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx

به این سایت هم مراجعه کن منوهای جالبی داره
http://plugins.jquery.com/project/jQuery-Horizontal-Menu


موفق باشید.
رضا قربانی
دوشنبه 08 فروردین 1390, 12:58 عصر
داداش من که آماده نمی خواستم.


بازم ممنون از راهنمایی هاتون
sargardoon
دوشنبه 08 فروردین 1390, 14:46 عصر
داداش من که آماده نمی خواستم.
بازم ممنون از راهنمایی هاتون

اینها نمونه هستش که شما میتونی کدش رو بگیری و تغییرش بدی هرجوری که دوست داری.
رضا قربانی
دوشنبه 08 فروردین 1390, 20:02 عصر
بچه ها من چی کار کنم که یارو فایل css من رو نتونه بگیره (یعنی نتونه بفهمه توی کدوم پوشه قرار داره و وقتی سایت رو ذخیره می کنه فایل css همراهش نره )

مثلا من اینطوری فراخوانی می کنم:
<link rel="stylesheet" type="text/css" href="Mehr_D-esign/Reza.css" />
آیا با php راهی وجود داره ؟
ممنون می شم راهنماییم کنید
chaown
چهارشنبه 10 فروردین 1390, 14:45 عصر
سلام من یه راه دیگه میگم امیدوارم به دردتون بخوره هم سبکه هم راحت
. سه تا تگ DIV ایجاد کنید.
. برای اولی (چپی) این style رو قرار بدین
style="position:absolute; width:20%; left:0px;"
. برای دومی (وسطی) این style رو قرار بدین
style="position:absolute; left:20%; width:60%;"
. برای سومی (راستی) این style رو قرار بدین
[style="position:absolute; width:20%; left:80%;"
[/LTR_INLINE]البته هر چندتا ستون که خواستین می تونید ایجاد کنید ، فقط باید تعداد تگهای DIV رو بیشتر کنید و تویه استایل هم قسمتهای left و width رو تغییر بدین
اینم بگم که دیگه تویه طراحی های جدید از تگ DIV استفاده میشه به خاطر سبک کردن و راحت تر لود شدن صفحه ها