Arquivos para a data: outubro 28th, 2009

Exemplo com posicionamento (aula 28/10)

28 outubro, 2009 (20:54) | Sem categoria | Por: admin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#im2 {
position: relative;
left: 300px;
top: 30px;
}
#im3 {
position: absolute;
left: 0px;
top: 0px;
}
#im4 {
position: fixed;
right: 100px;
bottom: 10px;
}
</style>
</head>
<body>
<h1>Posicionamento Estático</h1>
<img id="im1" src="http://www.pucpr.br/gerenciador/imagens_noticias/6345_c.jpg">

<h1>Posicionamento Relativo</h1>
<img id="im2" src="http://www.pucpr.br/gerenciador/imagens_noticias/6326_c.bmp">

<h1>Posicionamento Absoluto</h1>
<img id="im3" src="http://www.pucpr.br/gerenciador/imagens_noticias/6310_c.jpg">

<h1>Posicionamento Fixo</h1>
<img id="im4" src="http://www.pucpr.br/images/banner_intercambio0.jpg">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo [...]

Sem comentário

Layout gerado na aula de 28/10

28 outubro, 2009 (20:41) | Sem categoria | Por: admin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#cabecalho {
background-color: red;
border: 1px solid black;
}
#lateral {
background-color: blue;
border: 1px solid black;
float: left;
width: 30%;
min-height: 200px;
}
#conteudo {
background-color: yellow;
border: 1px solid black;
float: right;
width: 68%;
min-height: 200px;
}
#rodape {
background-color: green;
border: 1px solid black;
clear: both;
}
#container {
width:  640px;
margin: 0 auto;
}
</style>

</head>
<body>
<div id="container">
<div id="cabecalho">
<h1>Site do Jamanta</h1>
</div>
<div id="lateral">
<ul>
<li>Home</li>
<li>…</li>
</ul>
</div>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing [...]

Sem comentário