ווי צו ניצן קסס פּאַזישאַנינג צו שאַפֿן לייאַוץ אָן טאַבלעס

טאַבלעאַס ליינאָוץ Open New Design Frontiers

עס זענען פילע סיבות נישט צו נוצן טישן פֿאַר אויסלייג . איינער פון די מערסט אָפט סיבות מענטשן געבן פֿאַר קעסיידערדיק נוצן זיי זענען ווייַל עס איז שווער צו מאַכן אויסלייג מיט CSS. כאָטש CSS סקריפּטינג טוט אַרייַננעמען אַ לערנען ויסבייג, ווען איר פֿאַרשטיין ווי צו מאַכן CSS אויסלייג, איר זאל זיין סאַפּרייזד דורך ווי גרינג עס קענען זיין. און אַמאָל איר לערנען, איר וועט האָבן גערעדט צו די צווייטע מערסט פּראָסט סיבה מענטשן געבן פֿאַר נישט ניצן CSS- "עס איז פאַסטער צו שרייַבן טישן." עס איז פאַסטער ווייַל איר וויסן טישן, אָבער אַמאָל איר לערנען קסס, איר זאל זיין פּונקט ווי שנעל מיט וואָס.

בראַוזער סופּפּאָרט פון קסס פּאַזישאַנינג

CSS פּאַזישאַנינג איז געזונט געשטיצט אין אַלע מאָדערן בראַוזערז . אויב איר זענט אַ וועבזייטל פֿאַר Netscape 4 אָדער Internet Explorer 4, דיין לייענער זאָל נישט האָבן קיין קאָנפליקט וויוינג דיין CSS-פּאַזישאַנד וועב זייַטלעך.

Rethinking ווי איר בויען אַ בלאַט

ווען איר בויען אַ פּלאַץ ניצן טישן, איר האָבן צו טראַכטן אין אַ טאַבלאַר פֿאָרמאַט. אין אנדערע ווערטער איר'רע טראכטן אין טערמינען פון סעלז און ראָוז און שפאלטן. דיין וועב זייַטלעך וועט פאַרטראַכטן דעם צוגאַנג. ווען איר מאַך צו אַ קסס פּאַזישאַנינג פּלאַן, איר וועט אָנהייבן טראכטן פון דיין בלעטער אין טערמינען פון די אינהאַלט, ווייַל די צופרידן קענען זיין ערגעשטעלט ערגעץ איר וואָלט ווי אין די אויסלייג-אפילו לייערד אויף שפּיץ פון אנדערע אינהאַלט.

פאַרשידענע וועבסיטעס האָבן פאַרשידענע סטראַקטשערז. צו בויען אַ עפעקטיוו בלאַט, אָפּשאַצן די סטרוקטור פון קיין געגעבן בלאַט איידער איר צולייגן צופרידן צו עס. אַ בייַשפּיל בלאַט קען אַרייַננעמען פינף בוילעט סעקשאַנז:

1. כעדער . היים צו די פאָן אַדווערטייזמאַנט, די פּלאַץ נאָמען, נאַוויגאַציע לינקס, אַן אַרטיקל טיטל און ווי אַ ביסל אנדערע זאכן.
2. רעכט זייַל . דאָס איז די רעכט זייַט פון די בלאַט מיט די זוכן קעסטל, אַדס, ווידעא באָקסעס, און שאַפּינג געביטן.
3. אינהאַלט . דער טעקסט פון אַן אַרטיקל, בלאָג פּאָסטן אָדער שאַפּינג קאַרט-די פלייש-און-פּאַטייטאָוז פון די בלאַט.
4. ינלינע אַדס . די ינלענדיש ינלענדיש ין דער אינהאַלט.
5. פוטער . די דנאָ נאַוויגאַציע, מחבר אינפֿאָרמאַציע, דרוקרעכט אינפֿאָרמאַציע, נידעריקער פאָן אַדס, און פֿאַרבונדענע פֿאַרבינדונגען.

אויב איר שטעלן די פינף יסודות אין אַ טיש, נוצן די HTML5 אָפּטיילונג קיילע צו באַשטימען די פאַרשידענע פּאָרשאַנז פון די אינהאַלט, און דעמאָלט ניצן CSS פּאַזישאַנינג צו שטעלן די אינהאַלט עלעמענטן אויף דעם בלאַט.

