راهنمایی برای عیب یابی و اعمال تغییر

aghahamidgol2

aghahamidgol2

Active Member
سلام دوستان
خیلی وقت بود به علت یک سری مسایل طرای وب را گذاشته بودم کنار الان که سراغش اومدم خیلی پیشرفت کرده و ز اون حال گذشته خارج شده

یه سایت دارم طراحی می کنیم به آدرس :
adsl.u2u4fun.com
می خواهم اگر لطف کنید کمی کمک کنید

1 - این صفحه با مرورگرهای مختلف مشکل دارد و در برخی کامل است مثل اینترنت اکسپلورر 6 و فایرفاکس 2 اون در ریزولیشن های 1024

2- می خواهم css کنم و با کمک div ها بهش سروسامان بهدم ولی اصلا آشنایی ندارم
3- هر کمکی که می توانید لطفا بکنید راهنمایی هایتان به دردم می خوره

حمید رضا کاظمی
 
sunrise

sunrise

Member
البته طراحی CSS به عقیده من بیشتر یه کار سلیقه ای هست و برای اینکه بتونید یه CSS خوب از آب در بیارید که با تمامی مرورگرها (یا حداقل مرورگرهای مطرح) به یک شکل و سیاق نمایش پیدا کنه ملزم به این هست که تمامی این مرورگرها رو در دسترس داشته باشید و پس از ایجاد کوچکترین تغییر در کدهای CSS صفحه تغییر یافته رو با تمامی اونا چک کنید و گاهی اوقات لازم میشه از CSS Hack نیز استفاده کنید، بعنوان مثال بنده خودم یک ماه پیش که طراحی واسط کاربری وب یک نرم افزار رو انجام میدادم اون رو تماما CSS نوشتم و باید بگم واقعا عذاب آور بود اما در عین حال برام جذاب هست این کار چون من عاشق دردسر هستم و کمی خلاقیت.
با توجه به اینکه CSS یه امری هست که نمیشه برای اون قانون خاصی در نظر گرفت و در واقع این گذشت زمان هست که میزان تسلط شما رو مشخص می کنه در این زمینه با این حال این اصول و قواعد اولیه خودش رو داره که می تونید بخشی از اون رو در لینک زیر مطالعه بفرمایید.
کد: 
http://www.tizag.com/cssT/
 
aghahamidgol2

aghahamidgol2

Active Member
لطفا لینک من را هم بررسی کنید و بهم تو پیاده سازی کمک کنید تا دستم باز تر بشه
 
sunrise

sunrise

Member
aghahamidgol2 گفت:
لطفا لینک من را هم بررسی کنید و بهم تو پیاده سازی کمک کنید تا دستم باز تر بشه
کلیک کنید تا باز شود...
يک توصيه براي شما دارم و اونم اينه که سعي کنيد قالب هايي که طراحي مي کنيد ناحيه اي که صفحه رو در بر مي گيره عرض اون بين 750 تا از 775 باشه و فضاي خالي اطراف رو با رنگي مناسب پر کنيد و دليل انجام اين کار اين هست که خيال شما از بابت کاربراني که هنوز دارند از رزوليشن 800x600 استفاده مي کنند راحت هست و مطمئن هستيد که صفحه شما بصورت کامل با تمام جزئياتش براي کاربر نمايش داده ميشه.
البته چون شما در قالب عرض ها رو بر مبناي درصد گذاشتيد اين مسئله حل شده هست و به نسبت اندازه پنجره مرورگر اندازه ها تنظيم ميشه اما يه اشکالي که داره بخش ناوبري بالا (قسمت سبز رنگ) هست که با کوچکتر شدن صفحه سمت چپ و راست اون از بين ميره و هرچقدر که پنجره کوچکتر ميشه اطلاعات لينک ها به هم ريخته تر ميشه (لينک ها مياد زير هم) و يک راه بسيار پرکاربرد براي طراحي بخش هاي ناوبري در CSS کمک گرفتن از تگ هاي DIV ، UL ، LI و A هست که ما در اين حالت براي جلوگيري از خارج شدن آيتم ها از محدوده ناوبري در کد تگ DIV کافيه کد زير رو اضافه نماييد.
HTML: 
overflow: hidden;
يک مثال در اين مورد:
HTML: 
.nav {
    width: 775px;
    height: 31px;
    background: transparent;
    font-family: Tahoma;
    font-size: 8pt;        
    margin-top: -29px;
    padding-right: 53px;
    overflow: hidden;
}

