Detectado javascript desactivado

Tienes el javascript desactivado en este momento. Muchas funciones podrían no funcionar. Por favor reactiva el javascript para obtener una funcionalidad completa.

[SOLUCIONADO]ayuda con margenes

Comenzado por novato , ene 01 2014 08:11

Por favor identifícate para responder

2 respuestas en este tema

#1 novato

Member

Miembros
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

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width"/>
<link href="/b/sty.css"  rel="stylesheet" />
<title>Documento sin título</title>
</head>
 <body>
<section id="contenedor">
<header>
    <div class="encabezado">
      <h1>Cosmetic<span>Fashion</span></h1>
    </div><!--FIN ENCABEZADO -->
</header>
<nav>
</nav>
 
<section>
<section id="contenedor_contenido">
  <article class="postt1">
    <p>
       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
    </p>
  </article>
 
  <article class="postt2">
    <p>
      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
    </p>
  </article>
</section> <!--FIN SECTION CONTENEDOR_CONTENIDO-->
</section> <!--FIN SECTION POST Y SIDEBAR-->
 
<!--</section> -FIN CONTENEDOR-contenido -->
</section> <!--FIN CONTENEDOR-->
</body>
</html>

aqui esta el codigo css

delphi

*{margin:0; padding:0; border:0;}
 
article
{
	/*float: left; */
	float: right;
	width: 50%;
} 
 
body
{
	background: #C3E5F9;
	color: white;
	font-size: 16px;
	font-family:arial;
	text-shadow: 1px 1px 0 red;
}
 
#contenedor
{
	background-color: #FFF;
	box-shadow:  0px 0px 15px #575757;
	margin: 0 auto;
	/*margin-bottom: 10px;*/
	overflow:hidden;
	width: 1000px;
}
 
.container
{
	margin: 0 auto;
	width: 100%;
}
 
.encabezado
{
  background-image:url(/b/images/color.png);
  background-repeat:repeat-x;
  height:50px;
  margin-bottom:5px;
  width:100%;
}
 
section{
	background: #12A89D;
	/*margin: 0 auto;*/
	overflow: hidden;
	/*padding: 0 10px;*/
	width:100%;
}
 
#contenedor_contenido
{
	/*margin: 10px 0px;*/
 
	padding: 0px 10px;
 
 
}
 
.postt1{
	background: #B30F2A;
}
 
.postt2{
 	background: #1C4583;
}
 
@media screen and (max-width:1000px){
	#contenedor ,img{
		width:100%;
	}
 
}
 
@media screen and (max-width:1000px){
	section{
	/*margin: 0px;
		padding: 0px;*/
		width:100%;
	}
 
}
 
@media screen and (max-width:700px){
	article{
		/*margin: 0px;
		padding: 0px;*/
		width:100%;
	}
 
}

0

Volver arriba

#2 porfi.dev

Advanced Member

Miembros
183 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

Volver arriba

#3 novato

Member

Miembros
35 mensajes

Escrito 02 enero 2014 - 09:59

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

delphi

*{margin:0; padding:0; border:0;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: ;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
a
{
	color: #FFFFFF;
	font-family:BebasNeue;
	 font-size: 22px;
    height: 51px;
  /*  text-shadow: 1px 2px black;*/
	text-decoration:none;
}
 
a:hover
{
text-decoration:underline;
}
 
@font-face
{
	font-family:BebasNeue;
	font-style:normal;
	font-height:normal;
	src: url(/a/images/BebasNeue.otf);
}
 
 
/***************************************************/
/*---  ---*/
 
/*--- MAQUETACION WRAPPER ---*/
#wrapper
{
	background: #FCFCFC;
	box-shadow:  0px 0px 5px #575757;
	margin: 0 auto;
	overflow: hidden;
	padding: 20px;
	width:960px;
}
/*--- FIN WRAPPER  ---*/
 
/*--- MENU 1 ---*/
#menu1
{
	background: #06AFE4;
	margin:0 auto;
	max-width: 1000px;
	padding: 5px 0;
}
 
#menu1 ul li
{
	display: inline-block;
	padding: 10px;
	margin: 0 5px;
}
/*--- FIN MENU 1 ---*/
 
 
#banner
{
	background: right: ;
	height:300px;
	width:100%;
 
}
 
 
.postt1{
	background: #B30F2A;
}
 
.postt2{
 	background: #1C4583;
}

delphi

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width"/>
<link href="/a/sty.css"  rel="stylesheet" />
<script type="text/javascript" src="/b/js/jquery.min.js"></script>
<script type="text/javascript" src="/b/js/jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
  $('#container').panelGallery();
});
</script>
<title>Documento sin título</title>
</head>
 
<body>
<!-- --><!-- INICIO MENU 1 -->
  <nav id="menu1"> 
    <ul >
      <li>
        <a href="#">Inicio</a>
      </li>
      <li>
        <a href="#">Quienes Somos</a>
      </li>
      <li>
        <a href="#">Contactenos</a>
      </li>
      <li>
        <a href="#"></a> 
      </li>
      <li>
        <a href="#"></a>
      </li>
  </ul>
  <!--https://www.facebook.com/fashioncosmeticnicaragua?fref=ts-->
  <div class="redsoial">
   <a href=""><img src="/a/images/facebook_color.png"  width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/twitter_color.png" width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/yahoo_color.png"/></a>
  </ul>
  </nav>
<!-- FIN MENU 1 -->
 
<!-- INICION WRAPPER -->
<section id="wrapper">
 
 
 
<!-- INICIO BANNER -->
<section id="banner">
  
</SECtion>
<!-- FIN BANNER -->
 
<!-- INICIO MENU -->
<section id="menu">
  
</section>
<!-- FIN MENU -->
 
 
</section> <!--FIN SECTION WRAPPER-->
</body>
</html>

0

Volver arriba

Volver a CSS (Cascading Style Sheet)

[SOLUCIONADO]ayuda con margenes

#1 novato

#2 porfi.dev

#3 novato

Iniciar sesión