פרש - בעייה בCSS - מיקומים relative absolute

אהלן ותודה על העזרה!

הבהרות: position:static התכוונתי למיקום הבא בתור בדף = הברירת מחדל של הדפדפן.
Property Values : static
Elements renders in order, as they appear in the document flow. This is default.
לצערי הדף לא יושב אונליין ואין לי לינק לתת, הקוד הוא די ארוך וזה סתם יסבך ויבלגן את השאלה.

ברור לי שיש משהו שפיספסתי בהגדרות של הדברים. ולכן אשתדל להיות ברור יותר ולהוסיף קטעי קוד שממחישים את הבעיה (-:

========================קוד העמוד===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtsml">

<head>
<link href="../css/public.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="loading" style="position:absolute; width:100%; text-align:center; top:150px;">
</div>
<div id="header">
<div id="logo">
</div>
<div id="search">
</div>
<div id="login_and_cart">
</div>
</div>
<div id="main_menu" >
</div>
<p class="clear"></p>
<div id="levels">
</div>
<div id="main">
<div id="main_left">
<h1>LEFT</h1>
<div id="main_left_1">
</div>
<div id="main_left_2">
</div>
<div id="main_left_3">
</div>
</div>
<div id="main_right">
<h1>RIGHT</h1>
<div id="page_content">
</div>
<div class="pagination">
<div class="pagination_left_part" >
</div>
<div class="pagination_right_part" >
</div>
</div>
<p class='clear'></p>
<div id="images">
<div id="image">
</div>
</div>
<p class='clear'></p>
<div class="pagination">
<div class="pagination_left_part" >
</div>
<div class="pagination_right_part" >
</div>
</div>
</div>
</div>
<div id="favorites">
<div id="favorites_menu">
</div>
<div id="favorites_frame">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
========================קוד הסגנון===============================
/* ==================================== Global Styles =========================================*/
html { height: 100%; width: 100%; }
body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
font-family: Arial, Helvetica, sans-serif; background: white;
font-size: 13px; color: black; line-height: 15px; }
image { border: none; padding: 0; margin: 0; }
p { border: none; padding: 0; margin: 0; }
p.clear { clear:both; height: 0; margin: 0; padding: 0; }

a:link {
text-decoration:none;
color: #377481;
font-size: 12px;
line-height: 20px;
}
a:hover {
color:377481;
text-decoration:underline;
}
a:visited {
text-decoration:none;
color: #377481;
font-size: 12px;
line-height: 20px;
}
table {
border: none;
margin: 0;
padding: 0;
}
td {
border: none;
margin: 0;
padding: 0;
}
tr {
border: none;
margin: 0;
padding: 0;
}
#page h1 { color: black; margin-top: 1em;}
#page h2 { color: black;; margin-top: 1em;}
#page h3 { color: #8D0D19; }
/* ==================================== Document Styles =======================================*/
/* ========================================= 1 : header ==========================================*/
#header {
position: relative;
width: 100%;
min-width: 1024px;
height: 100px;
margin: 0px;
padding: 0px;
background: BLUE;
}
#logo {
position: absolute;
top: 0;
left: 0;

width: 300px;
height: 100px;
margin: 0px;
padding: 0px;
background: white;
}
#search {
position: absolute;
top: 0px;
left: 330px;

width: 800px;
height: 50px;
margin: 0px;
padding: 30px 0 0 0;
background: white;
}
#search_form {
position: relative;
width: 600px;
height: 40px;
margin: 0px;
padding: 0px;
background: white;
}
#login_and_cart {
position: absolute;
top: 5px;
right: 20px;

color:white;
text-align:right;
vertical-align:top;