.nav ul {
    padding:0;
    border:0;
    margin:0;
    list-style:none;
}

.nav li {
    float: right;
    position: relative;    
}

.nav li#off {
    text-align: center;
    display: block;
    width: 87px;
    height: 29px;
    margin-left: 10px;
    clear: left;    
}

.nav li a {
    text-align: center;
    display: block;
    width: 87px;
    height: 29px;
    margin-left: 10px;
    clear: left;
    cursor: pointer;
}
اين کد CSSي هست که من براي بخش ناوبري قالبي که براي سايت زير طراحي کردم نوشتم.
کد: 
http://www.saharisp.com
و اين هم کد CSS اين قالب هست:
کد: 
http://www.saharisp.com/styles/default/stylesheet.css
و به نظر من قالبي که شما طراحي کرديد مشکل خاصي نداره و اگه فونتي که براي پايين صفحه استفاده شده رو Tahoma; 11px بذاريد و مشکل بخش ناوبري رو حل کنيد، ميتونيد خروجي خوبي داشته باشيد.
 
aghahamidgol2

aghahamidgol2

Active Member
به صفحه اگر مراجعه کنید یه کادر سفید رنگ خواهید دید برای کنترل ان و قرار دادن یک div یا هر چیزی که بتوان آنرا راحت مدیریت کرد چه کار می توانم انجام دهم الان html هست و اگر بخواهم مطلب پر کنم باید با کمک enter خط به خط تغییرات دهم
 
sunrise

sunrise

Member
aghahamidgol2 گفت:
به صفحه اگر مراجعه کنید یه کادر سفید رنگ خواهید دید برای کنترل ان و قرار دادن یک div یا هر چیزی که بتوان آنرا راحت مدیریت کرد چه کار می توانم انجام دهم الان html هست و اگر بخواهم مطلب پر کنم باید با کمک enter خط به خط تغییرات دهم
کلیک کنید تا باز شود...
مي تونيد از اين کد در CSS اون div استفاده کنيد:
کد: 
float: left
اين کد باعث ميشه که لايه بصورت ثابت در سمت چپ قرار بگيره و اينطوري شما مي تونيد اون قسمت رو مستقر کنيد. البته چون در حال حاضر قالب ترکيبي از لايه ها و جداول هست نميشه دقيق تصميم گرفت که چطور بايد کد CSS اون قسمت رو در نظر گرفت.
 
aghahamidgol2

aghahamidgol2

Active Member
امکانش هست بخش هدر را که مشکل داشت به صورت عملی و با جزییات توضیح بدید اگه کد html را ببینید و بگید کجا کد را قرار دهم که در تمام براز ها مشکل حل شود
330wuu8.gif
 
آخرین ویرایش:
sunrise

sunrise

Member
aghahamidgol2 گفت:
امکانش هست بخش هدر را که مشکل داشت به صورت عملی و با جزییات توضیح بدید اگه کد html را ببینید و بگید کجا کد را قرار دهم که در تمام براز ها مشکل حل شود
330wuu8.gif
کلیک کنید تا باز شود...
فايل هاي قالب رو بصورت پيام خصوصي براي من ارسال کنيد (بصورت کامل) تا بتونم بصورت عملي روي کار توضيح بدم.
 
aghahamidgol2

aghahamidgol2

Active Member
سوالات

من مشکلات را یک جا می نویسم و سورس را هم که ارسال کردم ... اینجا می نویسیم که زیاد پست تو پست نشه :razz:


25qdx54.jpg

این div که ایجاد کردم با کمک شما را نگاهی بندازید ... چه optioni داریم که این جملات به کناره ها نچسبد .... در ضمن در فایرفاکس متن ها به زیر div می روند ولی در اینترنت اکسپلورر به صورت صحیح از بالا به پایین قرار می گیرند.

2qbhjma.gif

فاصله ها ی بین هدر و content را ببینید ؟؟؟

این آخری هم فعلا بگم اون اسکریپی که گوشه پایین هست هم از نظر ظاهر و ساختار قالب مشکل دارد در تصویر کامل مشخص هست ....
2q36ix3.gif


راستی امکانش هست روی یک لینک کلیک کنیم محتوا در یک دایو در صفحه بارگذاری شود مثل iframe ؟
 
آخرین ویرایش:
sunrise

sunrise

