Ir al contenido


Foto

Maquetar el sidebar con CSS3

Comenzado por blonder413 , ene 21 2012 05:05

  • Por favor identifícate para responder
1 respuesta en este tema

#1 blonder413

blonder413

    Member

  • Miembros
  • PipPip
  • 12 mensajes

Escrito 21 enero 2012 - 05:05

Hola, un saludo. Resulta que estoy rediseñando mi web usando html5 y css3 (de paso aprender mejor estos dos temas) pero resulta que no he podido ubicar el sidebar al lado derecho, cuando lo hago subir sube también el footer y/o el fondo se quita, ¿qué estoy haciendo mal? de antemano gracias.



delphi
  1. <!DOCTYPE  html>
  2. <html lang="es">
  3. 	<head>
  4. 		<meta charset="UTF-8" />
  5. 		<title>Jonathan Morales - Aprendizaje Din&aacute;mico</title>
  6. 		<!-- <meta http-equiv="refresh" content="1" /> -->
  7. 		<meta name="description" content="" />
  8. 		<link href="css/style.css" rel="stylesheet" />
  9. 	</head>
  10. 	<body>
  11. 		<section id="wrapper">
  12. 				<div itemscope itemtype="http://www.data-vocabulary.org/Person/">
  13. 			<section id="contenido">
  14. 				<header>
  15. 					<h1><span itemprop="name">Jonathan Morales Salazar</span> - <span id="spantitulo">Aprendizaje din&aacute;mico</span></h1>
  16. 				</header>
  17. 				</div>
  18. 				<nav>
  19. 					<ul>
  20. 						<a href="#">
  21. 							<li><span itemprop="url">Home</span></li>
  22. 						</a>
  23. 						<a href="#">
  24. 							<li>Video Tutoriales</li>
  25. 						</a>
  26. 						<a href="#">
  27. 							<li>Documentos</li>
  28. 						</a>
  29. 						<a href="#">
  30. 							<li>C&oacute;digos</li>
  31. 						</a>
  32. 						<a href="#">
  33. 							<li>Acerca</li>
  34. 						</a>
  35. 					</ul>
  36. 				</nav>
  37. 				<section id="separador"></section>
  38. 				<section>
  39. 					<article>
  40. 						<h2><a href="#">Titulo Post</a></h2>
  41. 						<div id="fecha"><time datetime="2012-01-21">Sábado 21 de Enero de 2012</time></div><div id="author">Publicado por <strong>Jonathan Morales</strong></div>
  42. 						<p>
  43. 							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dolor nisl, id vulputate elit. Fusce tristique turpis vel purus pharetra at accumsan lacus ultricies. Nullam bibendum felis non neque convallis eu pellentesque felis semper. Mauris ipsum diam, ornare feugiat sagittis facilisis, sodales sit amet elit. Fusce blandit ultrices velit. Quisque metus diam, elementum vel vehicula eu, posuere vitae lectus. Donec lacinia posuere mi, a sollicitudin ante bibendum ut. Ut interdum enim a urna pharetra sit amet commodo ipsum tempor. Nullam facilisis convallis neque, sit amet egestas diam pretium ut.
  44. 						</p>
  45. 					</article>
  46. 				</section>	<!-- section article -->
  47. 				<aside id="sidebar">
  48. 					<h2>Categor&iacute;as</h2>
  49. 					<ul>
  50. 						<li><a href="#">Categor&iacute;a 1</a></li>
  51. 						<li><a href="#">Categor&iacute;a 2</a></li>
  52. 						<li><a href="#">Categor&iacute;a 3</a></li>
  53. 						<li><a href="#">Categor&iacute;a 4</a></li>
  54. 						<li><a href="#">Categor&iacute;a 5</a></li>
  55. 					</ul>
  56. 				</aside>
  57. 				</section><!-- fin contenido -->
  58. 				<footer>
  59. 					<h5>&copy; Desarrollado por <a href="#">Jonathan Morales Salazar</a></h5>
  60. 				</footer>
  61. 			</div>
  62. 	</section>	<!-- section wrapper -->
  63. 	</body>
  64. </html>





