کمک در طراحی سایت

I

irp30net

Member
با عرض سلام و خسته نباشید
به این فکر افتادم که طراحی سایتم رو بدون تیبل به پایان برسونم!
خوب من استایل زیر رو نوشتم
HTML: 
<!--
a, a:visited {
	color:#247EAC; TEXT-DECORATION: none;
}
a:hover {
	color:red; TEXT-DECORATION: none;
}

body {
  margin: 10px;
  padding: 0px;
  font-family:tahoma;
  font-size:8pt;
  ;background:url('images/bgt.gif');
}
#header {
	float: right;
	width: 100%;
	border:1px solid #A8BECA;background:#fff;
	BACKGROUND: url(images/header-center.png)

}
#main {
  background: #fff;
  width: 100%;
  height: 100%;

}
#menu {
	width: 100%;
    float: right;
	background: #fff;
	margin-top: 3px;
	padding: 1px;text-align:center;background:url('images/top-menu-bg.png');border:.5px solid #A8BECA;color:#247EAC;

}

#leftcol {
  background: #ffffff;
  float: left;
  width: 20%;
  height: 500px;
  margin-top: 3px;

}
#rightcol {
  background: #ffffff;
  float: right;
  width: 20%;
  height: 500px;
  margin-top: 3px;

}
#spacer {
  background: #ffffff;
  float: left;
  width: 0.5px;
  margin-top: 3px;

}
#s_menu {
  background: #ffffff;
  float: right;
  width: 100%;
  padding: 3px;background:url('images/top-menu-bg.png');border:1px solid #A8BECA;color:#247EAC;

}
#menu_body{
  float: right;

	background:#fff;border:1px solid #A8BECA;padding:3px;font-family: tahoma;font-size: 8pt;border-top:0px;line-height:1.5em;
	text-align:justify;margin-bottom:8px;
	 width: 100%;

}

#content{
  background: #fff;
  float: left;
  width: 57%;
  margin-top: 3px;

}


#footer {
  background: #0f0;
  clear: both;
  width: 100%;
}

-->
و این هم کد HTML من
HTML: 
<body>
<div id="header">Header</div>
<div id="menu" >Menu</div>

<div id="main">
<div id="rightcol">
<div id="s_menu"  >Menu</div><div id="menu_body">Menu</div>
<div id="s_menu" >Menu</div><div id="menu_body">Menu</div>
</div>

<div id="leftcol" >
<div id="s_menu" >Menu</div><div id="menu_body">Menu</div>
<div id="s_menu" >Menu</div><div id="menu_body">Menu</div>
</div>
<div id="content">
<div id="s_menu" >Menu</div>
<div id="menu_body" >Menu</div>
</div>
</div>
</body>
</html>
منوی راست بی مشکل هست.
بخش اصلی (وسط) رو باید به یکی از دو طرف بچسبونم!نمی شه در وسط دقیقا ثابتش کرد و با کمترین فاصله ها از دوطرف باشه؟
منوی سمت چپ هم ...
خودتون تست کنید و مشکل ها رو ببینید
البته من خودم دستکاری کردم و کدم رو در ie درست کردم ولی در سایر مرورگرها وضع بدتر شد!
آیا اصول خاصی هست که من رعایت نکرده باشم؟
مشکل کد من در کجاست؟
سایت مرجع و مفیدی رو که براساس استانداردها باشه می شناسید؟
ممنون می شم کمکم کنید.
موفق باشید
خدانگهدار
 
AmiR_mM

AmiR_mM

Member
سلام رضا . اگر با عکس نشون میدادی مشکل چیه بهتر بود :) .

ولی در کل برای یادگیری حرفه ای و اصولی سی اس اس ، می تونی از کتاب های انتشارات SITEPOINT استفاده کنی و برای شروع این کتاب رو بخون : Build Your Own Web Site The Right Way Using HTML and CSS .

انگلیسیت هم که خوبه :D . توی رپید شیر باید بگردی پیدا کنی ها :wink: .

اینو که تموم کردی بشین بقیه ی کتاب هاشو بخون . موفق باشی .
 
I

irp30net

Member
سلام امیر
مرسی.
از یکی از دوستان هم چند تا لینک مفید گرفتم.
ولی الان مشکل اساسی من تو همین کده.
اگه تو فرانت پیج هم کپی کنید همه چیز معلومه.
کسی می تونه مشکلم رو بگه؟
موفق باشید
خدانگهدار
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
کد شما منطقی نبود
من یه کد ساده نوشتم، ببینید می تونید اون چیزی که در نظر دارید در بیارید...
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>echessdesign.com</title>

<style type="text/css">
#wrp {
	padding:0;
	margin:0;
	border:0;
	width:100%;
}
#header {
	float:left;
	width:100%;
	background:red;
}
#left-menu, #center-menu, #right-menu {
	float:left;
}
#left-menu {
	width:18%;
	background:black;
}
#center-menu {
	width:58%;
	background:blue;
	margin:0 0 0 3%;
}
#right-menu {
	width:18%;
	float:right;
	background:fuchsia;
}
</style>
</head>

