استاندارد های طراحی قالب

ataturk

Member
این کد را یک نگاهی بکنید .
<div style="width:1024px;">
<div align="center">
<div style="width:150px; float:left; position:absolute">
<div style="width:150px; background-color:#00FF00">منوی چپ</div>
<div style="width:150px; background-color:#00FFFF;">محتوای منوی چپ</div>
</div>

<div style="width:500px; float:none">
<div style="width:500px; background-color: #FF6600; height:30px">منوی وسط</div>
<div style="width:500px; background-color:#FFCC00">محتوای منوی وسط</div>
</div>

<div style="float:right; width:150px; position:absolute">
<div style="width:150px; background-color:#00FF00; margin-top:0px">منوی راست</div>
<div style="width:150px; background-color:#00FFFF">محتوای منوی سمت راست</div>
</div>

</div>
</div>
این تقریبا یه چیزی هست که من از دانسته هام از div زدم ولی منوی راست مشکل نداره اما منوی چپ دری وری میره یه نگاهی بندازید .
 
دوست عزیز.
اینی که طراحی کردی سرتا پا مشکله
نه فایرفاکس درست نمایشش می ده
نه اکسپلورر
اصلا کدنویسیت هم اشتباه
از float استفاده کن برای راست و چپ چینی
 

ataturk

Member
خب همون من می گم کلا کار با div بلد نیستم . از float هم استفاده کردم. ولی برای منوی وسط چیکار کنم .
float چهار تا مقدار می ده :
1- inherit
2- left
3- none
4- right
حالا من برای منوی وسط چی کار کنم . آرمان گفت همون که بین منوی چپ و راست یه div بذاری خودش میشه منوی وسط حداقل که من اینطوری فهمیدم .
 

arman92