delphi
  1. /*
  2.  * Desarrollado por
  3.  * Jonathan Morales Salazar
  4.  * [url=http://www.blonder413.com]www.blonder413.com[/url]
  5.  */
  6.  
  7. article{
  8.     border: 1px solid #DDD;
  9.     border-radius: 20px 20px 20px 20px;
  10.     -moz-border-radius: 20px 20px 20px 20px;
  11.     -o-border-radius: 20px 20px 20px 20px;
  12.     -webkit-border-radius: 20px 20px 20px 20px;
  13.     box-shadow: 6px 6px 4px #BCBCCA;
  14.     -moz-box-shadow: 6px 6px 4px #BCBCCA;
  15.     -o-box-shadow: 6px 6px 4px #BCBCCA;
  16.     -webkit-box-shadow: 6px 6px 4px #BCBCCA;
  17.     margin: 5px 0px 0px 0px;
  18.     opacity:0.7;
  19.     padding: 0px 15px 10px 15px;
  20.     width: 60%;
  21. }
  22.  
  23. article:hover{
  24.     box-shadow: 0px 0px 10px #668;
  25.     opacity:1;
  26. }
  27.  
  28. body{
  29.     background-color: #EEF;
  30.     margin:0px;
  31. }
  32.  
  33. footer{
  34.    margin:auto;
  35.    text-align: center;
  36. }
  37.  
  38. h1{
  39.     letter-spacing:1.5px;
  40.     text-align: center;
  41.     text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
  42. }
  43.  
  44. h2 a{
  45.     color:#121257;
  46.     text-decoration:none;
  47. }
  48.  
  49. nav{
  50.     display:inline;
  51.     padding: 0px 0px 10px 0px;
  52. }
  53.  
  54. nav ul{
  55.     display:inline;
  56.     margin-left:-40px;
  57. }
  58. nav ul li{
  59.     border-radius:10px;
  60.     -moz-border-radius:10px;
  61.     -o-border-radius:10px;
  62.     -webkit-border-radius:10px;
  63.     display:inline;
  64.     list-style: none;
  65.     padding:5px 41px 5px 41px;
  66.     width: 138px;
  67. }
  68.  
  69. nav ul li:hover{
  70.     background-color: #DEDEEE;
  71. }
  72.  
  73. nav ul a{
  74.     color:#121257;
  75.     font-weight:bold;
  76.     text-decoration: none;
  77. }
  78.  
  79. p{
  80.     text-align: justify;
  81. }
  82.  
  83. #author{
  84.     font-style:italic;
  85.     padding: 0px 0px 5px 0px;
  86.     text-align:right;
  87. }
  88.  
  89. #contenido{
  90.     width:100%;
  91. }
  92.  
  93. #fecha{
  94.     float:left;
  95.     font-style:italic;
  96.     padding: 0px 0px 5px 0px;
  97.     text-align:left;
  98. }
  99.  
  100. #separador{
  101.     height: 10px;
  102. }
  103.  
  104. #sidebar{
  105.     border: 1px solid #DDD;
  106.     border-radius: 20px;
  107.     box-shadow: 7px 7px 5px #CCC;
  108.     padding: 0px 0px 5px 5px;
  109.     width: 220px;
  110. }
  111.  
  112. #sidebar ul{
  113.     margin-left:-40px;
  114. }
  115.  
  116. #sidebar ul li{
  117.     list-style:none;
  118. }
  119.  
  120. #sidebar ul li a{
  121.     text-decoration:none;
  122. }
  123.  
  124. #spantitulo{
  125.     font-size: 11px;
  126.     font-style:italic;
  127. }
  128. #wrapper{
  129.     background-color: #FFF;
  130.     border: 1px solid #DDD;
  131.     border-radius: 20px;
  132.     box-shadow: 7px 7px 5px #CCC;
  133.     margin: 5px auto 0px auto;
  134.     padding: 0px 15px 0px 15px;
  135.     position:relative;
  136. 	width: 885px;
  137. }


  • 0

#2 blonder413

blonder413

    Member

  • Miembros
  • PipPip
  • 12 mensajes

Escrito 27 enero 2012 - 08:06

la solución:

display: inline-block

  • 0
Volver a CSS (Cascading Style Sheet)


  1. Comunidad Delphiaccess
  2. → PROGRAMACIÓN
  3. → Otros Lenguajes (.NET, Web, C, C++, Java, ASM)
  4. → CSS (Cascading Style Sheet)
  5. Privacy Policy
IP.Board spam blocked by CleanTalk.