height: 95px;
width: 300px;
margin: 0;
padding: 0;
background: white;
}
/* ========================================= 2: main_menu ========================================= */
#main_menu {
position:static;
width: auto;
height: 34px;
min-width: 1024px;
padding: 0 0 0 20px;
margin: 0;
background:green;
}
/* =========================================3: Levels ===============================*/
#levels{
position: static;
margin: 0;
padding: 5px 0 0 10px;
height: 25px;
background: #F3F3F3;
border-color: #E9E9E9;
border-width: 5px 0 0 0;
border-style:solid;
background:red;
}
/* ======================================= 4: div id="main" ( main_left, main_right)===*/
#main{
position: relative;
background: white;
width:auto;
height:auto;
border:none;
margin: 0;
padding: 0;
backgroundrange;
}
#main_left{
position:absolute;
top: 0px;
left: 0px;
width:178px;
height:auto;
margin: 0;
padding: 0 0 0 0;
color: #2A3333;
background: purple;
border-color: #E9E9E9;
border-width: 0 2px 0 0;
border-style:solid;
}
#main_right{
position:absolute;
top: 0px;
left: 180px;
width:auto;
height:auto;
margin: 0;
padding: 5px 0 0 30px;
background: gold;
border:none;

}
/* ---------------------------------4.1: main_left----------------------------*/
/*------------ 4.1: main_left ==>div id="main_left_1"------------------- */
#main_left_1 {
position:static;
width: 170px;
height: auto;
padding: 0 0 0 10px;
margin: 0;
}
/*------------ 4.2: main_left ==>div id="main_left_2"----------------- */
#main_left_2 {
position:static;
width: 145px;
height: auto;
padding: 0;
margin: 7px 0 0 10px;;
color: grey;
background: white;
border-color: #E9E9E9;
border-width: 3px 3px 3px 3px;
border-style:solid;
}
/*------------ 4.1: main_left ==>div id="main_left_3"------------------- */
#main_left_3{
position:static;
width: 178px;
height: auto;
padding: 0;
margin: 0;
}
/* ----------------------------------4.2: main_right ---------------------------------*/
/*------------ 4.2: page_content------------------------------ */
#page_content{
margin: 0 50px 0 0;
}
/*------------ 4.2: pagination-------------------------------- */
.pagination{
position: relative;
background: white;
color: grey;
margin: 0 50px 0 0;
width:auto;
min-width: 800px;
height: 30px;

border-color: #CCCCCC;
border-width: 1px 0 1px 0;
border-style: dotted;
}
/*--------pagination_left_part---------- */
.pagination_left_part {
position:absolute;
top:4px;
left:5px;
margin: 0;
padding:0;
border:none;
width: auto;
height: 30px;
}
/*--------pagination_right_part---------- */
.pagination_right_part {
position:absolute;
text-align: rigth;
top:7px;
right: 10px;
margin: 0;
padding:0;
border:none;
width: auto;
height: 30px;
}

/*------------ 4.2: Images------------------------------------ */
#images {
position: relative;
background: white;
color: grey;
margin: 20px 100px 0 0;
width:auto;
min-width: 500px;
height: auto;
}
#image{
float: left;
margin: 10px 0 0 20px;
padding: 0;
border: none;
}
/* ================================= 5: div id="favorites" ===================================*/
#favorites {
position: fixed;
bottom: 0px;
left: 80px;
right: 80px;
height: 90px;

margin: 0px;
padding: 5px 0 0 0;

overflow-x:scroll;
overflow-y: hidden;
-ms-overflow-x:scroll ;
-ms-overflow-y: hidden;

text-align: center;

background: #484747;
color: white;
border-color: #BDB9B9;
border-width: 2px 3px 2px 3px;
border-style: solid;

border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-toolkit-border-radius: 15px 15px 0 0;
}
#favorites_menu {
position:absolute;
top: 0px;
left: 0px;
padding: 5px 0 0 5px;
margin: 0;
font-size: 12px;
color: white;
}
#favorites_frame{
position: static;
height: 45px;
padding: 0px;
margin: 13px 0 0 10px;
}
/* ================================= 6: div id="footer" =====================================*/
#footer {
position:static;
clear:both;
width: 1900px;
height: 200px;
margin: 0px;
padding: 0;
text-align: center;
background: yellow;
color: #D4E6F4;
}
================================================== ===============

==========================הערות=================== =======
1. העלתי תמונה של איך אמור להראות העמוד, חילקתי לצבעים שיהיה ברור יותר. כרגע אמנם בקוד שרשמתי זה מסתדר כפי שסתמונה אבל אצלי בקוד הfooter "מסתתר" בנקודת (0,0) של הmain

2. ישנם הרבה div-ים שהרוחב והגובה שלהם מוגדר להיות אוטומטי (בגלל זה עכשיו בתמונות הם בגודל המינימלי שלהם - מכווצים )- כי האתר מתעסק עם הצגת גלרייה של תמונות ולכן חוץ מ main_left שהרוחב שלו קבוע, main_right צריך להתפרש על כל שאר העמוד (יש לו גודל מינימלי מסויים במקרה ומישהו מקטין את הדפדפן)..( מבנה זהה - istockphoto.com )כמו כן לmain לא יכול להיות גודל קבוע מסיבה זאת....
3. ניסיתי לצורך טסט להגדיר גובה ל main ובאמת הfooter ירד למטה - ועל פי הצבעים אפשר לראות שבאמת ל main לא קיים גודל וזה שה footer נעלם "למעלה" מסתדר לי - מה ש Eran אמר בתגובתו.

