Ir al contenido



Foto

[SOLUCIONADO]ayuda con margenes


  • Por favor identifícate para responder
2 respuestas en este tema

#1 novato

novato

    Member

  • Miembros
  • PipPip
  • 35 mensajes

Escrito 01 enero 2014 - 08:11

ok tengo un div principal con un fondo otro div dentro

cuando yo ago esto , ahi todo bien
margin: 10px 0px;
Imagen Enviada

pero al yo acer esto el margen derecho se mueve acia la derecha y no hace como aparece en la imagen de arriba q muestra los 2 margenes
margin: 0px 10px;
Imagen Enviada

me gustaria q quedara de esta manera
Imagen Enviada


aqui el codigo html


delphi
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width"/>
  6. <link href="/b/sty.css"  rel="stylesheet" />
  7. <title>Documento sin título</title>
  8. </head>
  9. <body>
  10. <section id="contenedor">
  11. <header>
  12.     <div class="encabezado">
  13.       <h1>Cosmetic<span>Fashion</span></h1>
  14.     </div><!--FIN ENCABEZADO -->
  15. </header>
  16. <nav>
  17. </nav>
  18.  
  19. <section>
  20. <section id="contenedor_contenido">
  21.   <article class="postt1">
  22.     <p>
  23.       Html 5 es la nueva versión del lenguaje de marcas HTML (HyperText Markup Language), el núcleo de la Web. (Todavia no es definitivo). Es propuesto como siguiente estandar sucesor de HTML 4.01 y de XHTML 1.0 es una forma de reducir la cantidad de plugins (agregados) propietarios para aplicaciones y tecnologias RIA (Rich Internet Applications) tales como Adobe
  24.     </p>
  25.   </article>
  26.  
  27.   <article class="postt2">
  28.     <p>
  29.       Html 5 es la nueva versión del lenguaje de marcas HTML (HyperText Markup Language), el núcleo de la Web. (Todavia no es definitivo). Es propuesto como siguiente estandar sucesor de HTML 4.01 y de XHTML 1.0 es una forma de reducir la cantidad de plugins (agregados) propietarios para aplicaciones y tecnologias RIA (Rich Internet Applications) tales como Adobe
  30.     </p>
  31.   </article>
  32. </section> <!--FIN SECTION CONTENEDOR_CONTENIDO-->
  33. </section> <!--FIN SECTION POST Y SIDEBAR-->
  34.  
  35. <!--</section> -FIN CONTENEDOR-contenido -->
  36. </section> <!--FIN CONTENEDOR-->
  37. </body>
  38. </html>




aqui esta el codigo css


delphi
  1. *{margin:0; padding:0; border:0;}
  2.  
  3. article
  4. {
  5. /*float: left; */
  6. float: right;
  7. width: 50%;
  8. }
  9.  
  10. body
  11. {
  12. background: #C3E5F9;
  13. color: white;
  14. font-size: 16px;
  15. font-family:arial;
  16. text-shadow: 1px 1px 0 red;
  17. }
  18.  
  19. #contenedor
  20. {
  21. background-color: #FFF;
  22. box-shadow:  0px 0px 15px #575757;
  23. margin: 0 auto;
  24. /*margin-bottom: 10px;*/
  25. overflow:hidden;
  26. width: 1000px;
  27. }
  28.  
  29. .container
  30. {
  31. margin: 0 auto;
  32. width: 100%;
  33. }
  34.  
  35. .encabezado
  36. {
  37.   background-image:url(/b/images/color.png);
  38.   background-repeat:repeat-x;
  39.   height:50px;
  40.   margin-bottom:5px;
  41.   width:100%;
  42. }
  43.  
  44. section{
  45. background: #12A89D;
  46. /*margin: 0 auto;*/
  47. overflow: hidden;
  48. /*padding: 0 10px;*/
  49. width:100%;
  50. }
  51.  
  52. #contenedor_contenido
  53. {
  54. /*margin: 10px 0px;*/
  55.  
  56. padding: 0px 10px;
  57.  
  58.  
  59. }
  60.  
  61. .postt1{
  62. background: #B30F2A;
  63. }
  64.  
  65. .postt2{
  66.   background: #1C4583;
  67. }
  68.  
  69. @media screen and (max-width:1000px){
  70. #contenedor ,img{
  71. width:100%;
  72. }
  73.  
  74. }
  75.  
  76. @media screen and (max-width:1000px){
  77. section{
  78. /*margin: 0px;
  79. padding: 0px;*/
  80. width:100%;
  81. }
  82.  
  83. }
  84.  
  85. @media screen and (max-width:700px){
  86. article{
  87. /*margin: 0px;
  88. padding: 0px;*/
  89. width:100%;
  90. }
  91.  
  92. }


  • 0

