Belajar CSS : Floating & Positioning

posted in: Tutorial Pemrograman | 0

Normal Flow

Pada model layout CSS, elemen teks mengalir dari atas ke bawah, sesuai dengan urutan pada sumbernya. Sedangkan elemen blok akan tampil secara bertingkat antara satu dengan yang lainnya. Kemudian elemen inline, seperti teks, akan mengisi elemen blok.

css floating

Floating

Sederhananya, property float akan memindahkan elemen sejauh mungkinn ke kiri atau ke kanan, dengan membungkus isi yang ada di dalamnya.

Floats adalah salah satu tool primer dalam CSS web design, untuk membuat multiple layout, navigasi, dan layout yang mirip table.

css floating1 css floating3 css floating4

Floating block elements

Floating block elements

Clearing floated elements

Setelah membuat sebuah elemen menjadi Float, The last thingyou need to know about floated elements is how to turn the text wrapping offand get back to layout as usual. This is done by clearingthe element that you want to start below the float.

Clearing floated elements

Clearing floated elements

 

Positioning Basics

CSS provides several methods for positioning elements on the page. They can

be positioned relative to where they would normally appear in the flow, or

removed from the flow altogether and placed at a particular spot on the page.

You can also position an element relative to the browser window (technically

known as the viewportin the CSS Recommendations) and it will stay put

while the rest of the page scrolls.

Types of positioning

position

Values:                  static    |              relative |              absolute              |              fixed      |              inherit

Default:                static

Applies to: all     elements

Inherits: no

The positionproperty indicates that anelement is to be postioned, and

specifies which positioning method should be used. I’ll introduce each key-word value briefly here, then we’ll take a more detailed look at each method

in the remainder of this chapter.

static

This is thenormal positioning scheme in which elements are positioned

as they occur in the normal document flow.

relative

Relative positioningmoves the box relative to its original position in the

flow. The distinctive behavior of relative positioning is that the space the

element would have occupied in the normal flow is preserved.

belajar css-relative

 

absolute

Absolutely positionedelements are removed from the document flow

entirely and positioned relative to a containing element (we’ll talk more

about this later). Unlike relatively positioned elements, the space they

would have occupied is closed up. In fact, they have no influence at all on

the layout of surrounding elements.

belajar css-absolut belajar css-absolut1

 

fixed

The distinguishing characteristic of fixed positioningis that the element

stays in one position in the window even when the document scrolls.

Fixed elements are removed from the document flow and positioned

relative to the browser window (or other viewport). rather than another

element in the document.

belajar css-fixed

Specifying position

Once you’ve established the positioning method, the actual position is speci-fied with four offsetproperties.

top, right, bottom, left

Values: length   measurement   |             percentage         |              auto       |              inherit

Default:                auto

Applies to: Positioned    elements             (where position                value     is             relative,               absolute,

or            fixed)

Inherits: no

The values provided for each of the offset properties defines the distance the

element should be moved awayfrom that respective edge. For example, the

value of topdefines the distance the top outer edge of the positioned ele-ment should be offset from the top edge of the browser or other containing

element. A positive value for topresults in the element box moving downby

that amount. Similarly, a positive value for leftwould move the positioned

element to the right (toward the center of the containing block) by that

amount.

Leave a Reply