Member
سلام دوست عزیز.
خواص FLoat که فرمودی..
اولی : Inherit یعنی اینه از قبل خودش به ارث می بره... (خاصیت وراثت که اکثراً توی همه ی خواص های CSS هست...)
دومی : Left که معلومه... دیو رو به سمت چپ صفحه می بره (با توجه به اینکه در کجای صفحه باشه... مثلاً ممکنه توی بادی (مستقیم و بدون پرنت (Parent) دیگه) باشه که در این صورت به سمت چپ صفحه می ره.... ولی اگه توی یه قسمت دیگه باشه مثلاً یه Div که اونم خودش عرض کمتری نسبت به کل بادی داشته باشه.... می ره به سمت چپ اون دیو...

خب توضیحات اضافی ندم...
lمقدار none : این مقدار مشخص می کنه که این ناحیه ی ما جای خاصی نداره... که عموما وسط تلقی می شه....
مقدار رایت هم برعکس لفت!

مثلاً من در این صفحه ... یه سری قالب طراحی کردم :
http://vindoz.blogfa.com/post-528.aspx
اینجا از خواص Float و Margin استفاده کردم... منوی سمت راست خاصیتش FLoat:right هست و قسمت پست های وبلاگ هم خاصیتش : Margin-right:auto;Margin-left:auto هست....
که اینطوری اون پست ها خودشون توسط مرورگر به وسط صفحه می رن ... چون مارجین ها آتو اعلام شدن..
با مطالعه ی سورس این صفحه (حتی قالب وبلاگ خودم) می تونید بهتر متوجه بشین...
در ضمن..
من خودم در وبلاگم مجبور شدم از Table ها استفاده کنم.... به دلیل عدم پشتیبانی بلاگفای لعنتی از Xhtml که اگه بدونین توی XHTML یه سری تغییراتی به وجود ااومد ... مثلاً اگه پدینگ دادی باید از ارتفاع و عرض اون ناحیه به همون نسبت کم کنی....
می تونید سی اس اس قالب خودم رو هم بخونید ... البته اگه چیری فهمیدید ازش!!

موفق باشید/ یا حق
 

ataturk

Member
من خودمم در طراحی با table اصلا مشکلی ندارم . فکر کنم این قالب که در همین پست گذاشتین به دردم خوب بخوره .
در ضمن نفهم هم نیستم . چون تا به حال با div کار نکردم نحوه ی کارش رو نمی دونم . و مرسی از توضیحاتتون
 

arman92

Member
من خودمم در طراحی با table اصلا مشکلی ندارم . فکر کنم این قالب که در همین پست گذاشتین به دردم خوب بخوره .
در ضمن نفهم هم نیستم . چون تا به حال با div کار نکردم نحوه ی کارش رو نمی دونم . و مرسی از توضیحاتتون

دوست عزیز سلام/

کی گفته "نفهم" ؟ استاد مایی!

اگه مشکلی بود می تونی با یاهو آی دی من در ارتباط باشی : arman_s92
 

DaRiOuShJh

Member
به به به
چه تاپیک هایی خوبی نمایان میشند هر چند وقت
الان بحثتون تموم شده یا به صورته پرسش و پاسخ پیش میرید؟
 
بچه ها من یه مشکلی دارم
ببینید این جدول های من رو:
aa.gif


حالا من می خوام اون دایو خاکستری بچسبه به دایو بالایی.
این هم کدم:
HTML:
<div style="float:right; border:0px solid #333333; width:1000px; height:600px; margin:5px; text-align:center">
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
	<div style="float:right; border:1px solid #333333; width:500px;margin:5px; height:30px;"></div>
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
	<div style="float:right; border:1px solid #333333; width:500px;margin:5px; height:30px; background-color:#CCCCCC"></div>
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
</div>

چی کار کنم؟
 

arman92

Member
بچه ها من یه مشکلی دارم
ببینید این جدول های من رو:
aa.gif


حالا من می خوام اون دایو خاکستری بچسبه به دایو بالایی.
این هم کدم:
HTML:
<div style="float:right; border:0px solid #333333; width:1000px; height:600px; margin:5px; text-align:center">
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
	<div style="float:right; border:1px solid #333333; width:500px;margin:5px; height:30px;"></div>
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
	<div style="float:right; border:1px solid #333333; width:500px;margin:5px; height:30px; background-color:#CCCCCC"></div>
	<div style="float:right; border:1px solid #333333; width:200px;margin:5px; height:100px;"></div>
</div>

چی کار کنم؟
درود بر شما...

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

دوست عزیز... این کارو به راحتی می تونی با استفاده از margin-bottom:30px انجام بدی...

چرا همه ی دیو ها این خاصیت رو دارن؟ float:right;

فقط دیو های سمت راست باید داشته باشن... و سمت چپ هم که می دونید باید left باشه./// وسط هم توی xhtml با خواص : margin-left:auto و margin-right:auto مشخص می شه....

من بازم تأکید می کنم... برای اینکه سردرگم نشید می تونید سورس یه صفحه ی ساده رو مطالعه کنید...
اگر باز هم نشد از خاصیت :verticial-align:top استفاده کنید.

موفق و پیروز باشید
 

farik

Well-Known Member
با سلام من يك قالب واسه يك CMS كه با ُاسمارتي مديريت فالبهاش انجام شده نوشتم ولي نميدونم چرا وقتي كه نوشته رو مينويسم نميره خطذ بهد و دايو رو بزرگ ميكنه.اين كد قالب:
{if !$ajaxmod}{literal}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<script type="text/javascript" src="text_editor/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tpls/js.js" ></script>
<LINK type="text/css" href="tpls/style.css" rel="stylesheet">
<!--[if IE]>
<style>
.page{margin-left:0px;padding-right:10%;}
.rmenus{ float: right; width: 145px;padding-top:10px;padding-right:20px;}
.lmenus{ float: left; width: 145px;padding-left:20px;}
</style>
<![endif]-->
<title>{/literal}{$title}{literal}</title>
</head>
<body style="text-align:center;">
<div class="page" >
<div class="rmenus" align="right">

<div class="rupmenu">
main menu</div>
<div class="menu" >
{/literal}
{section name=num loop=$author}
<a href="{$author[num].link}">{$author[num].name}({$author[num].post})</a><br/>
{/section}{literal}</div>
<div class="dnmenu">&nbsp;</div>

<br />
<div class="rupmenu">
main menu</div>
<div class="menu" >
{/literal}
today:{$static.tday}
<br />
lastday:{$static.lday}
<br/>
avrage:{$static.avg}
<br/>
max:{$static.max}
<br/>
all:{$static.aday}
<br/>
{literal}</div>
<div class="dnmenu">&nbsp;</div>

<br/>
<div class="rupmenu">
main menu</div>
<div class="menu" >
{/literal}
{section name=num loop=$links}
<a href="{$links[num].addr}" title="{$links[num].desc}-->{$links[num].hits}->{$links[num].date}-->{$links[num].num}">{$links[num].name}({$links[num].hits})</a><br />
{/section}{literal}</div>
<div class="dnmenu">&nbsp;</div>

<br/>
<div class="rupmenu">
main menu</div>
<div class="menu" >
{/literal}
<script type="text/javascript">make_tag('marquee','direction="up" align="middle" behavior="scroll" onMouseOver="this.stop()" onMouseOut="this.start()" height="75px" style="text-align:center;"');</script>
{section name=num loop=$logos}
<a href="{$logos[num].addr}" title="{$logos[num].desc}-->{$logos[num].hits}->{$logos[num].date}-->{$logos[num].num}" style="text-align:center;">
<script type="text/javascript">
make_tag("img"," class='logo' onMouseOver=this.style.filter='alpha(opacity:100)' onMouseOut=this.style.filter='alpha(opacity:50)' src='{$logos[num].where}' ");</script>
</a><hr/>


{/section}{literal}
<script type="text/javascript">make_tag("/marquee");</script>
</div>
<div class="dnmenu">&nbsp;</div>

<br/>
<div class="rupmenu">
main menu</div>
<div class="menu" style="text-align:center;" >
{/literal}
{section name=num loop=$sitelogo}
{literal}<a href="{/literal}{$sitelogo[num].link}{literal}" title="{/literal}{$sitelogo[num].desc}{literal}">
<script type="text/javascript">
make_tag("img"," class='logo' onMouseOver=this.style.filter='alpha(opacity:100)' onMouseOut=this.style.filter='alpha(opacity:50)' src='{$sitelogo[num].where}' ");</script></a>

<input style="width:120;" value="&lt;p align=&quot;center&quot;&gt;&lt;a href=&quot;{/literal}{$url}{$sitelogo[num].link}{literal}&quot; title=&quot;{/literal}{$sitelogo[num].desc}{literal}&quot;&gt;&lt;img class='logo' onMouseOver=this.style.filter='alpha(opacity:100)' onMouseOut=this.style.filter='alpha(opacity:50)' src='{$sitelogo[num].where}' &gt;&lt;/a&gt;" />
<hr style="border:#999999 dashed 1px;" />
{/literal}
{/section}
{literal}</div>
<div class="dnmenu">&nbsp;</div>

<br/>
<div class="rupmenu">
main menu</div>
<div class="menu" style="text-align:center;" >
{/literal}
{section name=num loop=$ques}
<form action="pool.php?id={$poolid[num]}">
Q:{$ques[num]}<br/>
{section name=num2 loop=$poolans[num]}
<input type="radio" name="btn{$smarty.section.num.rownum}" value="{$smarty.section.num.rownum}::IT{$smarty.section.num2.rownum}" />.:{$poolans[num][num2]}<br/>
{/section}
<input type="submit" value="Go" /><input type="reset" value="Reset"/>
</form><hr/>
{/section}
{literal}</div>
<div class="dnmenu">&nbsp;</div>

</div>

<div class="posts" id="post">
{/literal}
{section loop=$post name=num}
{literal}
<div class="uppost" dir="rtl">{/literal}
{$post[num].title}{literal}<a href="{/literal}{$post[num].link}{literal}" style="color:#FFFFFF">{/literal}({$post[num].subject}){literal}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="post" >
<img src="{/literal}{$post[num].arch_pic}{literal}" height="25px" width="25px" style="vertical-align:top;" alt="PIC OF SUBJECT"/>
{/literal}
{$post[num].post}{literal}
</div>{/literal}

<div class="pm">Writen by {$post[num].author} in {$post[num].date} &amp;{$post[num].time}</div>

{literal}<div class="dnpost">
<a style="color:#FFFFFF;" href="suggest.php?id={/literal}{$post[num].id}{literal}">suggest(s):{/literal}{$post[num].op}{literal}</a>
::
<a style="color:#FFFFFF;" href="{/literal}{$post[num].link}{literal}" >linkesabet</a>
</div><br/>{/literal}{/section}

{else}
{literal}
<div class="uppost">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/literal}{$title}{literal}</div>
{/literal}
<div class="post" style="text-align:center;" >
{$post}
</div>
{literal}
</div>
<div class="pm"></div>
<div class="dnpost"></div>{/literal}<br/>

