ABA
יומן פעילות לוח שנה מבזקי חדשות תקנון RSS כותרות כותרות לפי תגובה ניקוי קוקיז IP להורדת אפליקציה
eBay AliExpress GearBest Amazon Booking Kiwi SkyScanner Trip Advisor


"עזרה בהבנה של קוד HTML,"
גירסת הדפסה        
קבוצות דיון בניית אתרים נושא #10207 מנהל    סגן המנהל    מפקח   Winner    צל"ש   מומחה  
אשכול מספר 10207
dvir8
חבר מתאריך 13.5.02
5929 הודעות, דרג אמינות חבר זה 		   22:16   30.06.11   
אל הפורום  
  עזרה בהבנה של קוד HTML,  
 
   שלום, אני כרגע מתרגל קצת ומנסה לפתח איזה פרוייקט קטן.
באמצע התהליך, נתקלתי במקרה מוזר. להלן הקוד:

<!--The first page with the logo -->
<html>
	<head>
		<script type="text/javascript" src="scripts/main.js"></script>
		<link rel="stylesheet" type="text/css" href="css/resets.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>
	<body>
		<div id="control_panel">
			<ul>
				<li id="welcome">Hello User! <a id="signout" href="">signout</a></li>
				<li><a href="">Add Solution</a></li>
				<li><a href="">Find Solution</a></li>
				<li id="date_time">30/06/2011 21:47</li>
			</ul>
		</div>
		<div id="main">
			<a href=""><img id="logo" src="images/logo.png" alt="" title="" /></a> <!--Logo Image 500*94  -->
			<form name="search_form" action="" method="get"> <!--Search Form -->
				<input id="search_field" type="text" name="search_field" value="Type here..." /> 
				<input id="search_button" type="submit" value="Find it!" />
			</form>
		</div>
		<div id="footer">
			<span>Creator: Admin</span>
		</div>
	</body>
</html>

הכל נראה מצויין יחד עם עיצוב ה Css.
הקטע המוזר, הוא שה Div האחרון (footer) לפי הסדר הכרונולוגי לא מופיע בפועל אחרי ה Div האמצעי (main). אני מנסה להבין מהי הסיבה לכך?
האם לסדר האלמנטים אין סדר מבני כמו שרשמתי? או שיכול להיות שנתתי תכונה ל div אחר שגרם ל footer להתנהג כפי שהוא מתנהג?

צירפתי את ה css להבנה חדה יותר:


*{
        margin:0px;
        padding:0px;
}
#control_panel{	
	background: #F0F0F0;
	color:blue;
	-webkit-box-shadow: 10px 10px 2px 2px #D8D8D8 ;
	box-shadow: 1px 1px 8px 1px #D8D8D8 ;
}
#control_panel li{
	display:inline;
}
#welcome{
	color:black;
}
#signout{
	font-size:10px;
	color: #000099;
	margin-right:10px;
}
#date_time{
	font-size:10px;
	float:right;
	color:black;
}
#main{		
	position:absolute;
	top:20%;
	left:50%;
	margin-left: -300px;	
	width:600px;
	height:200px;
}
#main img{
	margin-left:34px;
}
#search_field{
	width:100%;
	height:40px;
	margin-top:10px;
}
#search_button{
	width:100px;
	height:30px;	
	margin-left:250px;
	margin-top:10px;	
}


                                שתף        
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

  האשכול     מחבר     תאריך כתיבה     מספר  
  הבנתי את הבעיה, ה position. dvir8 30.06.11 22:19 1
     פתרתי זאת בצורה הבאה, dvir8 30.06.11 22:36 2
         למה לא לשים משהו כזה: CaTz 01.07.11 09:26 3
             אני מעוניין למרכז את האובייקט Vertically ו Horizontally dvir8 02.07.11 01:13 4
                 נשמה לא ככה :) Sylver 04.07.11 20:13 5
                     חסר לך גם Sylver 04.07.11 20:35 6
                         תודה רבה גבר :] dvir8 05.07.11 16:19 7

       
