הוסטס - פורום אחסון האתרים הגדול בישראל - [DIVים] נושא שאלות וכמה הסברים.

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

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

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

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

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

HTML קוד:

<div class"div_one">Div Number 1 </div>

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

קובץ CSS:

HTML קוד:

.div_one {

float:right;

}

.div_two {

float:right;

}

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

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

קובץ HTML:

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:

HTML קוד:

.div_one {

float:right;

}

.div_two {

float:right;

}

.div_three {

clear:both;

}

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

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

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:

HTML קוד:

.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

HTML קוד:

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

CSS:

HTML קוד:

height:500px;

line-height:500px;

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

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

HTML קוד:

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

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

CSS:

HTML קוד:

.div_one {

float:right;

}

.div_two {

float:left;

}

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