Foros del Web » Creando para Internet » CSS »

Re: Problema con margen derecho

Estas en el tema de Re: Problema con margen derecho en el foro de CSS en Foros del Web. Che disculpen el triplepost, pero necesito ayuda con esta Web que estoy por terminar. Estuve intentando encontrar el error pero no pude....

  #31 (permalink)  
Antiguo 13/03/2009, 19:12
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Re: problema con columnas en IE.

Che disculpen el triplepost, pero necesito ayuda con esta Web que estoy por terminar. Estuve intentando encontrar el error pero no pude.
__________________
Marcos.
  #32 (permalink)  
Antiguo 13/03/2009, 21:12
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Re: problema con columnas en IE.

Código:
#header_secundario_a {
	width: 1000px;
	height: 322px;
	background: url(logo/logo_header2.png) no-repeat;
	margin: 0pt auto;
	padding: 10px 0pt 20px;
}
Un bloque de 1009px dentro de otro de 700px? es logico que algo no funcione correctamente. Supongo que tendrias que empezar de cero tu maquetacion para crear los bloques y espacios de una forma coherente.
__________________
- León, Guanajuato
- GV-Foto

Última edición por Triby; 13/03/2009 a las 21:13 Razón: Comienzo a odiar el highlight :-(
  #33 (permalink)  
Antiguo 14/03/2009, 05:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Re: problema con columnas en IE.

¡¡¡Y cambia el background de una vez!!! Se escribe PORTUGUÉS.
¿vale?

Creo que esa duda ya te la habian resuelto aquí ¿no?

Saludos.

  #34 (permalink)  
Antiguo 14/03/2009, 06:29
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Re: Problema con margen derecho

Temas unidos. Deberías haber continuado con el mensaje original, en lugar de abrir uno nuevo.
  #35 (permalink)  
Antiguo 14/03/2009, 09:08
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Re: Problema con margen derecho

Cita:
Iniciado por Triby Ver Mensaje
Código:
#header_secundario_a {
	width: 1000px;
	height: 322px;
	background: url(logo/logo_header2.png) no-repeat;
	margin: 0pt auto;
	padding: 10px 0pt 20px;
}
Un bloque de 1009px dentro de otro de 700px? es logico que algo no funcione correctamente. Supongo que tendrias que empezar de cero tu maquetacion para crear los bloques y espacios de una forma coherente.
mmm... no entiendo cuales son los dos bloques a los que te referis. ¿podrías señalarme los?

Cita:
Iniciado por jomaruro Ver Mensaje
¡¡¡Y cambia el background de una vez!!! Se escribe PORTUGUÉS.
¿vale?

Creo que esa duda ya te la habian resuelto aquí ¿no?

Saludos.

no, la duda que resolvió Mikmoro fue la del margen a la derecha de la pagina. Pero después, al momento de agregar contenido a la columna 2, me di cuenta del primer error.

El segundo error que detalle es debido a que no tenia el ie6 instalado, sino que tenia el ie7.

Gracias
__________________
Marcos.
  #36 (permalink)  
Antiguo 14/03/2009, 14:14
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
De acuerdo Respuesta: Re: Problema con margen derecho

Miren les dejo este dibujo que hice, a ver si entienden mejor.



__________________
Marcos.
  #37 (permalink)  
Antiguo 14/03/2009, 14:51
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Re: Problema con margen derecho

El otro error ortográfico es INGLÉS que lleva tilde.

te recomendaría que el ancho fuera de 960px y no de 1000px porque la barra de scroll siempre está prensente, lo otro es que hay algunos que usamos Netbooks y nuestra resolución promedio es de 900px máx.

Por cierto tienes contenedor, header, header secundario, columnas, columna1, columna2, footer, footer1, footer2... estás maquetando como con tablas, debería ser contenedor, encabezado, lateral, contenido y pie; igualmente, dentro de estos usar clases en sus atributos h1, p, ol/ul, span y si es ESTRICTAMENTE NECESARIO div.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 14/03/2009 a las 15:01
  #38 (permalink)  
