Diseño web, taller 6 maquetado

width
height

px cm

em
auto

margin: auto;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Una columna</title>
<style type="text/css">
body {
background-color:#C2C5E7;
margin: 0;
}
div#contenido {
width: 800px;
margin: auto;
border-left: #6699FF 2px solid;
border-right: #6699FF 2px solid;
background-color: #EDEEF8;
padding: 5px;
}

</style>
</head>
<body>
<div id="contenido">
<h1>Página con una columna</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In
eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo
congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien.
Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a,
sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent
vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>
<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar.
Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus
hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh.
</p>
<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis
tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed
sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo
sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor,
purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus.
Maecenas erat. </p>
</div>
</body>
</html>

overflow

visible

hidden
auto
scroll

position

static
relative

absolute

fixed

z-index
z-index
z-index

position: relative;

left right

right: 40px; left: -40px;

top
bottom

z-
index

position: absolute;

body

top
left right
bottom

top bottom
right lef position:absolute; witdth:60px;
height:60px
position:relative;

div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
}
div#columna_derecha {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
}

position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200px;
}
position: absolute;
right: 0;
left: 200px;
top: 0;
height: 100%;
}

overflow:auto;

html{overflow:hidden;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Columna sin scroll a la izquierda</title>
<style type="text/css">
html {
overflow: hidden;
}
position: absolute;
top:0; left: 0;
height: 100%;
width:20%;
background-color:#FFE9D7;
}
position: absolute;
top:0; right: 0;
height: 100%;
width: 80%;
overflow: auto;
background-color:#DDF2F9;
}
</style>
</head>
<body>
<div id="columna_izquierda">
<ul>
<li><a href="#ap1">Apartado 1</a></li>
</ul>
</div>
<div id="columna_derecha">
<h2> Columna fija a la derecha</h2>
<h3 id="ap2"> Apartado 1</h3>
</p>
<h3 id="ap2">Apartado 2</h3>

Maecenas erat. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue
quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit
pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis.
Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis
justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt
ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas
porttitor. Fusce ultrices nulla. </p>
</p>
<h3 id="ap3">Apartado 3</h3>
Maecenas erat. </p>
</div>
</body>
</html>

top: 0;

top bottom

<h1></h1>
<div id="cabecera">

body
div
menú
<h2>
texto
pie

<body>
<div id="cabecera">
<h1>...</h1>
</div> → cierre de "cabecera"
<div id="pagina">
<div id="menu">
<ul>...</ul>
</div> → cierre de "menu"
<div id="texto">
<h2>...</h2>
<h3>...</h3>
...
<p>...</p>
</div> → cierre de "texto"
<div id="pie">
<p>...</p>
</div> → cierre de "pie"
</div> → cierre de "pagina"
</body>

<style
type="text/css"></style>

div#cabecera {height: 50px;
background-color: #918CE3;}
body
h1 body margin:0; h1 {margin: 0;}

position:absolute;
top:50px bottom: 0
width:900px

margin-left:-450px
left:50%
div#pagina {position:absolute; top:50px; bottom:0; width:900px;
margin-left:-450px; left:50%; background-color:#FFFFCC;}
position:absolute

top:0 left:0
bottom:40px width:140px

div#menu {position:absolute; top:0; left:0; bottom:40px;
width:140px; background-color:#D2D1EF;}
right:0

width:760px
overflow:auto div#texto {position:absolute; top:0; right:0;
width:760px; bottom:40px; overflow:auto; }
position:absolute
bottom:0 left:0 width:100
height:40px;
div#pie { position:absolute; bottom:0; left:0; width:100%; height:40px;
background-color:#A9A8CF; }

html {overflow:hidden;}

Diseño web, taller 6 maquetado

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Jeckson Loza

Mehr von Jeckson Loza (19)

Diseño web, taller 6 maquetado