width
height

                             px cm

                                     em
         auto




              ...
</style>
  </head>
  <body>
  <div id="contenido">
   <h1>P&aacute;gina con una columna</h1>
   <p> Lorem ipsum dolor sit ...
position: relative;

                                                           left                         right

      ...
div#columna_izquierda {
                 position: absolute;
                 left: 0;
                 top: 0;
          ...
purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus.
Maecenas erat. </p>
   <p>V...
<h1></h1>
                <div id="cabecera">


                                                                         b...
div#menu {position:absolute;    top:0;   left:0;   bottom:40px;
width:140px; background-color:#D2D1EF;}
                  ...
Upcoming SlideShare
Loading in …5
×

Diseño web, taller 6 maquetado

804 views
709 views

Published on

Maquetado web, capas, divisiones con CSS.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
804
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño web, taller 6 maquetado

  1. 1. 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; }
  2. 2. </style> </head> <body> <div id="contenido"> <h1>P&aacute;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
  3. 3. 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%; }
  4. 4. div#columna_izquierda { position: absolute; left: 0; top: 0; height: 100%; width: 200px; } div#columna_derecha { 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; } div#columna_izquierda { position: absolute; top:0; left: 0; height: 100%; width:20%; background-color:#FFE9D7; } div#columna_derecha { 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> <li><a href="#ap2">Apartado 2</a></li> <li><a href="#ap3">Apartado 3</a></li> </ul> </div> <div id="columna_derecha"> <h2> Columna fija a la derecha</h2> <h3 id="ap2"> Apartado 1</h3> <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> <h3 id="ap2">Apartado 2</h3> <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,
  5. 5. purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. 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> 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> <h3 id="ap3">Apartado 3</h3> <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> top: 0; top bottom
  6. 6. <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
  7. 7. 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;}

×