ידענטיפיצירן דיין אינהאַלט סעקשאַנז

נאָך איר'ווע דיפיינד די פאַרשידענע אינהאַלט געביטן פון דיין פּלאַץ, איר דאַרפֿן צו שרייַבן זיי אין דיין HTML. בשעת איר קענען, בכלל, שטעלן דיין סעקשאַנז אין קיין סדר, עס ס אַ גוט געדאַנק צו שטעלן די מערסט וויכטיק טיילן פון דיין בלאַט ערשטער. דעם צוגאַנג וועט העלפן מיט זוכן מאָטאָר אַפּטאַמאַזיישאַן, ווי געזונט.

צו באַווייזן פּאַזישאַנינג, ענוויסיאָן אַ בלאַט מיט דרייַ שפאלטן אָבער קיין כעדער אָדער פוטער. איר קענען נוצן פּאַזישאַנינג צו מאַכן קיין טיפּ פון אויסלייג איר ווי.

פֿאַר אַ דרייַ-זייַל אויסלייג, דעפינירן דרייַ סעקשאַנז: לינקס זייַל, רעכט זייַל, און צופרידן.

די סעקשאַנז וועט זיין ינישיייטיד ניצן די אַרטיקל עלעמענט פֿאַר דער אינהאַלט און צוויי אָפּטיילונג עלעמענטן פֿאַר די צוויי שפאלטן. אַלץ וועט אויך האָבן אַן אַטריביוט יידענטאַפייינג עס. ווען איר נוצן די שייַן אַטריביוט, איר מוזן באַצאָלן אַ יינציק נאָמען פֿאַר יעדער שייַן.

שטעלע די אינהאַלט

ניצן קסס, באַשטימען די שטעלע פֿאַר דיין יד'ד עלעמענטן. קראָם דיין שטעלע אינפֿאָרמאַציע אין אַ נוסח רופן ווי דאָס:

#content {

}

אינהאַלט ין די יסודות וועט נעמען אַרויף ווי פיל פּלאַץ ווי עס קענען, ניימלי 100 פּראָצענט פון די ברייט פון די קראַנט אָרט אָדער די בלאַט. צו ווירקן דעם אָרט פון אַ אָפּטיילונג אָן פאָרסינג עס צו אַ פאַרפעסטיקט ברייט, טוישן די וואַטן אָדער די גרענעץ פּראָפּערטיעס.

פֿאַר דעם אויסלייג, שטעלן די צוויי שפאלטן צו פאַרפעסטיקט ברייט און דעמאָלט שטעלן זייער שטעלע אַבסאָלוט, אַזוי זיי וואָלט נישט זיין אַפעקטיד דורך ווו זיי זענען געפונען אין די HTML.

# לינקס-זייַל {
שטעלע: אַבסאָלוט;
לינקס: 0;
ברייט: 150 פּקס;
גרענעץ-לינקס: 10 פּקס;
גרענעץ-שפּיץ: 20 פּקס;
קאָליר: # 000000;
padding: 3px;
}
# רעכט-זייַל {
שטעלע: אַבסאָלוט;
לינקס: 80%;
שפּיץ: 20 פּקס;
ברייט: 140 פּקס;
padding-left: 10px;
ז-אינדעקס: 3;
קאָליר: # 000000;
padding: 3px;
}

דעריבער פֿאַר די אינהאַלט געגנט, שטעלן די מאַרדזשאַנז אויף די רעכט און לינקס אַזוי אַז די צופרידן וואָלט נישט אָוווערלאַפּ די צוויי אַרויס שפאלטן.

#content {
שפּיץ: 0 פּקס;
גרענעץ: 0 פּקס 25% 0 165 פּקס;
padding: 3px;
קאָליר: # 000000;
}

דעפינינג דיין בלאַט ניצן CSS אַנשטאָט פון אַ HTML טיש ריקווייערז אַ ביסל מער טעכניש בקיעס, אָבער די פּייאָף גייט פון מער פלעקסאַבאַל און אָפּרופיק דיזיינז און גרעסער יז אין מאכן סטראַקטשעראַל אַדזשאַסטמאַנץ צו דיין בלאַט שפּעטער.