{/if}{if !$ajaxmod}
{literal}
<div class="uparch">archive</div>
<div class="arch">
{/literal}
{section name=num loop=$archive}
<a href="post.php?post={$archive[num].id}">
{$archive[num].title}({$archive[num].op}) writen by {$archive[num].author}
</a><br />
{/section}
{literal}</div>
<div class="dnarch"></div>
</div>

<div class="rmenus" align="right">
<div class="lupmenu">
main menu
</div>
<div class="menu" >
{/literal}{$adminmsg}{literal}
</div>
<div class="dnmenu">&nbsp;</div>

<br/>

<div class="lupmenu">
main menu
</div>
<div class="menu" >
Search:
<input type="text" name="Searchkey" style="width:120;" id="key" />
<select name="which" id="which">
<option value="post">
post</option>
<option value="title">
title</option>
<option value="links">
links</option>
</select>
<script type="text/javascript">
make_tag("input",'type="button" value="search" onClick="search()"');</script>
</div>
<div class="dnmenu">&nbsp;</div>

<br />

<div class="lupmenu">
main menu
</div>
<div class="menu" >
mail:
<input type="text" name="mail" style="width:120;" id="mail"/>
name:
<input type="text" name="name" style="width:120;" id="name"/>
<input type="submit" value="add" />
</div>
<div class="dnmenu">&nbsp;</div>

