[Daniel]

כפי שהוכח, והיני בטוח שרובכם יודעים, עיצוב שמקודד ב-DIVים נטען הרבה יותר מהר מאשר עיצוב שנטען מטבלאות.

לשם הנוחות, הכנתי מין רשימה קטנה, מהכי לאט-להכי מהיר.

• קידוד בפוטושופ. סיבה: הרבה תמונות ותמונות ריקות. טבלאות.
• קידוד ידני עם תמונות וטבלאות. טבלאות.
• קידוד ב-DIVים עם קצת תמונות.

כמה "טריקים" שנשאלים לרוב.


שאלה: כיצד אני עושה 2 DIVים באותה שורה?
קובץ HTML:

<div class"div_one">Div Number 1 </div>
<div class="div_two">Div Number 2 </div>

קובץ CSS:

.div_one {
float:right;
}
.div_two {
float:right;
}

------------------------------------------------------------

שאלה: כיצד אני עושה 2 DIVים באותה שורה, ואז אנטר ו-DIV בשורה אחריהם?

קובץ HTML:

<div class"div_one">Div Number 1 </div>
<div class="div_two">Div Number 2 </div>
<div class="div_three">Div Number 3 </div>

קובץ CSS:

.div_one {
float:right;
}
.div_two {
float:right;
}
.div_three {
clear:both;
}

------------------------------------------------------------

אם אני רוצה לעשות DIV, מתחתיו עוד DIV, ולידם DIV שלישי, איך?
HTML:

<div class="div_one">Text-UpRight</div>
<div class="div_two">Text-Left<br />Text</div>
<div class="div_three">sss<br />ssssssssOther text-DownRight</div>

CSS:

.div_one {
float:right;
width:400px;
height:150px;
}
.div_two {
float:right;
width:400px;
height:300px;
}
.div_three {
width:400px;
height:150px;
}

------------------------------------------------------------

כיצד אני משתמש ב-Vertical-Align ב-DIV?
HTML

<div class="div_one">Middle</div>

CSS:

height:500px;
line-height:500px;

------------------------------------------------------------

כיצד אני עושה 2 DIVים, כאשר אחד צמוד לצד ימין, ואחד לצד שמאל?
HTML:

<div class="div_one">Div Number 1 </div>
<div class="div_two">Div Number 2 </div>

CSS:

.div_one {
float:right;
}
.div_two {
float:left;
}

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