Jump to content


Photo

Maquetar el sidebar con CSS3

Started by blonder413 , Jan 21 2012 05:05 PM

  • Please log in to reply
1 reply to this topic

#1 blonder413

blonder413

    Member

  • Miembros
  • PipPip
  • 12 posts

Posted 21 January 2012 - 05:05 PM

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 posts

Posted 27 January 2012 - 08:06 PM

la solución:

display: inline-block

  • 0
Back to 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.