אני בעבר פתחתי מספר אשכולות בנוגע למירכוז אלמנט, ומאז למדתי איך ממרכזים אלמנטים בעזרת CSS.

הבעיה היא שלמרות שאני עושה זאת, זה לא עובד בכלל (לפחות לא בשיטת ה- margin) ואני יודע בערך מה הסיבה אבל לא מהו הפיתרון.

קודם כל, שתדעו שהעברתי את המערכת שלי (נכתבה בשפת PHP) מקידוד windows-1255 ל- utf-8, זאת אומרת שעשיתי 2 דברים:
1. שמרתי את כל הקבצים בפורמט UTF-8, במקום הפורמט הקודם שהיה להם - ANSI (כשעושים Save as... ואז יש בחירה של Encoding). עשיתי זאת באמצעות התוכנה הרגילה Notepad.
2. שמרתי את כל הקבצים באמצעות התוכנה Notepad++ כדי להסיר את חתימת ה-BOM שנוצרת בתחילתו של כל קובץ PHP.
3. שינתי את הקידוד במסד הנתונים ל-utf8 וקבעתי collation בהתאם.

הבעיה של מירכוז האלמנטים נובעת מהצעד הראשון שעשיתי - שינוי הקידוד של הקבצים עצמם מ-ANSI ל-UTF-8. בדקתי את זה אח"כ על קבצים ישנים של המערכת (קבצי גיבוי ששמרתי לפני שנוצרה הבעיה, שבהתחלה בעיה המירכוז בהם לא הייתה, אבל אחרי ששמרתי בפורמט UTF-8 הופיעה הבעיה) וראיתי שזה באמת הבעיה.

אני חייב להשאיר את הקידוד של הקבצים שיהיה UTF-8, אבל יש את הבעיה במירכוז האלמנטים...

מה אפשר לעשות כדי לפתור את הבעיה?
מצאתי פיתרון אחר אבל הוא די מעצבן, והפיתרון הוא לשים אלמנט מסביב לאלמנט שאני רוצה למרכז, ולתת לו ערך ב-CSS שהוא: text-align:center.

תודה מראש.

עריכה:
מצאתי עוד דרך - להגדיר ב- margin לפי אחוזים, ולא לפי auto. אבל זה עדיין מעצבן והייתי רוצה לדעת למה auto פשוט לא עובד ואיך לגרום לו כן לעבוד?

נשמע מוזר שהקידוד קשור לבעית המירכוז שלך. יכול להיות שכשהעברת את האתר לקידוד אחר, שינית משהו ולא שמת לב?

אני חושב שאתה צריך לקבוע את הmargin:auto אחרי שאתה קובע width לאלמנט

קידוד ומירכוז לא אמורים להיות קשורים אחד לשני, אצלי זה עובד פיקס עם קידוד utf-8 ו- margin

הנה לך דוגמא קצרה כיצד אני ממרכז:

קוד PHP:

 <div style='width:800px; margin:0px auto;'> - מורכז לעומת הבודי של הדף
<div style='400px; margin:0px auto;'> - מורכז בתוך הדיב העליון
</div> 


מקווה שעזרתי.

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1208187486.gif]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1188591880.gif]

בכל מקרה, אם תראה לנו את הקוד\ האתר, יהיה יותר קל לעזור..

לי מוזר שהקידוד קשור בדיוק כמו שזה מוזר לכם.

אבל אני ניסיתי לבדוק אם זה ספציפית קשור, וזה נכון: לקחתי את קבצי הגיבוי של המערכת (עוד לפני ששיניתי את הקידוד או שעשיתי משהו שקשור לזה בכלל), שמתי בתיקייה אחרת בשרת ונכנסתי לדפי המערכת. הדפים עבדו כמו שצריך והאלמנטים שהיו צריכים להיות במרכז, היו במרכז.
אח"כ לקחתי מספר קבצים שהיו בהם אלמנטים עם המאפיין style והערך margin: auto; , שיניתי את הקידוד של הקבצים מ-ANSI ל-UTF-8, ואז נכנסתי שוב לאתר. אחרי שעשיתי זאת שמתי לב שהאלמנטים לא ממורכזים כמו שהוגדר להם.