<br />

<div class="lupmenu">
main menu
</div>
<div class="menu" >
{/literal}{section name=num loop=$subj}
<a href="achive.php?subject={$subj[num].id}" >
{$subj[num].subject}({$subj[num].num})<br/></a>
{/section}{literal}
</div>
<div class="dnmenu">&nbsp;</div>

<br />

<div class="lupmenu">
main menu
</div>
<div class="menu" id="user">
{/literal}
{$um}
{literal}</div>
<div class="dnmenu">&nbsp;</div>
<br /><div class="lupmenu">
main menu</div>

<div class="menu" >
{/literal}
{if $year}
select by year:<br />{section name=num loop=$year}
<a href="{$year[num]}">{$year[num]}</a><br/>
{/section}
{/if}
select by month:<br />
{section name=num loop=$month}
<a href="{$month[num]}">{$month[num]}</a><br/>
{/section}{literal}
</div>
<div class="dnmenu">&nbsp;</div>

<br /><div class="lupmenu">
main menu</div>

<div class="menu" >
{/literal}
{section name=num loop=$page}
<script>make_tag("a","href='#' onclick='ajax(\"posts.php\",\"start={$page[num].num}&incmod=true\");'");</script>{$page[num].num}<script>make_tag("/a","");</script>
{/section}

{literal}</div>
<div class="dnmenu">&nbsp;</div>

</div>

</div>
</body>
</html>
{/literal}{/if}