Member
این div که ایجاد کردم با کمک شما را نگاهی بندازید ... چه optioni داریم که این جملات به کناره ها نچسبد .... در ضمن در فایرفاکس متن ها به زیر div می روند ولی در اینترنت اکسپلورر به صورت صحیح از بالا به پایین قرار می گیرند.
کلیک کنید تا باز شود...
براي ايجاد فاصله داخلي مي تونيد از padding استفاده کنيد، به اين شکل استفاده ميشه:
کد: 
padding: 2px 3px 2px 3px
padding-left: X;
padding-right: X
padding-top: X
padding-bottom: X
براي مورد اول به ترتيب، فاصله دروني بالا، راست ، پايين و چپ رو مشخص مي کنه.
موارد ديگه هم بصورت مجزا مورد استفاده قرار مي گيرند.
براي تعيين فاصله بيروني از div به اين صورت استفاده ميشه:
کد: 
margin: 2px 3px 2px 3px
margin-left: X;
margin-right: X
margin-top: X
margin-bottom: X
البته بايد دقت داشته باشيد وقتي از padding استفاده ميکنيد باعث ميشه تا به همون ميزان که padding رو افزايش مي ديد از طول و عرض div بايد کم بشه، مثلا اگه قبلا width برابر 50px بوده و شما قصد داريد padding-right رو روي 4px بذاريد بايد width رو روي 46px بذاريد تا اندازه div تناسب داشته باشه.
 
sunrise

sunrise

Member
این div که ایجاد کردم با کمک شما را نگاهی بندازید ... چه optioni داریم که این جملات به کناره ها نچسبد .... در ضمن در فایرفاکس متن ها به زیر div می روند ولی در اینترنت اکسپلورر به صورت صحیح از بالا به پایین قرار می گیرند.
کلیک کنید تا باز شود...
به اين صورت اون قسمت رو تغيير بديد:
HTML: 
<td style="border: 1px solid #DDDDCA; background-color: #FFFFFF">						
	<div class="d1">
		متن اينجا قرار مي گيره
	</div>
</td>
اين رو هم به بخش <HEAD>...</HEAD> اضافه کنيد:
کد: 
<style type="text/css">
.d1 {
	float: right;
	padding-right: 8px;
	padding-left: 8px;
}
</style>
 
aghahamidgol2

aghahamidgol2

Active Member
همه ی مشکلاتی که گفته بودم حل شد فقط همون آخری مونده و اون سوال که می شه از div مثل iframe استفاده کرد ؟ هدر هم می شه مثال عملی بزنی :) ؟ اون خیلی مهمتر از بقیه است
 
sunrise

sunrise

Member
aghahamidgol2 گفت:
همه ی مشکلاتی که گفته بودم حل شد فقط همون آخری مونده و اون سوال که می شه از div مثل iframe استفاده کرد ؟ هدر هم می شه مثال عملی بزنی :) ؟ اون خیلی مهمتر از بقیه است
کلیک کنید تا باز شود...
خوشحالم که مشکلاتي که داشتي حل شده، براي هدر که بخش ناوبري هم داره اگه بخوام يه مثال عملي خوب بزنم ميتونم کد CSS زير رو معرفي کنم.
کد: 
/* Header */
.header {
	width: 775px;
	height: 130px;
	background: #A8A8A8 url('images/header.gif');
}

/* Navbar */
.nav {
	width: 775px;
	height: 31px;
	background: transparent;
	font-family: Tahoma;
	font-size: 8pt;		
	margin-top: -29px;
	padding-right: 53px;
	overflow: hidden;
}

.nav ul {
	padding:0;
	border:0;
	margin:0;
	list-style:none;
}

.nav li {
	float: right;
	position: relative;	
}

.nav li#off {
	text-align: center;
	display: block;
	width: 87px;
	height: 29px;
	margin-left: 10px;
	clear: left;	
}

.nav li a {
	text-align: center;
	display: block;
	width: 87px;
	height: 29px;
	margin-left: 10px;
	clear: left;
	cursor: pointer;
}

/* Navbar Buttons */
.nav li a#index {
	background: transparent url('images/tabs/index.gif') 0px 0px no-repeat;
}

.nav li a:hover#index {
	background: transparent url('images/tabs/index.gif') 0px -29px no-repeat;
}

.nav li a#index.on {
	background: transparent url('images/tabs/index.gif') 0px -58px no-repeat;
}

