Scribd
Upload
33 views

Webpage Layout

Webpage layout can use multiple columns, CSS positioning, normal flow, and nested flow. Normal flow displays elements in the order they appear in the code. Nested flow allows placing one element inside another using <div> tags. Elements can be positioned using top, bottom, left, and right properties along with position types like relative, absolute, and floats. Layers can be created using z-indexes with lower indexes appearing behind higher indexes.

Uploaded by

Vamsi Srinivasan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Webpage Layout

Webpage layout can use multiple columns, CSS positioning, normal flow, and nested flow. Normal flow displays elements in the order they appear in the code. Nested flow allows placing one element inside another using <div> tags. Elements can be positioned using top, bottom, left, and right properties along with position types like relative, absolute, and floats. Layers can be created using z-indexes with lower indexes appearing behind higher indexes.

Uploaded by

Vamsi Srinivasan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Webpage Layout

Multiple columns are created by using <div>


or <table> elements.
CSS are used to position elements
Normal Flow
In all examples, we have seen that the browser
displays elements in the order they are coded in
the Web page document
Nested Flow
It is possible to nest one element box within
another using the <div> tag.
Normal Flow
In this example the first div appears on the page then
The second appears under it. See divSimple.html example.
<body>
<div style = "border-color: red; border-width: 3px;
border-style: solid; height: 200px; width: 300px;
">
Here is a div with a border
</div>

<div style = "border-color: green; border-width:


3px; border-style: dotted; height: 50px; width:
150px; padding: 15px;">
Here is another div with a border
</div>

</body>
Nested Flow
In this example the first div appears on the page with the second
one nested INSIDE it. See divNested.html example.
<body>
<div style = "border-color: red; border-width: 3px;
border-style: solid; height: 200px; width: 300px;
">
Here is a div with a border
<!- This div is inside the other div -->
<div style = "border-color: green; border-width:
3px; border-style: dotted; height: 50px; width:
150px; padding: 15px;">
Here is another div with a border
</div>
</div>
</body>
Positioning
Elements can be positioned
top, bottom, left, and right properties.
properties will not work unless the position property is
set first.
They work differently depending on the positioning
method.
HTML elements are positioned static by default.
positioned according to the normal flow of the page.
Static positioned elements are not affected by the top,
bottom, left, and right properties.
Elements can also be positioned relative or
absolute
Relative Positioning
A relative positioned element is positioned relative
to its normal position.
<h2>This is a heading with no position</h2>
<h2 style=position:relative;left: 50px;>
This heading is moved left according to
its normal position
</h2>
<h2 style="position:relative;left:50px;">
This heading is moved right according to
its normal position
</h2>
Absolute Positioning
Absolutely positioned elements are
removed from the normal flow.
Relative to the first parent element with a
position other than static of just the <html>
block if no non-static parents exist.
The document and other elements behave
like the absolutely positioned element does
not exist.
Absolutely positioned elements can overlap
other elements.
Absolute Positioning Example
<h2>This is a heading with no position</
h2>
<h2 style="position:absolute;left:50px;
top:50px">
This heading is placed at position
50,50 even if it ends up overlapping
</h2>
<h2> This heading has no position</h2>
Floating an Element
An element can be pushed to the left
or right, allowing other elements to
wrap around it by using the float
property
float:left
float:right
float:none
Float is useful for images and
layouts
Floating Elements
A floated element will move as far to the left or right as
it can within its containing element.
If you place several floating elements after each other,
they will float next to each other if there is room.
The elements before the floating element will not be
affected.
The elements after the floating element will flow
around it.
If an image is floated to the right, a following text flows
around it, to the left
Layers
CSS lets us create and manipulate layers in a web page
using z-indexes lower z-indexes are displayed on a lower
layer
<style type="text/css">
div { font-family: Arial, Helvetica, sans-
serif;
position: relative; font-size: 48px;
}
div.toplayer { color: blue; }
div.bottomlayer { top: -50px; left: 5px; }
</style>
</head>
<body>
<div id="layer1" class="toplayer style="z-
index: 2; ">
COMP1000 </div>
<div id="layer2" class="bottomlayer style="z-
index: 1; ">
COMP1000 </div>

You might also like