yoavmatchulsky - גם את זה עשיתי.

iNfLuX - זה הקוד שכתבתי מייד אחרי תג ה-body (ערכתי טיפה את הקוד שלך כדי שזה יעבוד כמו שהתכוונת):

קוד:

<div style='width:800px; margin:0px auto; background-color:blue; color:white;'> - מורכז לעומת הבודי של הדף
<div style='width:400px; margin:0px auto; background-color:red;'> - מורכז בתוך הדיב העליון
</div></div>

וזה התוצאה:
https://2007-uploaded.fresh.co.il/2...15/41783688.gif

t_a7 - האתר נמצא ב-localhost, בשרת הביתי אצלי.
אבל הנה לדוגמא קוד של מירכוז אלמנט:

קוד:

<br /><br /><div class='bottom-links'><a href='http://localhost/web/index.php?act=idx'>עמוד ראשי</a></div>

והנה הקוד CSS:

קוד:

html 
{ 
	overflow-x: auto; 
	margin:0; 
	padding:0; 
}

body
{
	background-color:transparent;
	color:black;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:13px;
	text-align:right; 
	direction:rtl;
	margin:3px; 
	padding:0;
	border:0;
}

body:first-line /* Important! Do NOT remove! */
{
		font-size:0;
}

a:link, a:visited, a:active
{
	text-decoration: underline;
	color:black;
	background-color:transparent;
} 

a:hover
{
	text-decoration:underline;
}

.bottom-links
{
	background-color:#6699cc;
	color:#003366;
	border:1px solid black;
	width:100%;
	padding:3px 3px 3px 3px;
	text-align:right;
	font-weight:bold;
	margin:auto 3% 10px 3%;
}
.bottom-links a
{
	color:#003366;
}

זהו כל קוד ה-CSS שיכול להיות קשור.

עכשיו האלמנט ה-DIV הנ"ל הוא ממורכז, כי אם תשים לב, בclass שלו (bottom-links) כתבתי:

קוד:

margin:auto 3% 10px 3%;

כשבמקום ה- 3% אמור להיות auto.

דבר נוסף, אם תשימו לב הוספתי את הקוד:

קוד:

body:first-line /* Important! Do NOT remove! */
{
		font-size:0;
}

מה שאני חייב להוסיף, כי אחרת בשורה העליונה, מיד אחרי תג ה-BODY, יופיע לי רווח שתלוי בגודל ה-font. ללא שאוסיף את הקוד הנ"ל שמגדיר את גודל ה-font ל-0, יש לי רווח של שורה בגודל font של 13px כפי שמוגדר לתג ה-BODY.
אבל לפני שינוי הקידוד לא הייתי צריך להוסיף את זה...

תודה על העזרה

הנה מספר שינויים שעשיתי בקוד ה- CSS שהצגת למעלה.

קוד:

 

 
 
html 
{ 
overflow-x: auto; 
padding:0; 
}
body
{
background-color:transparent;
color:black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:13px;
direction:rtl;
margin:0px auto;
width: 100%; 
border:0;
} 

הנה התוצאה:

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1208187486.gif]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1188591880.gif]

זה מה שכתבתי לתג ה-BODY ב-CSS:

קוד:

body
{
	margin:0px auto;
	width:600px;
	color:black;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:13px;
	text-align:right; 
	direction:rtl;
	padding:0;
	border:0;
	background-color:transparent;
}

ול- width אין השפעה בכלל! ה-width של התג body לא משתנה, כאילו לא הגדרתי לו width.

ערכתי את קוד ה-CSS למה שכתבת, ועדיין זה לא ממורכז.

ד"א, הנה הקוד בראש דף ה-HTML (אם זה משנה משהו):

קוד:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><title>Dor's Website!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta name="copyright" content="Dor Marom and Dor's Website!" />
<meta http-equiv="Content-Language" content="he" />
<script type='text/javascript'></script>
<script src="scripts/global_functions.js" type='text/javascript'></script>
<!--Switch.This.For.User.Redirection-->
<style type='text/css' media="all">@import url("css.css");</style>
</head>
<body><div style='width:800px; margin:0px auto; background-color:blue; color:white;'> - מורכז לעומת הבודי של הדף
<div style='width:400px; margin:0px auto; background-color:red;'> - מורכז בתוך הדיב העליון
</div></div>
<!-- Logo --><div class='outer-logo'><div class='logo'><img src='images/logo.gif' border='0' alt='' /></div></div>