.nav li a:hover#index.on {
	background: transparent url('images/tabs/index.gif') 0px -87px no-repeat;
}

.nav li a#checkcredit {
	background: transparent url('images/tabs/checkcredit.gif') 0px 0px no-repeat;
}

.nav li a:hover#checkcredit  {
	background: transparent url('images/tabs/checkcredit.gif') 0px -29px no-repeat;
}

.nav li a#checkcredit.on {
	background: transparent url('images/tabs/checkcredit.gif') 0px -58px no-repeat;
}

.nav li a:hover#checkcredit.on {
	background: transparent url('images/tabs/checkcredit.gif') 0px -87px no-repeat;
}

.nav li a#services {
	background: transparent url('images/tabs/services.gif') 0px 0px no-repeat;
}

.nav li a:hover#services {
	background: transparent url('images/tabs/services.gif') 0px -29px no-repeat;
}

.nav li a#services.on {
	background: transparent url('images/tabs/services.gif') 0px -58px no-repeat;
}

.nav li a:hover#services.on {
	background: transparent url('images/tabs/services.gif') 0px -87px no-repeat;
}

.nav li a#cards {
	background: transparent url('images/tabs/cards.gif') 0px 0px no-repeat;
}

.nav li a:hover#cards {
	background: transparent url('images/tabs/cards.gif') 0px -29px no-repeat;
}

.nav li a#cards.on {
	background: transparent url('images/tabs/cards.gif') 0px -58px no-repeat;
}

.nav li a:hover#cards.on {
	background: transparent url('images/tabs/cards.gif') 0px -87px no-repeat;
}

.nav li a#forum {
	background: transparent url('images/tabs/forum.gif') 0px 0px no-repeat;
}

.nav li a:hover#forum {
	background: transparent url('images/tabs/forum.gif') 0px -29px no-repeat;
}

.nav li a#forum.on {
	background: transparent url('images/tabs/forum.gif') 0px -58px no-repeat;
}

.nav li a:hover#forum.on {
	background: transparent url('images/tabs/forum.gif') 0px -87px no-repeat;
}

.nav li a#match {
	background: transparent url('images/tabs/match.gif') 0px 0px no-repeat;
}

.nav li a:hover#match {
	background: transparent url('images/tabs/match.gif') 0px -29px no-repeat;
}

.nav li a#match.on {
	background: transparent url('images/tabs/match.gif') 0px -58px no-repeat;
}

.nav li a:hover#match.on {
	background: transparent url('images/tabs/match.gif') 0px -87px no-repeat;
}

.nav li a#contactus {
	background: transparent url('images/tabs/contactus.gif') 0px 0px no-repeat;
}

.nav li a:hover#contactus {
	background: transparent url('images/tabs/contactus.gif') 0px -29px no-repeat;
}

.nav li a#contactus.on {
	background: transparent url('images/tabs/contactus.gif') 0px -58px no-repeat;
}

.nav li a:hover#contactus.on {
	background: transparent url('images/tabs/contactus.gif') 0px -87px no-repeat;
}

کد HTML که نحوه استفاده از اين CSS رو نشون ميده:
HTML: 
<div class="header"></div>
<div class="nav">
	<ul>
				<li><a id="index" class="on" href="./index.php"></a></li>
				<li><a target="_blank"id="checkcredit"  href="./services/check_credit"></a></li>
				<li><a id="services"  href="./services"></a></li>
				<li><a id="cards"  href="./internet_cards"></a></li>
				<li><a id="forum"  href="./forum"></a></li>

				<li><a id="match"  href="./match"></a></li>
				<li><a id="contactus"  href="./contactus"></a></li>
			</ul>
</div>
 
sunrise

sunrise

Member
aghahamidgol2 گفت:
من کد شما را برای هدر استفاده کردم ولی نتیجه هنوز مشکل داره برخی از جاها :( این یه موضوع درست بشه دیگه بقیه اش زیاد مهم نیست

عکس را ببینید : http://i28.tinypic.com/oibrit.jpg
کلیک کنید تا باز شود...
نه نه، نبايد دقيقا همين کد رو استفاده مي کرديد، من کد رو گذاشتم تا شما بر اساس اين کد و متناسب با طرح قالب خودتون کد CSS مناسبي رو بنويسيد، چون يک کد CSS مي تونه براي يک قالب CSS خيلي خوب جواب بده ولي همين کد براي يک قالب ديگه به بدترين وجه ممکن!
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

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

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

بالا