[DIVים] נושא שאלות וכמה הסברים.

[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;
}

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

[Elad-A]

יותר נכון:

<div style="float:right;">Div Number 1 </div>
<div style="float:left;">Div Number 2 </div>

[Daniel]

אך כך זה יהיה:

Div Number 1 _____________________________Div Number 2

והם לא יהיו צמודים, זה דבר אחר, אך גם זה-אני אוסיף.

[EpsilonTal]

תודה, אבל..
כשעובדים עם CSS זה טיפה שונה
אשמח אם תוסיף

תודה על ההשקעה

[Daniel]

במקום style, אתה מוסיף class, ובקובץ CSS מסדר את הכל.

אני עכשיו אסדר את הכל ל-Class ו-CSS

[Beesites]

"כפי שהוכח"? איפה ההוכחות לכך?

[Daniel]

אני מציע לך לחפש בגוגל ובפורום.

[Eran-s]

נכתב במקור על ידי Beesites

"כפי שהוכח"? איפה ההוכחות לכך?

לא חסרים מאמרים על כך.
בקשר למירכוז אנוכי עם line-height, זה לא עובד בIE6 ומטה.

[Daniel]

הא, אז ידוע למישהו תחליף?

[mayden]

vertical-align: top;

אם אני לא טועה, זה עובד.