dvir8
חבר מתאריך 13.5.02
5929 הודעות, דרג אמינות חבר זה 		   22:19   30.06.11   
אל הפורום  
  1. הבנתי את הבעיה, ה position.  
בתגובה להודעה מספר 0
 
   למי שתוהה למה בכלל השתמשתי ב position.
עשיתי זאת כדי למרכז div גם מצד העמוד ומראשו למרכז המסך.
למנוע שימוש מיותר ב javascript.

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


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
dvir8
חבר מתאריך 13.5.02
5929 הודעות, דרג אמינות חבר זה 		   22:36   30.06.11   
אל הפורום  
  2. פתרתי זאת בצורה הבאה,  
בתגובה להודעה מספר 1
 
   הכנסתי את הקוד הבא לגבי ה footer

#footer{
	height:21px;	
	position:absolute;
	top:100%;
	margin-top:-21px;
}

בעצם ביצעתי את אותה פעולה כמו ב main. רק שהפעם ביצעתי שליחה של ה div לסוף העמוד תוך כדי החזרה של גודל ה div לאחור.

אני מקווה שהשיטה הזאת תתמוך גם כן באקספלורר גרסה 7 ומעלה.


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
CaTz
חבר מתאריך 2.10.04
14537 הודעות, דרג אמינות חבר זה 		   09:26   01.07.11   
אל הפורום  
  3. למה לא לשים משהו כזה:  
בתגובה להודעה מספר 2
 
   

main{
margin:auto;
width:700px;
}
footer{
margin:auto;
width:700px;
}

מה שזה עושה זה שם גודל קבוע לDIV וממרכז אותו במרכז העמוד. תעיף את ה-absolute, לרוב לא משתמשים בו...


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
dvir8
חבר מתאריך 13.5.02
5929 הודעות, דרג אמינות חבר זה 		   01:13   02.07.11   
אל הפורום  
  4. אני מעוניין למרכז את האובייקט Vertically ו Horizontally  
בתגובה להודעה מספר 3
 
   לכן עשיתי זאת. הפיתרון שנתת לא עושה זאת בצורה Vertically נכון?

תודה אגב


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק, 0 נקודות		   20:13   04.07.11   
אל הפורום  
  5. נשמה לא ככה :)  
בתגובה להודעה מספר 4
 
   אתה צריך לעשות בשיטה שהוא הראה לך.

לא משתמשים ב POSITION בשביל דברים כאלה.

אתה עושה שלושה דיבים.

HEADER

MAIN

FOOTER

לכל אחד אתה נותן רוחב בפיקסלים ומגדיר MARGIN:AUTO. ברגע שעשית את זה הם מתמרכזים אוטומטית באמצע. דבר נוסף שאתה צריך לעשות זה להגדיר ב CSS של התג BODY מרגין 0 וככה בעצם להתחיל ממש מהקצוות של הדפדפן.

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

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


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Sylver
חבר מתאריך 1.7.02
11915 הודעות, 2 פידבק, 0 נקודות		   20:35   04.07.11   
אל הפורום  
  6. חסר לך גם  
בתגובה להודעה מספר 5
 
   
<!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" />

בלי זה IE יעשה לך צרות.


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
dvir8
חבר מתאריך 13.5.02
5929 הודעות, דרג אמינות חבר זה 		   16:19   05.07.11   
אל הפורום  
  7. תודה רבה גבר :]  
בתגובה להודעה מספר 6
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

תגובה מהירה  למכתב מספר: 
 
___________________________________________________________________

___________________________________________________________________
למנהלים:  נעל | תייק בארכיון | מחק | העבר לפורום אחר | מחק תגובות | עגן אשכול
       



© כל הזכויות שמורות ל-רוטר.נט בע"מ rotter.net