תבדוק את התגובה העליונה שערכתי, אצלי זה עובד פרפקט.

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1208187486.gif]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1188591880.gif]

קוד ה-CSS

קוד:

 

 
html 
{ 
overflow-x: auto; 
padding:0; 
}
body
{
background-color:transparent;
color:black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:13px;
direction:rtl;
margin:0px auto;
width: 100%; 
border:0;
}
body:first-line /* Important! Do NOT remove! */
{
font-size:0;
}
a:link, a:visited, a:active
{
text-decoration: underline;
color:black;
background-color:transparent;
} 
a:hover
{
text-decoration:underline;
}
.bottom-links
{
background-color:#6699cc;
color:#003366;
border:1px solid black;
width:100%;
padding:3px 3px 3px 3px;
text-align:right;
font-weight:bold;
margin:auto 3% 10px 3%;
}
.bottom-links a
{
color:#003366;
}

קוד ה-html

קוד:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><title>Dor's Website!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="copyright" content="Dor Marom and Dor's Website!" />
<meta http-equiv="Content-Language" content="he" />
<script type='text/javascript'></script>
<script src="scripts/global_functions.js" type='text/javascript'></script>
<!--Switch.This.For.User.Redirection-->
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<div style='width:800px; margin:0px auto; background-color:blue; color:white;'>Margined in body
<div style='width:400px; margin:0px auto; background-color:red;'>Margined in blue div
</div></div>
</body>
</html>

התוצאה:

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1208187486.gif]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1188591880.gif]

אני יודע שזה עובד אצלך ושזה גם אמור לעבוד אצלי, אבל זה לא עובד ואני לא מבין בדיוק למה ואיך לפתור...

ערכתי קצת את קוד ה-html אם שמת לב, תבדוק כך.

במידה ולא עובד כניראה שהבעייה כבר לא בזה.

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1208187486.gif]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://muzx.net/files/public/avatars/1188591880.gif]

שמתי לב לשינוי ועשיתי כפי ששינית אבל לא השתנה והאלמנט לא מורכז.

עכשיו ניסיתי איזה משהו וקיבלתי תוצאות מענינות: לאחר שניכנסתי לדף ה-index של המערכת, שמרתי את הדף כקובץ htm בפורמט UTF-8 אל המחשב. צימצמתי כמה שיותר את הקוד שהיה בכל הדף, עד שהגעתי לקוד הבא:

קוד:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Problem</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta name="copyright" content="Dor" />
<meta http-equiv="Content-Language" content="he" />
<style type='text/css'>
html 
{ 
	overflow: auto; 
	padding:0;
	margin:auto;
}

body
{
	margin:0px auto;
	width: 100%; 
	color:black;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:13px;
	text-align:right; 
	direction:rtl;
	padding:0;
	border:0;
	background-color:transparent;
}
body:first-line /* Important! Do NOT remove! */
{
		font-size:0;
}
</style>
</head>
<body><div style='width:800px; margin:0px auto; background-color:blue; color:white;'>fff
<div style='width:400px; margin:0px auto; background-color:red;'>fgff
</div></div>
</body>
</html>

הנה הדף אחרי שהעלתי אותו לשרת של פרש:
https://2007-uploaded.fresh.co.il/2...15/13697520.htm
והנה תמונה של איך שזה נראה(למרות שאפשר לראות את זה גם דרך העמוד html):
https://2007-uploaded.fresh.co.il/2...15/66784625.jpg


מה יכול להיות לא טוב...?

עריכה:
גם ניסיתי את זה עם קוד ה-CSS שאתה כתבת...

עריכה2:
ב-FireFox זה עובד מצוין!
רק ב-IE לא! וזה עוד יותר מוזר :\

לקחתי והדבקתי בדיוק את הקוד לקובץ וניסיתי אצלי ובשני הדפדפנים זה עובד טוב וממורכז..