הבעיה היא שאני לא יכול לתת לmain גודל קבוע....אז הדרך היחידה ההגיונית זה על ידי גלישה באמת.
4. בכל מקרה שמתי clear:both; ב footer.

ניסיתי את השיטה של הזרימה של חלק ימין וחלק שמאל שמאלה עוד לפני ועלו לי מספר בעיות:
א. אם אני מוריד את ההגדרה של main,
position: relative - או לחילופין רושם position: static
אז משום מה הוא קופץ למעלה מעל הכל כלומר מעל ה header...למה זה?? הרי במקרה הזה כן מוגדר גודל לheader אז זה לא אמור להיות???? יוצא שלא משנה מה אני חייב לתת לmain מיקום רילייטיב כדי שהוא ישאר שם...מוזר לי קצת...

ב. השארתי את main relative והחלפתי את הקוד של חלק ימין ושמאל לקוד הבא:

#main_left{
float:left;
width:178px;
height:auto;
margin: 0;
padding: 0 0 0 0;
color: #2A3333;
background: purple;
border-color: #E9E9E9;
border-width: 0 2px 0 0;
border-style:solid;
}
#main_right{
float:left;
width:auto;
height:auto;
margin: 0;
padding: 5px 0 0 30px;
background: gold;
border:none;
}

---------------------------------------
ב המשך:
*הקוד של float לשניהם לא עבד.
התמונה היא לצורך המחשה כי בקוד הריק ששמתי זה כן עובד אבל אצלי באתר זה נראה בדיוק ככה:

*ניסיתי מה Eran הציע - כלומר לתת float רק לשמאלי עם גודל קבוע (שיש לו גודל קבוע) ואז זה עובד חלקית כלומר רק חלק מהmain_right עולה למעלה והשאר גולש למטה והכל מתבלגן - גם מה שנשאר למעלה אז חלק עולה על הmain_left וחלק לא (אני יכול לפרט)- שוב לא ברור לי למה זה וגם מה ההבדל בין float על שניהם או רק על אחד.....זה אמור להיות שקול במקרה הזה לא?

*קראתי שיש אופצייה של
display:inline;
display:inline-block;
כאשר כל הקוד הוא רק דיוים ואין בהם תוכן אז באמת הכל נראה במקום הנכון...הבעייה היא שאצלי זה לא קורה ככה....וגם בדוגמא הזאת שהכל ללא תוכן נוצרת בעייה אחרת שאם אני מקטין קצת את הדפדפן אז חלק ימין גולש למטה...משהו שאסור לי שיקרה ולא משנה מה....

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

ניסיתי לשים display:inline רק בשמאלי \ על שניהם \ display:inline-block בשמאלי \ על שניהם
ולמרות שזה אמור לפתור את הבעייה ולהכריח את הדיו להשאר שם ולא לגלוש - זה לא מצליח...

ג. על הנייר הפתרונות שניסיתי והוצעו אמורים לעבוד אבל יכול להיות שאני מפספס משהו שלא קשור לפתרונות האלו?

זה אמור להראות בסוף כמובן לפי איך שזה נראה בתמונה הבאה:

כאשר אם מקטינים או מגדילים את הדפדפן החלק main right גדל במקביל ולחילופין אם מקטינים את הדפדפן הוא קטן עד לגודל מינימלי נגיד של 800px אבל בכל מקרה אסור שיגלוש למטה...

שימי וEran תודה!, אני מקווה שתצליחו להבין יותר טוב הפעם (-:
תודה רבה לכולם!

כלי אשכול	חפש באשכול זה
הצג גירסת הדפסה שלח דף זה ב E-Mail	חפש באשכול זה: חיפוש מתקדם
מצבי תצוגה	דרג אשכול זה
עבור למצב לינארי מצב כלאיים עבור למצב משורשר	דרג אשכול זה:

הדף נוצר ב 0.06 שניות עם 10 שאילתות
צור קשר - Fresh - למעלה