کد های Css ضمیمه شده را تصحیح کنید

echessdesign · Sep 18, 2007

درود بر شما
پیش تر کاربری در فرم PT مشکلی را (ضمیمه شده است) مطرح کرد که صفحه طراحی شده او نمایش یکسانی در مرورگر ها ندارد، بدان پاسخ داده بودم، تصور می کنم راه حلی را که پیشنهاد کردم جای بحث داره، می خواستم نظر شما و پیشنهاد شما ها رو بدونم.
راه حل پیشنهادی من:

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>
<link rel="stylesheet" type="text/css" href="x.css" media="all" />
<style type="text/css">
* {
	padding:0; border:0; margin:0; list-style:0;
}
body {
	text-align:center;
}
#wrp {
	width:332px;
	margin:0 auto;
	border-top:0;
}
#top {
	width:332px;
	height:30px;
	float:left;
	background: url('middle_title1.jpg');
}
#wrp span {
	width:25px;
	float:left;
	background:url('title_left.jpg');
}
#wrp em {
	width:25px;
	float:right;
	background: url('title_right.jpg');
}
#wrp h1 {
	font:normal bold 9px verdana;
	color:#000;
	margin:12px 0 0 0;
}
#wrp p {
	border:1px #3399FF solid;
	width:96%;
	padding:20px 5px 5px 5px;
	text-align:justify;
	font:normal 12px verdana;
	color:#000;
	float:left;
}
</style>
</head>

<body>
<div id="wrp">


<div id="top">

<span>&nbsp;</span>

<em>&nbsp;</em>

<h1>Sony Ericsson K770 Cyber-shot hits on</h1>

</div>

<p>
A new addition to the Cyber-shot family is already a fact - the new Sony Ericsson K770 was announced today. As you may have probably heard, today Sony Ericsson Update: Live photos added
</p>



</div>
</body>

</html>

در انتظار راه حل ها و نظرات با ارزش شما هستم، پاینده باشید.

mohseni12345 · Sep 19, 2007

اینو یه نگاه بندازید ببینید چطوره

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>Untitled 1</title>
<style type="text/css">
* {
	padding: 0;
	border: 0;
	margin: 0;
	list-style: 0;
}
body {
	text-align: center;
}
div {
	width: 332px;
	margin: 20px auto;
	background:url('title_left.jpg') transparent no-repeat left top;
}
h1 {
	font: normal bold 9px verdana;
	color: #000;
	margin: 0 0 0 20px;
	padding: 0 20px 0 0 ;
	background: url('title_right.jpg') transparent no-repeat right top;

}
span {
	padding: 10px 0 0 0;
	height: 20px;
	display: block;
	background: url('middle_title1.jpg') transparent repeat-x center top;
}
p{
	padding:10px 5px 5px 5px;
	border: 1px #39F solid;
	text-align: justify;
	font: normal 12px verdana;
	color: #000;
}
</style>
</head>

<body>

<div id="wrp">
	<h1><span>Sony Ericsson K770 Cyber-shot hits on</span></h1>
	<p>A new addition to the Cyber-shot family is already a fact - the new Sony 
	Ericsson K770 was announced today. As you may have probably heard, today Sony 
	Ericsson Update: Live photos added </p>
</div>

</body>

</html>

echessdesign · Sep 19, 2007

خیلی عالی بود، اما اگر جای h1 و span با هم عوض بشه عالیه...

mohseni12345 · Sep 19, 2007

نمیشه
در xhtml 1.0 تگ h1 نمی تونه زیر مجموعه تگ span باشه
گیر میده

amirabbas_p30magazine · Sep 19, 2007

کد صفحه یک سری مشکل داره

1- صفحه DOCTYPE نداره. همین میتونه یکی از عوامل برای اختلاف ها باشه
2- کلاس title. تو کد CSS صفحه float: left; داره. لازم نیست اون بخش float باشه. یکی از چیز هایی که مشکل درست کرده اینه
3- کد صفحه یه تگ <div/> پایانی داره که معلوم نیست اون وسط چی می خواد.

در کل به نظر من برای درست کردن اون طرح میشه کار های خیلی راحت تری انجام داد.

echessdesign · Sep 19, 2007

درود بر شما
امیر عباس جان ،لطفا طرح پیشنهادی خودت رو قرار بده.
پاینده باشید.

mohseni12345 · Sep 19, 2007

به نظر من یکی از بزرگترین مشکلهای طراح های css ایرانی تازه کار اینه که فکر میکنند css یعنی استفاده از div
در صورتی که اونها نمیدون تگهای موجود در html خودشون کار div رو انجام میدند
به خاطر همین از div اضافی استفاده می کنند و این کار باعث میشه کارشون برای نمایش یکسان در مرورگر های مختلف سخت بشه. به نظر من مشکل این کد تعریف کردن اضافی div هست

تمام اینها هم به خاطر نبود یک مرجع فارسی خوب که در دسترس همه باشه هست.