اينم از كد فايل CSS:
body{
SCROLLBAR-FACE-COLOR: #4C93BF;
SCROLLBAR-HIGHLIGHT-COLOR: #4C93BF;
SCROLLBAR-SHADOW-COLOR: #4C93BF;
SCROLLBAR-3DLIGHT-COLOR: #4C93BF;
SCROLLBAR-ARROW-COLOR: #E2E9EA;
SCROLLBAR-TRACK-COLOR: #E2E9EA;
SCROLLBAR-DARKSHADOW-COLOR: #E2E9EA ;
color:#333333;
font-family:Tahoma;
font-size:8pt;
text-align:center;
margin:20px 0 30px;
font-family: Tahoma;
font-size: 8pt;
}
.del{
height:25;
width:25;
cursor:hand;
}
.page{
background:#fff;
text-align:left;
margin-left:-11%;
width:78%;
}
.up{
font-family: Tahoma;
font-size: 8pt;
color: #6D7A81;
height: 18;

border: 1px solid #DAE2E3;
BACKGROUND: #F3F5F5;
}
.btn{
font-family: Tahoma;
font-size: 8pt;
color: #FFFFFF;
border: 1px solid #FC6605;
background-color: #FDA264;
text-align:center;
height:18;
padding-bottom:3px;
}
.op{
width:80px;
}
.tbl{
border-style: dotted;
border-width: 1px;
border-color:#cccccc;
font-size: 9pt;
}
.rmenus{
float: right;
width: 125px;
padding-top:10px;
padding-right:10px;
}
.lmenus{
float: left;
width: 125px;
padding-left:10px;
}
a{
font-family:Tahoma;
font-weight:normal;
color:#999999;
text-decoration:none;
}
a:visited{
text-decoration:none;
color:#0033FF;
}
.dnarch{
background-image:url('theme/darchive.gif');
height:25;
width:500;
color:white;
font-family:Tahoma;
font-size:8pt;
color:#FFFFFF;
text-align:left;
}
.uparch{
background-image:url('theme/uarchive.gif');
height:25;
width:500;
color:#FFFFFF;
text-align:left;
}
.arch{
border-left-width:1px;
border-left-color: #CCCCCC;
border-left-style: dotted;
border-bottom:none;
border-top:none;
border-right-width:1px;
border-right-color: #CCCCCC;
border-right-style:dotted;
direction:ltr;
height:auto;
width:500;
text-align:left;
}
.dnpost{
background-image:url('theme/dpost.gif');
height:25;
width:700;
color:white;
font-family:Tahoma;
font-size:8pt;
color:#FFFFFF;
text-align:left;
}
.uppost{
background-image:url('theme/upost.gif');
height:25;
width:700;
color:#FFFFFF;
text-align:left;
direction:ltr;
}
.post{
border-left-width:1px;
border-left-color: #CCCCCC;
border-left-style: dotted;
border-bottom:none;
border-top:none;
border-right-width:1px;
border-right-color: #CCCCCC;
border-right-style:dotted;
direction:ltr;
height:auto;
width:700;
text-align:left;
}
.page{width:100%;float:center; text-align:center;padding-right:10%;}
.posts{
float:right;
width:710;
text-align:center;
}

.rupmenu{
background-image:url(theme/rm.gif);
height:auto;
width:auto;
direction:rtl;
max-width:125px;
color:#FFFFFF;
padding-right:30;
font-family:Tahoma;
font-size:10pt;
line-height:25px
}
.lupmenu{
background-image:url(theme/lm.gif);
height:auto;
width:auto;
direction:rtl;
max-width:125px;
color:#FFFFFF;
padding-right:30;
font-family:Tahoma;
font-size:10pt;
line-height:25px;
}
.dnmenu{
background-image:url(theme/dm.gif);
height:auto;
width:auto;
direction:rtl;
max-width:125px;
color:#FFFFFF;
padding-right:30;
font-family:Tahoma;
font-size:10pt;
line-height:25px
}
.menu{
border-left-width:1px;
border-left-color: #CCCCCC;
border-left-style: dotted;
border-bottom:none;
border-top:none;
border-right-width:1px;
border-right-color: #CCCCCC;
border-right-style:dotted;
direction:ltr;
width:auto;
max-width:125px;
text-align:left;
}
.logo,.link{
Filter:alpha(opacity=50);
height:auto;
width:auto;
}
.pm{
border-left-width:1px;
border-left-color: #CCCCCC;
border-left-style: dotted;
border-bottom:none;
border-top:none;
border-right-width:1px;
border-right-color: #CCCCCC;
border-right-style:dotted;
direction:rtl;
height:auto;
width:700;
font-family:Tahoma;
font-size:8pt;
font-weight:lighter;
color:#CCCCCC;
text-align:left;
}
 

جدیدترین ارسال ها

بالا