<body>

	<div id="wrp">

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

		<div id="left-menu">
		left
		</div>			
		
		<div id="center-menu">
		center
		</div>
		
		<div id="right-menu">
		right
		</div>
	</div>
</body>

</html>
 
I

irp30net

Member
سلام
نمی دونم screenshot به چه دردی می خوره!
یعنی تست کردن سخت تره!!!
به هر حال در اولین فرصت اینکار رو می کنم.با این سرعت ذغالی صفحه هم به زور لود میشه!
---
echessdesign عزیز دستتون درد نکنه.فکر کنم مشکلم حل بشه.
می رم رو کد کار کنم.
موفق باشید
خدانگهدار
 
ا

امين تري دي

Member
خوب screenshot به این درد می خورد که شما در صفحه اصلی content را قرار داده اید و اینطوری مشکل بهتر دیده می شود , نکته بعدی این است شما خیلی بد فرم از لایه ها استفاده کرده اید بطوری که حتی برای اجزای منوهای چپ و راست نیز از لایه ها استفاده کرده اید . بنظر من اگر از ul یا unorder list بهره گیرید در طراحی منو ها نتیجه بهتری می گیرید .
آخرین پیشنهاد اگر مشکلی برای شما نیست با یک نرم افزار طراجی مثل فتوشاپ , صفحه مورد نظر خودت را طراحی کن و یک نما قرار بده تا بدانیم دقیقا چی میخواهید تا طراحی کنیم
 
I

irp30net

Member
سلام
مرسی از توضیحاتتون
البته مشکل اصلی من حل شد ولی برای همون ul یا unorder list اگه می شه یکی دو مثال کوچیک بزنید.
لینک مفید هم بدید ممنون می شم.
موفق باشید
خدانگهدار
 
I

irp30net

Member
ir-template گفت:
سلام رضا . اگر با عکس نشون میدادی مشکل چیه بهتر بود :) .

ولی در کل برای یادگیری حرفه ای و اصولی سی اس اس ، می تونی از کتاب های انتشارات sitepoint استفاده کنی و برای شروع این کتاب رو بخون : build your own web site the right way using html and css .

انگلیسیت هم که خوبه :d . توی رپید شیر باید بگردی پیدا کنی ها :wink: .

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

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

echessdesign

مدیر انجمن طراحی وب
درود بر شما
در رابطه با ul, li پیش تر در انجمن توضیح داده شده، جستجو فرمایید.
پاینده باشید.
 
I

irp30net

Member
سلام
مرسی از اینکه جواب می دید.
فقط چون li و ul هر دو دوحرفی هستند نتونستم نتیجه ای پیدا کنم.
ممنون می شم لینک بدید.
موفق باشید:wink:
خدانگهدا
 
I

irp30net

Member
سلام
خسته نباشید
من مشکلم حل شد ولی...
وقتی dir صفحه رو rtl می کنم منوی سمت چپم می ره سمت چپ تر! یعنی از محدوده من خارج می شه.
برای همین مجبور شدم dir اون منو رو به صورت جدا ltr کنم!می دونم صحیح نیست ولی راه حل چیه؟
موفق باشید.
خدانگهدار
 
I

irp30net

Member
سلام
خسته نباشید
من مشکلم حل شد ولی...
وقتی dir صفحه رو rtl می کنم منوی سمت چپم می ره سمت چپ تر! یعنی از محدوده من خارج می شه.
برای همین مجبور شدم dir اون منو رو به صورت جدا ltr کنم!می دونم صحیح نیست ولی راه حل چیه؟
موفق باشید.
خدانگهدار
 
shnoit

shnoit

Well-Known Member
irp30net گفت:
سلام
خسته نباشید
من مشکلم حل شد ولی...
وقتی dir صفحه رو rtl می کنم منوی سمت چپم می ره سمت چپ تر! یعنی از محدوده من خارج می شه.
برای همین مجبور شدم dir اون منو رو به صورت جدا ltr کنم!می دونم صحیح نیست ولی راه حل چیه؟
موفق باشید.
خدانگهدار
کلیک کنید تا باز شود...

سلام
خوب دوست عزیر شما dir=rtl رو در همون <فable> یا <div> خود منو وارد کنین.
بعدش با استفاده از css , padding اون رو از قسمت چپ به اون میزانی که مد نظر دارین اعمال کنین.:wink:
 
I

irp30net

Member
سلام
مرسی بابت راهنمایی تون.
یک سوال برام پیش اومد اونم اینکه در یک طراحی حرفه ای باید تیبل ها رو دور ریخت؟
اینجوری کار آدم دشوار میشه!
موفق باشید
خدانگهدار
 
hosseintdk775

hosseintdk775

Member
irp30net گفت:
سلام
مرسی بابت راهنمایی تون.
یک سوال برام پیش اومد اونم اینکه در یک طراحی حرفه ای باید تیبل ها رو دور ریخت؟
اینجوری کار آدم دشوار میشه!
موفق باشید
خدانگهدار
کلیک کنید تا باز شود...

بسم الله الرحمن الرحیم
سلام
ما هم ابتدا همین فکر را می کردیم / ولی بعد از کار بر روی css تازه متوجه راحتی کار شده ایم.
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

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

بالا