חיפוש

עזרה

הרשמה

התחברות

עדכונים

בניית אתרים
UnderWarrior Forums : בניית אתרים

נושא: קודים ללימוד מיקום ב-css

כותב

הודעה

<< נושא קודם | נושא הבא >>

נאוה
פורומיסט על

הצטרף / הצטרפה: 06 August 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 1209

נשלח בתאריך: 22 October 2006 בשעה 19:13

| IP רשוּם

אני מדביקה פה קודים ללימוד מיקום ב-css
מומלץ לשחק עם הקודים וכך לחקור אותם ולהכיר אותם
אפשר לשנות ערכים להחליף צבעים לראות מה קורה אם משנים
רלטיב לאבסולוט וכך הלאה. מה שיותר משחקים יותר לומדים.
אחר כך אני מציעה לנסות לחבר את כל סוגי המיקום ביחד
ולראות מה קורה.
אחרי המשחקים וההתנסיות העצמיות
מומלץ להכנס לאוסף האתרים המדהים שפה בקישור מגוגל
וללמוד את הנושא המקסים הזה יפה יפה, כמו שצריך.
בהצלחה לכולנו.
אני אחזור להכניס את הקישור.
חזרתי -css positioning

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

__________________
ספרי חידות
חידות הגיון
חידות

חזרה לתחילת העמוד

נאוה
פורומיסט על

הצטרף / הצטרפה: 06 August 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 1209

נשלח בתאריך: 22 October 2006 בשעה 19:21

| IP רשוּם



absolute.html

קוד:

   
    
    
      
       
<head>
<style type="text/css">
     body {margin:0;}
     
     #aa, #bb, #cc, #dd { width:75px; height:75px;}
     div#aa {position:absolute; left:150; top:0; background:blue;}
     div#bb {position:absolute;left:300px; top:0; background:red;}
     div#cc {position:absolute; left:450; top:0px; background:green;}
     div#dd {position:absolute; left:600px; top:0px; background:yellow;}

</style>
</head>

<body>
<div>
     <div id="aa"></div>
     <div id="bb"></div>
     <div id="cc"></div>
     <div id="dd"></div>
</div>
</body>


      
     
   
  




float relativ dd.html

