Re: Problema con margen derecho

[marcosnc_08]

Che disculpen el triplepost, pero necesito ayuda con esta Web que estoy por terminar. Estuve intentando encontrar el error pero no pude.

[Triby]

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.

[jomaruro]

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

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

Saludos.

[JavierB]

Temas unidos. Deberías haber continuado con el mensaje original, en lugar de abrir uno nuevo.

[marcosnc_08]

Iniciado por Triby

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?

Iniciado por jomaruro

¡¡¡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

[marcosnc_08]

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

[baccxus]

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

[marcosnc_08]

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%.

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

[baccxus]

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

[jomaruro]

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.

[marcosnc_08]

Bueno Jomaruro. Mira te dejo ESTE link actualizado.

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

Gracias.

[baccxus]

Iniciado por jomaruro

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

[jomaruro]

Iniciado por baccxus

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.

[baccxus]

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

[marcosnc_08]

Gracias a todos, ya solucione el problema.