יכול לעניין אתכם

מדריך CSS מספר 13 - איך להשתמש בPadding

מאת: בקלות טכני

מדריך CSS מספר 14 - איך להחביא ולהציג אובייקטים
מאת: בקלות טכני

מדריך CSS מספר 16 - איך למקם אובייקטים בדף
מאת: בקלות טכני

מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)
מאת: בקלות טכני

מדריך CSS מספר 18 - איך לעצב אלמנטי HTML עם מאפיינים ספציפיים
מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> עיצוב אתרים >> מדריך CSS מספר 15 - איך להשתמש בCSS float

מחשבים

מדריך CSS מספר 15 - איך להשתמש בCSS float

עקוב

23/08/2011 12:04:56
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

CSS float מאפשר לנו לקחת אלמנט כלשהו, להציב אותו בצד כלשהו במסך (ימין או שמאל) ולרכז סביבו את כל האלמנטים האחרים.

רמת קושי: מתקדמים

הוראות:

כאשר אנחנו מגדירים את כיוון הfloat של האלמנט (לדוגמא float:right), האלמנט ייצמד לצד הזה בצורה הכי קיצונית שיוכל.

לדוגמא:

<html>
<head>
<style type='text/css'>
img {float:left;}
</style>
</head>

<body>
<img src='rock.jpg' />
<p>Some cool Text in our paragraph.</br>
The text is to the right of the rock picture. This is because the image is defined as float:left.

</p>
</body>

</html>

Some cool Text in our paragraph.

The text is to the right of the rock picture. This is because the image is defined as float:left.

בדוגמא הגדרנו שהסלקטור יהיה img ומאפיין הCSS float יקבל את הערך left.
כלומר, כל תמונה שנשים בדף, תיצמד לשמאל ככל שתוכל.
שימו לב איך הטקסט שבא אח"כ יהיה מימין לתמונה.

אם נגדיר 2 תמונות וערך הCSS float יהיה left, הם יוצגו אחת ליד השניה בצורה מסודרת כל עוד יש מקום בחלון.
אם תקטינו את החלון, התמונה השניה תרד תחת הראשונה.

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

בכדי למנוע מאלמנטים "לצוף" ליד אובייקט מסוים נשתמש בclear עם הערך both.

נשתמש בדוגמא הקודמת ונגדיר את סלקטור פסקה עם clear.

<html>
<head>
<style type='text/css'>
img {float:left;}
p {clear:both;);
</style>
</head>

<body>
<img src='rock.jpg' />
<p>Some cool Text in our paragraph.</br>
The text is to the right of the rock picture. This is because the image is defined as float:left.

</p>
</body>

</html>

Some cool Text in our paragraph.

The text is to the right of the rock picture. This is because the image is defined as float:left.

כעת, כל אלמנט שיהיה לו את מאפיין הfloat לא יעמוד ליד
הפסקה והיא תרד מתחתיו (מכיוון שאלמנט הפסקה מגיע אחרי התמונה בHTML).

הוסף למועדפים שלחו לחבר הדפיסו את המדריך

ראיתם משהו שאהבתם? יש לכם שאלה? כתבו תגובה

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לעצב אתר בצורה יעילה.

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.

איך לבחור לוגו

מדריך HTML מספר 12 - מתוה דף אינטרנט ( layouts and div tags)

עוד מדריכים בנושא זה