קוד:

   
    
    
      
       
 body {background:#ccc; margin:0;}
    #wrap {width:240px;}
    #wrap div {float:left; width:30px; height:30px;}

     #aa, #bb, #cc, #dd { width:75px; height:75px;}
     div#aa {position:relative; left:0; top:0; background:blue;}
     div#bb {position:relative;left:0px; top:0; background:red;}
     div#cc {position:relative; left:0; top:0px; background:green;}
     div#dd {position:relative; left:0px; top:0px; background:yellow;}

</style>
</head>

<body>
<div id="wrap">
     <div id="aa"></div>
     <div id="bb"></div>
     <div id="cc"></div>
     <div id="dd"></div>
</div>
</body>

      
     
   
  







 

relative ribua. html


קוד:

   
    
    
      
       
<head>
<style>
     div#a {height:10em; width:10em; position:relative; background-color:darkblue;}
     div#b {height:50px; width:50px; position:relatie; background-color:yellow; right:0%; bottom:0%;}
</style>
</head>

<body>
<div id="a">
     <div id="b"></div>
</div>
</body>


      
     
   
  





h relative p.html

קוד:

   
    
    
      
       

<head>
<style type="text/css">
     body {margin:0;}
     
     h1 { width:75px; height:75px;}
     .nw {position:relative; left:0; top:0; background:blue;}
     .ne {position:absolute; left:150px; top:0; background:red;}
     .sw {position:absolute; left:0; top:150px; background:#33ff55;}
     .se {position:absolute; left:150px; top:150px; background:yellow;}

</style>
</head>

<body>
<div>
     <h1 class="nw"></h1>
     <h1 class="ne"></h1>
     <h1 class="sw"></h1>
     <h1 class="se"></h1>
</div>
</body>

      
     
   
  





float. html

קוד:

   
    
    
      
       
body {background:#ccc; margin:0;}
 
    #wrap div {float:left; width:60px; height:60px;}
   #wrap {width:480px;}
     #aa, #bb, #cc, #dd { width:150px; height:150px;}
     div#aa {position:relative; left:150px; top:150px; background:blue;}
     div#bb {position:relative;left:150px; top:150px; background:red;}
     div#cc {position:relative; left:150px; top:150px; background:green;}
     div#dd {position:relative; left:150px; top:150px; background:yellow;}

</style>
</head>

<body>
<div id="wrap">
     <div id="aa"></div>
     <div id="bb"></div>
     <div id="cc"></div>
     <div id="dd"></div>
</div>
</body>

      
     
   
  








div class.html

קוד:

   
    
    
      
       
<head>
<style type="text/css">
     body {margin:0;}
     
     .aa, .bb, .cc, .dd { width:75px; height:75px;}
     div.aa {position:relative; left:0; top:0; background:blue;}
     div.bb {position:absolute; left:150px; top:0; background:red;}
     div.cc {position:absolute; left:0; top:150px; background:#33ff55;}
     div.dd {position:absolute; left:150px; top:150px; background:yellow;}

</style>
</head>

<body>
<div>
     <div class="aa"></div>
     <div class="bb"></div>
     <div class="cc"></div>
     <div class="dd"></div>
</div>
</body>

__________________
ספרי חידות
חידות הגיון
חידות

חזרה לתחילת העמוד

Dracula4ever
משתמש חבר

הצטרף / הצטרפה: 30 May 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 146

נשלח בתאריך: 22 October 2006 בשעה 19:24

| IP רשוּם

את יודעת מה... גם אני אשתתף במשחק הקטן שלך

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

המקור:
http://www.underwar.co.il/forum/forum_posts.asp?TID=3760& ;PN=3

__________________
אנרגיה סולארית | מערכת חשמל סולארית | פתרונות אנרגיה סולארית

חזרה לתחילת העמוד

11010010110
פורומיסט על

הצטרף / הצטרפה: 23 April 2006
משתמש: מנותק/ת
הודעות: 2621

נשלח בתאריך: 22 October 2006 בשעה 20:55

| IP רשוּם

משהוא נחמד
http://www.w3.org/Style/Examples/007/menus.html

חזרה לתחילת העמוד

11010010110
פורומיסט על

הצטרף / הצטרפה: 23 April 2006
משתמש: מנותק/ת
הודעות: 2621

נשלח בתאריך: 22 October 2006 בשעה 22:11

| IP רשוּם

ועוד משהוא נחמד.

הקוד והתמונות האלה עשיתי מהר כזה בטוח זה לא תקני או
משהוא אבל בעיקרון ניתן לעשות מזה תקני וטוב.

קוד:

<html> 

<head> 

<style> 

table 

     { 

      border                 : 0px; 

      padding     ;           ; : 0px; 

      margin                 : 0px; 

      width    & nbsp;         & nbsp;: 2400px; 

     } 

td 

     { 

      border                 : 0px; 

      padding     ;           ; : 0px; 

      margin                 : 0px; 

      width    & nbsp;         & nbsp;: 600px; 

      height                 : 250px; 

      background-attachment &nb sp;   : fixed; 

      background-position   ;   : 0px, 0px; 

      background-repeat  & nbsp;  : no-repeat 

     } 

td.c1 

     { 

      background-image  &n bsp;  : url("1.png") 

     } 

td.c2 

     { 

      background-image  &n bsp;  : url("2.png") 

     } 

td.c3 

     { 

      background-image  &n bsp;  : url("3.png") 

     } 

td.c4 

     { 

      background-color  &n bsp;  : transparent; 

     } 

</style> 

</head> 

<body> 

<table><tr> 

<td class="c1"> </td> 

<td class="c2"> </td> 

<td class="c3"> </td> 

<td class="c4"> </td> 

</tr></table> 

</body> 

</html>

התמונות - לשמור אותן בשם

1.png
http://hozt.net/image.php?img=20061022220802438235.png

2.png
http://hozt.net/image.php?img=20061022220834796161.png

3.png
http://hozt.net/image.php?img=20061022220905008694.png

נסו להעביר את הדף ימינה ושמאלה

חזרה לתחילת העמוד

נאוה
פורומיסט על

הצטרף / הצטרפה: 06 August 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 1209

נשלח בתאריך: 05 November 2006 בשעה 01:05

| IP רשוּם

הערה מאוחרת:

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

__________________
ספרי חידות
חידות הגיון
חידות

חזרה לתחילת העמוד

נאוה
פורומיסט על

הצטרף / הצטרפה: 06 August 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 1209

נשלח בתאריך: 05 November 2006 בשעה 22:36

| IP רשוּם

הפעם הדבקתי קוד שבנוי position:absolute float, כל המידות ניתנו באחוזים ולכן הקוד יוצר דף html שהוא גמיש ונמתח, דף אלסטי אתם יכולים למזער אותו להקטין אותו להגדיל אותו והוא מתמתח ומתכווץ. אם מישהו יכול להעביר עליו ביקורת. לראות אם הוא כתוב נכון אודה לו מאוד.

קוד:

<head>
<style type="text/css">

 body {background:silver; margin:5;}
        
       
     #b {float: right; position:absolute;right:50%; bottom: 30%; background:red; width:10%; height:20%;}
    #c {float: right; position:absolute; right:40%; bottom:40%; background:green;  width:30%; height:20%;}
       #d {clear:both; position:absolute; right:60%; bottom:60%; background:yellow; width:30%; height:40%;}

</style>
</head>

<body>

    
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>
</body>
position:static;

__________________
ספרי חידות
חידות הגיון
חידות

חזרה לתחילת העמוד

shoshan
מנהל האתר

הצטרף / הצטרפה: 16 July 2005
מדינה: Israel
משתמש: מנותק/ת
הודעות: 4637

נשלח בתאריך: 05 November 2006 בשעה 23:15

| IP רשוּם

האחוזים באמת נחמדים, כל עוד אין תוכן!

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

__________________
עד מתי רשעים יעלוזו?

עַל כֵּן אֶמְאַס וְנִחַמְתִּי עַל עָפָר וָאֵפֶר.

חזרה לתחילת העמוד

נאוה
פורומיסט על

הצטרף / הצטרפה: 06 August 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 1209

נשלח בתאריך: 17 December 2006 בשעה 11:38

| IP רשוּם

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

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

קוד:

<head>
<style type="text/css">


  body { background:silver;
    
    font-size: 100%; margin: 0px;}
         
    #b { position:absolute; left:13em; top: 3em; background:red; width:34em; height:13em; }
       
       #d { position:absolute; left:0em; top:16em; background:yellow; width:13em; height:13em;}
      
#b{font-family: arial, nachlieli-clm, sans-serif;
              font-weight: normal;
           
       
              margin: 0px;
              text-align:center;
              background-color: none;}

#d{font-family: arial, nachlieli-clm, sans-serif;
              font-weight: normal;
               padding-top: 30px;
       padding-right: 0px;
              margin: 0px;
              text-align:right;
              background-color: none;}
 
</style>
</head>

<body>

    <div id="b">
sssssssssssssssssssssssssssssssssssssssssssssssssss
dddddddddddddddddddddddddddddddddddddddd
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

</div>



    <div id="d">

dddddddddddddddddd
ffffffffffffffffffffffffffffffffffffffff
sssssssssssssssssss

         

</div>
  

</div>
</body>

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

קוד:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0   Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-t ransitional.dtd"> ;

<html "rtl" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<title>כמה נפלא_המלצות ספרים לגיל שנתיים עד תשע</title>
<meta name="keywords" content="word1, word2" /> 

<style type="text/css">
    body { background: #CC9966; margin:0;  font-size: 130%;}
  
    #sagol{ width:30%; height:4em; background:#990ff0; position:relative; left:0em; top:0em;}
        #header{ width:19.8em; height:4.5em; background:#990000; position:relative; left:0em; top:0%;}
        #subheading{ width:19.8em; height:2em; background:#99CCFF; position:relative; left:0em; top:0%}
#image{ width:10.9em; height:10.2em; background:#FFFFFF; position:relative; left:0%; top:0%;}
#description{ width:9.8em; height:10.4em; background:#99CCFF; position:absolute; left:100%; top:100%;}
      
</style>

</head>
  
<body >

<div id="sagol">
</div>

<div id="header"></div>

<div id="subheading"> 
</div> 
<div id="image"><div id="description"></div></div>

</div></div>

</div>

</body>
</html>

דוגמא של האתר בשלמותו שנעשתה לפי השיטה הזאת אפשר לראות
בתגובה חמישית בדף 9
בנושא אתר css תקין.

__________________
ספרי חידות
חידות הגיון
חידות

חזרה לתחילת העמוד

אם ברצונך להגיב לנושא זה עליך קודם להתחבר
אם אינך רשום/ה כבר עליך להרשם

גרסת הדפסה

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