Antiguo 14/03/2009, 15:08
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Re: Problema con margen derecho

Cita:
te recomendaría que el ancho fuera de 960px y no de 1000px porque la barra de scroll siempre está prensente, lo otro es que hay algunos que usamos Netbooks y nuestra resolución promedio es de 900px máx.
La web tiene un ancho de 100%.

Cita:
Por cierto tienes contenedor, header, header secundario, columnas, columna1, columna2, footer, footer1, footer2... estás maquetando como con tablas, debería ser contenedor, encabezado, lateral, contenido y pie; igualmente, dentro de estos usar clases en sus atributos h1, p, ol/ul, span y si es ESTRICTAMENTE NECESARIO div.
Te referis a los nombres nada mas?

Gracia por la ayuda
__________________
Marcos.
  #39 (permalink)  
Antiguo 14/03/2009, 15:24
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Re: Problema con margen derecho

No, me refiero a las divisiones, no sé si todavía las llaman "divitis", pero lo que haces es maquetar como si fuera una tabla y no aprovechas el verdadero potencial del CSS.

Por ponerte un ejemplo (tu propio diseño):

Código:
div contenedor
  div encabezado
    h1 logo
    ul botonera
    p header_secundario
  /div final de encabezado
 
  div columna2 (comunmente llamado lateral)
  /div final de columna2

  div columna1 (comunmente llamado contenido)
  /final de columna1

  div footer
    p footer_col1
    p footer_col2
  /div final de footer
/final de contenedor
Es solo un ejemplo, pero es más limpio, y de seguro que más fácil de programar el layout, aparte que, a mi vista, es más lógico.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #40 (permalink)  
Antiguo 14/03/2009, 15:37
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Re: Problema con margen derecho

Hola:

Yo pondría el código CSS como sigue, aunque no se si es eso lo que quieres:

Código:
body {
	width: 100%;
	height: 100%;
      background: url(img/line_top.png) repeat-x top;
	margin: 0 auto;
}

a {
	color: #999;
}

a:hover, a:visited {
	color: #009;
	text-decoration: underline;
}

#contenedor {
	width: 100% !important;
	height: 100% !important;
}

#header {
	width: 100%;
	height: 70%;
}

#logo {
	width: 25%;
	height: 150px;
	margin: 0 10px 10px 10px;
}

#header_primario {
	color: #000;
	width: 61%;
	height: 100px;
	margin: 0.3em 0 0 0;
	padding: 25px 5px 5px 20px;
	position: absolute;
	left: 320px;
	top: 13px;
}


/* Botonera Principal */

#header_primario ul {
    text-align: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	width: 650px;
}

#header_primario ul li {
    list-style-type: none;
	margin: 8px 10px 0 10px;
	float: left;
	height: 25px;
	text-align: center;
	font-size: 1.5em;
}

#header_primario ul li a {
    color: #999;
	text-decoration: none;
}
		
#header_primario ul li a:hover {
    color: #000;
	background-image: url(img/btn_back.png);
}
				
#header_primario ul li a:active {
    background-image: url(img/btn_back.png);
}

/* Fin botonera principal */

#header_secundario_a {
	width: 646px;
	height: 322px;
	background: url(img/logo_header2.png) no-repeat;
	margin: 0pt auto;
	padding: 10px 0pt 20px;
}
	
#header_secundario {
	margin: 0;
	padding: 7px 0 0 5px;
	height: 50px;
	background: url(img/Subtitle.png) repeat-x;
	clear: both;
	overflow: auto;
	font-size: 2em;
	text-align: right;
	color: #004A00;  
}
					
#columnas {
	width: 980px;
	/*margin: 0 0 20px 0;*/
	margin: auto;
}

#columna1 {
	float: left;
	width: 700px;
	margin: 20px 0 20px 0;
	padding: 10px;
	overflow: auto;
	border: 1px solid #000;
}