#2 elporfirio

elporfirio

    Advanced Member

  • Miembros
  • PipPipPip
  • 182 mensajes
  • LocationMy House @ México

Escrito 02 enero 2014 - 04:54

Okay tu error es no contemplar el tamaño de lo margenes, veamos un ejemplo sencillo ;)


Asi es el total de tu baner

<----------  width = 100px ------------>

Si tu agregas un boder:
<--border: 2px --><----------  width = 100px ------------><--border: 2px -->

el valor total pasa de ser 100px a ser 104px  //// <----------  width = 104px ------------>

si agregas un margin y border:
<--margin: 10px --><--border: 2px --><----------  width = 100px ------------><--border: 2px --><--margin: 10px -->

el valor total pasa de ser 100px a ser 124px  //// <----------  width = 124px ------------>



Suponiendo lo anterior, hay que reducir el width de 100px y restarle los 24 sobrantes, asi ya tendriamos la medida que buscamos:

<--margin: 10px --><--border: 2px --><----------  width = 76px ------------><--border: 2px --><--margin: 10px -->

Los valores de margin, border y el width (o height en su caso) siempre se suman, por lo que debes calcularlos siempre para obtener al final la medida deseada.  //// <----------  width = 100px ------------>




en cuanto a tu codigo, manejas demasiados margin 0 auto, asi como demasiadas secciones de las cuales ya perdiste el control:

el padding es del border para dentro
el margin es del border para fuera

aqui un ejemplo:

http://jsfiddle.net/elporfirio/nFwFZ/


  • 0

#3 novato

novato

    Member

  • Miembros
  • PipPip
  • 35 mensajes

Escrito 02 enero 2014 - 09:59

AKI ESTA SOLUCIONADO AQUI LE DEJO EL CODIGO DE COMO LO QERIA