אולי שינית משהו בהגדרות של אקספלורר?

אתה יכול להוסיף text-align:right.
זה יסדר את הבעיה של IE

משהו נורא מוזר קרה שניסיתי לתקן, כנראה יש לך כמה תווים לא מוכרים בתוך המסמך, שהעברתי מ UTF ל ANSI הופיע לי כמה סימני שאלה בהתחלת המסמך, אחרי שמחקתי אותם והעברתי חזרה ל UTF, פתאום הכל עובד כמו שצריך, הנה הדף..


https://2007-uploaded.fresh.co.il/2...15/91920001.htm

יש לך 7 רצפי BOM בראש הקובץ. אחרי שהורדתי אותם הכל הסתדר. זה מן באג בIE...הוא מגיב באופן לא צפוי כשיש BOM שמקום או כמות לא צפויים.

7 רצפי BOM ?!
Notepad++ אמור היה להוריד את כולם!...אמור

איך גילית את זה? שיש 7 רצפים? ואיך אפשר להוריד אותם?

yoavmatchulsky - לא שיניתי
Silver Strike - הבעיה של IE לא קשורה לזה בדיוק...או שהתכוונת למשהו אחר? ואני בודק ב-IE 6

t_a7 - כנראה זה ה-BOM'ים ?

האמת, הייתי בטוח שכבר בדקת את עניין ה-BOM.
באופן כללי, הדפדפן מזהה את החתימה בתור טקסט רגיל, שמופיע לפני הגדרת ה-DTD - מה שגורם לדפדפן לרנדר את הדף כ-Quirks mode. מה שגורם לבעיה.

זהו שאני בדקתי והייתי בטוח שאין BOM

Notepad++ לא אמור להוריד את זה אוטומטית בשמירה? שמרתי את כל הקבצים באמצעותו (לאחר ששמרתי דרך ה-Notepad הרגיל כדי להפוך אותם לפורמט UTF-8).

מה אני אמור לעשות עכשיו? איך אני יכול להוריד את ה-BOM'ים על בטוח?

ואיך maxim ראה את כל ה-BOM'ים?

סימנתי בריבוע אדום כל רצף BOM....

אני בכל זאת חושב שזה באג בIE מכיוון שהוא אמור להבין שזה BOM, ככה שזה די מוזר שהוא עובר לquirks mode...בדקתי בFF ו Opera ושניהם הציגו כראוי...או שמצד שני הם טיפה מוותרים בקטע הזה בעוד ש IE עומד על עקרונותיו


עריכה:
מתברר שזה אכן סוג של באג בIE, ומה שמעניין זה שהוא תקף עבור כל דבר!
אפילו

קוד PHP:

<?xml version="1.0" encoding="utf-8"?>

דוחף את IE לquirks mode, למרות שכמובן שזה לא אמור לקרות.

אבל עדיין לא אמור להיות שום דבר לפני הגדרת ה-DTD.
בעקרון השרת אמור לשלוח את הדף נכון והוא לא ממש עושה את זה.

תודה לכולם!
הבעיה נפתרה!

השתמשתי בעורך HEX והורדתי את חתימת ה-BOM שבקובץ ה-index.php, ועכשיו זה עובד מצוין

maxim, מה שמו של העורך שלך?

כל מה שאני יודע לגבי זה, זה שזאת מעין חתימה שנוצרת בתחילתו של קובץ PHP כששומרים אותו בפורמט UTF-8. וזה מאוד מפריע לקביעת Header'ים (כותרים) וכמו שאתה רואה באשכול זה, לפעולה תקינה של האקספלורר...

למידע נוסף:
http://unicode.org/unicode/faq/utf_bom.html#22
(רד קצת למטה בעמוד ותמצא את זה)

החתימה מתווספת לכל מסמך. לא רק למסמכי PHP
תוכנות חכמות שואלות אותך אם אתה מעוניין להוסיף את החתימה.
אני אישית תמיד משתמש בה - לפי מה שאני מבין ל-PHP יש בעיה לעבוד עם החתימה הזו, לכן מומלץ לא לכלול אותה.