PDA

View Full Version : سوال: css position



صنم2010
پنج شنبه 14 اردیبهشت 1391, 19:17 عصر
سلام به دوستان
من یه مشکلی با css position دارم موقعیت عناصرم در مرورر گرهای مختلف متفاوت است یعنی مثلا می خوام در یک جای خاص یه عکس خاص را نشون بده ولی در مرورگرهای مختلف جای متفاوتی داره
ممنون می شم راهنمایم کنید

colors
پنج شنبه 14 اردیبهشت 1391, 19:41 عصر
درود

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup var, b, u, i, center, fieldset, form, label, legend, caption, tbody, tfoot, thead { background : transparent; border : 0; font-size : 100%; margin : 0; outline : 0; padding : 0; vertical-align : baseline; }

cyrusthegreat
پنج شنبه 14 اردیبهشت 1391, 21:00 عصر
دوست عزیز

این مشکل شما، به دلیل این هست که هر مرورگر برای خودش یه سری مقادیر اولیه برای تگ های HTML در نظر می گیره. برای همین شما باید اول اون مقادیر رو صفر کنید، بعد شروع به طراحی کنید. البته بازهم بدلیل موتور های متفاوتی که در هر مرورگر استفاده می شه، بازهم برخی تفاوت ها وجود داشته باشه. ولی اگر کدتون استاندارد زده شده باشه، این تفاوت ها در بین مرورگر ها بویژه IE8 به بالا، فایرفاکس 3.5 به بالا، کروم 2 به بالا و اپرا 10 به بالا، یکسان نمایش داده می شه. اما بازهم در بین نسخه های پاییینتر این مرورگر ها، بویژه مرورگر IE6 و IE7، از دیدن تفاوت هاممکنه شوکه بشید. برای این موارد باید از راهکارهایی که بنام هک خوانده می شن استفاده کنید.

کد CSS Reset دوست عزیز Colors خوب هست، ولی کامل نیست. پیشنهاد می کنم اگر برای HTML 4 کد می زنید از Reset زیر استفاده کنید:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}


و اگر برای HTML 5 کد می زنید از ریست زیر استفاده کنید:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


هردوی اینها توسط فردی به نام eric meyer نوشته شده اند.

نکته: در نظر بگیرید که این ریست کردن، باید قبل از هرگونه مقدار دهی به تگهاتون انجام بگیری. چون ترتیب نوشتن کدهای CSS در هنگام رندرینگ صفحه مهم هست. هر مقداری که در خطوط پایین تر نوشته بشه، اولویت بالاتری داره. پس باید حتما اینهارو در اولین جایی که CSS تعریف می کنید، قبل از اون قرار بدید.

صنم2010
جمعه 15 اردیبهشت 1391, 06:09 صبح
ممنون
ببخشید که این سوال را می پرسم ولی منظورتون از html5 یا html4 یعنی که چی؟

cyrusthegreat
جمعه 15 اردیبهشت 1391, 12:09 عصر
ممنون
ببخشید که این سوال را می پرسم ولی منظورتون از html5 یا html4 یعنی که چی؟

خب دوست عزیز

هرکدوم از این زبانها مثل تموم زبانهایی که برای کامپیوتر وبرنامه نویسی وجود دارند، نسخه های متفاوتی دارند. نسخه ای که هم اکنون مورد استفاده بیشتر وبسایت ها هست، نسخه 4 html هستش. ولی یکی دو سالی هست که استاندارد های مربوط به نسخه ی 5 این زبان هم معرفی شده. البته هنوز در حال توسعه هستش. سال 2015 رو سال نهایی شدن این نسخه اعلام کردن.

تفاوتشم که خیلی زیاده. ولی یه سری تگ ها که اون بالا هم بهشون اشاره شد، اضافه شدن. مثل اینها:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section


اگر سوالی بود، خوشحال می شم که در خدمتتون باشم.