#columna1 p {
	font-size: 1.2em;
	color: #333;
	text-align: justify;
	margin: 2px solid red;
}

.columna1_titulos {
	border-bottom: 1px dashed #999;
	font-size: 1.3em;
}

.columna1_tablas {
	text-align: center;
}

#columna2 {
	float: right;
	width: 200px;
	margin: 20px 0 20px 0;
	padding:10px;
	border: 1px solid #000;
	overflow: auto;
}

#columna2 ul {
    list-style-image: url(img/list_style_image.png);
	margin: 10px 0 0 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #ccc;
}
	
#columna2 ul li {
    list-style-image: url(img/list_style_image.png);
	height: 25px;
	font-size: 1em;
	text-decoration: none;
	padding-left: 5px;
}
	   
#columna2 ul li a {
    list-style-image: url(img/list_style_image.png);
	color: #666;
	text-decoration: none;
}
			
#columna2_cuerpo ul a:hover, a:visited {
    color: #009;
	text-decoration: underline;
}

.columna2_titulos {
	width: 200px;
	margin: 0 0 20px 0;
	border-bottom: 1px dotted  #666;
}
			
#footer {
	background: url(img/foot.png) repeat-x;
	height: 150px;
	clear: both;
	margin: 20px 0 -30px -1px;
	width: 100%;
}

#footer_col1 {
	float: left;
	width: 400px;
	height: 90%;
	padding: 10px 0 0 10px;
}

#footer_col2 {
	width: 300px;
	height: 50px;
	padding: 10px 0 0 10px;
	position: absolute;
	top: 400px;
	left: 650px;
	display: none;
}

.foot_links {
	text-align: center;
	color: #FFF;
}

.foot_links a {
    color: #FFF;
	text-decoration: none;
}
	
.foot_links a:hover, a:active {
    text-decoration: overline;
}

.reset {
    clear:both;
}
y en el HTML:

añadiría:

Código:
                <div class="reset"></div>
despues de cerrar el div columna2 y antes de cerrar el div columnas.

Saludos.

  #41 (permalink)  
Antiguo 14/03/2009, 16:57
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Re: Problema con margen derecho

Bueno Jomaruro. Mira te dejo ESTE link actualizado.

Al parecer no funciono, pero mirarlo, haber que opinas.

Gracias.
__________________
Marcos.
  #42 (permalink)  
Antiguo 14/03/2009, 18:23
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Re: Problema con margen derecho

Cita:
Iniciado por jomaruro Ver Mensaje
y en el HTML:

añadiría:

Código:
                <div class="reset"></div>
despues de cerrar el div columna2 y antes de cerrar el div columnas.
No veo la necesidad de un "reset", de hecho, personalmente, es una mala práctica. Podrías explicarmelo?

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #43 (permalink)  
Antiguo 14/03/2009, 18:58
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Re: Problema con margen derecho

Cita:
Iniciado por baccxus Ver Mensaje
No veo la necesidad de un "reset", de hecho, personalmente, es una mala práctica. Podrías explicarmelo?
Repasando su código he visto que el div columnas no encerraba las dos columnas laterales, por eso lo he puesto.

¿Porqué es una mala práctica?

Saludos.

  #44 (permalink)  
Antiguo 14/03/2009, 19:11
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Re: Problema con margen derecho

Pero hay otras soluciones, el usar una división de más (y vacía), puede ahorrarselo con un min-height o en vez de usar 2 div flotantes usar una flotante y la otra no (tendría que ver el código de marcosnc_08 y sentarme a analizarlo), pero como te dije, PERSONALMENTE, no me parece una buena práctica.

Puede ser cuestión de apreciación y/o constumbre de cada uno.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #45 (permalink)  
Antiguo 15/03/2009, 09:14
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Re: Problema con margen derecho

Gracias a todos, ya solucione el problema.
__________________
Marcos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:08.