Scribd
Upload
320 views

Advanced Layout and Positioning With Style Sheets03

This document discusses using CSS positioning attributes to create advanced web page layouts. It describes various CSS positioning attributes like position, left, top, z-index and their uses. It provides examples of positioning images and elements on a page with CSS. It also discusses converting an existing table-based webpage to use CSS positioning for layout, including recreating a menu bar section with positioned div blocks and images.

Uploaded by

ammu_2013
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
320 views

Advanced Layout and Positioning With Style Sheets03

This document discusses using CSS positioning attributes to create advanced web page layouts. It describes various CSS positioning attributes like position, left, top, z-index and their uses. It provides examples of positioning images and elements on a page with CSS. It also discusses converting an existing table-based webpage to use CSS positioning for layout, including recreating a menu bar section with positioned div blocks and images.

Uploaded by

ammu_2013
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 13

Advanced Layout and Positioning with Style Sheets

CSS positioning attributes


Positioning images and other elements
Creating page columns and using html Tables and CSS positioning together
Converting an Existing Table Based Web Page
Advanced Layout and Positioning with Style Sheets
CSS positioning attributes

Attribute Description
Position Determines whether element is positioned
explicitly or relative to the natural flow of web
page document.
Left Position of the left side of the rectangular
area enclosing the element.
Top Position of the left side of the rectangular
area enclosing the element.
Width Width of the rectangular area enclosing the
element.
Height Width of the rectangular area enclosing the
element.
Clip The clipping shape and dimensions used to
control what portion of the element displays.
Overflow The portion of the element contents that
exceeds the bounds of the rectangular area
enclosing the element.
Advanced Layout and Positioning with Style Sheets

Attribute Description
Z-index The stacking order of the element if two or more
elements are stacked on top of each other.
Visibility Whether element is visible.
Positioning images and other elements
Images have some positioning capability, with the hspace and vspace IMG
attributes, and can be aligned with the align attribute.
One technique web developers did not have before IE 4.0 is the ability to
layer text and other html elements on images, or to layer images
themselves.
Also, developers could not exactly position images or any other element.
CSS positioning changes all of this.
With css, the position attribute is set to a value of absolute, which means
that the element is positioned exactly, regardless of how any other
element is positioned.



Positioning images and other elements
Using CSS positioning to position three images
<html><head><style type=text/css>
Img { position: absolute; width:90;height:90; top 100}
#one { left:100}
#two { left:200 }
#three {left:300}
</style>
</head>
<body>
<img src=red.jpg id=one>
<img src=yellow.jpg id=two>
<img src=green.jpg id=three>
</body> </html>



Positioning images and other elements
Using DIV blocks to position images
<html><head>
<style type=text/css>
DIV { position: absolute; top: 100}
#one { left:100}
#two { left:200 }
#three {left:300}
</style>
</head>
<body>
<div id=one> <img src=red.jpg> </div>
<div id=two> <img src=yellow.jpg > </div>
<div id=three> <img src=green.jpg> </div>
</body> </html>



Positioning images and other elements
You can layer html elements, including placing text above images.
One key to for using layers is to set the z-index CSS positioning attribute
to a higher integer for the element you want to display at the top of the
stack.
Layering text and images with z-index ordering
<html><head><style type=text/css>
Body { font-family: arial; color:white; font-weight: bold}
Div { position: absolute }
#one { top:25; left:20; z-index:1 }
#two { top:125; left:20; z-index:1 }
#three { top:225; left:20; z-index:1 }
</style> </head>
<body>
<div style=top:50; left:40; z-index:2>
Product <br> One </div>
<div style=top:150; left:40; z-index:2>
Product <br> two </div>




Positioning images and other elements
<div style=top:250; left:40; z-index:2>
Product <br> Three </div>

<div id=one> <img src=red.jpg width=90 height=90> </div>
<div id=two> <img src=yellow.jpg width=90 height=90> </div>
<div id=three> <img src=green.jpg width=90 height=90> </div>

</body>
</html>



Creating page columns and using html Tables and CSS positioning
together

Web developers use html tables to create columnar contents.
CSS positioning can be used to create multi column web page content.
In addition html tables and CSS positioning can be used for one web page.
Converting an Existing Table Based Web Page


Using a table to control page layout isnt a bad approach, but there are
limitations.
First with the menu bar, you should layer the menu bar text on the image
itself, rather than having to set each text block below the image.
A second limitation is that because the text and images alternate, the
images tend to have a large space surrounding them
To convert the page using CSS positioning, the first step is to recreate the
menu bar at the top of the page.
A new document is started.
Div blocks were used, which supports positioning directly with images.
Converting an Existing Table Based Web Page


Menu bar section code:
<style type=text/css>
DIV { position: absolute; font-size: 10pt;font-family:arial;}
#logo ( position:absolute; top: 50 px; left: 50px; z-index: 5; width:105}
#image1 { position:absolute; top:10px; left:185 }
#image2 { position:absolute; top:10px; left:295 }
#image3 { position:absolute; top:10px; left:395 }
#image4 { position:absolute; top:10px; left:500 }
#title1 {position:absolute; top:20px; left:200; z-index:5; height: 20px;
width: 80px }
#title2 {position:absolute; top:20px; left:300; z-index:5; height: 20px;
width: 80px }
#title3 {position:absolute; top:20px; left:410; z-index:5; height: 20px;
width: 80px }
#title4 {position:absolute; top:20px; left:510; z-index:5; height: 20px;
width: 80px }
</style>




Converting an Existing Table Based Web Page


</head>
<body>
<!-- set menu images
<div id=logo> <img src=logi.gif width=104 height=153> </div>
<div id=image1> <a href=http://www.yasd.com>
<img src=menu.jpg border=0 width=101 height=153> </a> </div>
<div id=image2> <a href=http://www.yasd.com/samples>
<img src=sample.jpg border=0 width=101 height=153> </a> </div>
<div id=image3> <a href=http://www.yasd.com/samples/images>
<img src=image.jpg border=0 width=101 height=153> </a> </div>
<div id=image4> <a href=http://www.yasd.com/samples/images/photomo>
<img src=photo.jpg border=0 width=101 height=153> </a> </div>



Converting an Existing Table Based Web Page


<!-- set menu Titles -- >
<div id =title1> <a href=http://www.yasd.com> Main </a> </div>
.
.
.

You might also like