delphi
  1. *{margin:0; padding:0; border:0;}
  2. html, body, div, span, applet, object, iframe,
  3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4. a, abbr, acronym, address, big, cite, code,
  5. del, dfn, em, font, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var,
  7. b, u, i, center,
  8. dl, dt, dd, ol, ul, li,
  9. fieldset, form, label, legend,
  10. table, caption, tbody, tfoot, thead, tr, th, td {
  11. margin: 0;
  12. padding: 0;
  13. border: 0;
  14. outline: 0;
  15. font-size: 100%;
  16. vertical-align: ;
  17. background: transparent;
  18. }
  19. body {
  20. line-height: 1;
  21. }
  22. ol, ul {
  23. list-style: none;
  24. }
  25. blockquote, q {
  26. quotes: none;
  27. }
  28. blockquote:before, blockquote:after,
  29. q:before, q:after {
  30. content: '';
  31. content: none;
  32. }
  33.  
  34. /* remember to define focus styles! */
  35. :focus {
  36. outline: 0;
  37. }
  38.  
  39. /* remember to highlight inserts somehow! */
  40. ins {
  41. text-decoration: none;
  42. }
  43. del {
  44. text-decoration: line-through;
  45. }
  46.  
  47. /* tables still need 'cellspacing="0"' in the markup */
  48. table {
  49. border-collapse: collapse;
  50. border-spacing: 0;
  51. }
  52.  
  53. a
  54. {
  55. color: #FFFFFF;
  56. font-family:BebasNeue;
  57. font-size: 22px;
  58.     height: 51px;
  59.   /*  text-shadow: 1px 2px black;*/
  60. text-decoration:none;
  61. }
  62.  
  63. a:hover
  64. {
  65. text-decoration:underline;
  66. }
  67.  
  68. @font-face
  69. {
  70. font-family:BebasNeue;
  71. font-style:normal;
  72. font-height:normal;
  73. src: url(/a/images/BebasNeue.otf);
  74. }
  75.  
  76.  
  77. /***************************************************/
  78. /*---  ---*/
  79.  
  80. /*--- MAQUETACION WRAPPER ---*/
  81. #wrapper
  82. {
  83. background: #FCFCFC;
  84. box-shadow:  0px 0px 5px #575757;
  85. margin: 0 auto;
  86. overflow: hidden;
  87. padding: 20px;
  88. width:960px;
  89. }
  90. /*--- FIN WRAPPER  ---*/
  91.  
  92. /*--- MENU 1 ---*/
  93. #menu1
  94. {
  95. background: #06AFE4;
  96. margin:0 auto;
  97. max-width: 1000px;
  98. padding: 5px 0;
  99. }
  100.  
  101. #menu1 ul li
  102. {
  103. display: inline-block;
  104. padding: 10px;
  105. margin: 0 5px;
  106. }
  107. /*--- FIN MENU 1 ---*/
  108.  
  109.  
  110. #banner
  111. {
  112. background: right: ;
  113. height:300px;
  114. width:100%;
  115.  
  116. }
  117.  
  118.  
  119. .postt1{
  120. background: #B30F2A;
  121. }
  122.  
  123. .postt2{
  124.   background: #1C4583;
  125. }





delphi
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width"/>
  6. <link href="/a/sty.css"  rel="stylesheet" />
  7. <script type="text/javascript" src="/b/js/jquery.min.js"></script>
  8. <script type="text/javascript" src="/b/js/jquery.panelgallery-2.0.0.js"></script>
  9. <script type="text/javascript">
  10. $(function(){
  11.   $('#container').panelGallery();
  12. });
  13. </script>
  14. <title>Documento sin título</title>
  15. </head>
  16.  
  17. <body>
  18. <!-- --><!-- INICIO MENU 1 -->
  19.   <nav id="menu1">
  20.     <ul >
  21.       <li>
  22.         <a href="#">Inicio</a>
  23.       </li>
  24.       <li>
  25.         <a href="#">Quienes Somos</a>
  26.       </li>
  27.       <li>
  28.         <a href="#">Contactenos</a>
  29.       </li>
  30.       <li>
  31.         <a href="#"></a>
  32.       </li>
  33.       <li>
  34.         <a href="#"></a>
  35.       </li>
  36.   </ul>
  37.   <!--https://www.facebook.com/fashioncosmeticnicaragua?fref=ts-->
  38.   <div class="redsoial">
  39.   <a href=""><img src="/a/images/facebook_color.png"  width="40" hieght="40"/></a>
  40.   <a href="#"><img src="/a/images/twitter_color.png" width="40" hieght="40"/></a>
  41.   <a href="#"><img src="/a/images/yahoo_color.png"/></a>
  42.   </ul>
  43.   </nav>
  44. <!-- FIN MENU 1 -->
  45.  
  46. <!-- INICION WRAPPER -->
  47. <section id="wrapper">
  48.  
  49.  
  50.  
  51. <!-- INICIO BANNER -->
  52. <section id="banner">
  53.  
  54. </SECtion>
  55. <!-- FIN BANNER -->
  56.  
  57. <!-- INICIO MENU -->
  58. <section id="menu">
  59.  
  60. </section>
  61. <!-- FIN MENU -->
  62.  
  63.  
  64. </section> <!--FIN SECTION WRAPPER-->
  65. </body>
  66. </html>


  • 0