Foros del Web » Creando para Internet » CSS »

Problemas con la modificacion de una seccion

Estas en el tema de Problemas con la modificacion de una seccion en el foro de CSS en Foros del Web. Hola tengo una seccion en las que la leras estan muy pegadas al margen y quiero poner que tengan un pequeño margen e puesto paddin ...
  #1 (permalink)  
Antiguo 10/09/2006, 06:21
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
Problemas con la modificacion de una seccion

Hola tengo una seccion en las que la leras estan muy pegadas al margen y quiero poner que tengan un pequeño margen e puesto paddin 5px y se ha ido todo al traste que manera hay de acerlo os pongo el codigo

CSS:

[QUOTE]#noticias {
float: left ;
text-align: left;
padding: 5px;
font-family: tahoma;
font-size: 12px;
width: 200px;
height: 400px;
background-image:url(imagenes/noticias.jpg);
color: #666666;
margin: 0px;
}QUOTE]

HMTL:

Cita:
<div id="eventos">
<a href="eventos.htm"><img src="imagenes/titulo-noticias.jpg" border="0"><br></a>
</div>
30-08-06<br>
<h5>Nuevo dise&ntilde;o</h5>
Antera Solutions inaugura el nuevo diseño de su web. En este nuevo diseño se han añadido una nuevas secciones y se ha mejorado la interfaz gr&aacute;fica.<br>
<a href="noticia-1.htm" class="enlace">Leer mas >></a><br>
</div>
Un saludo
__________________
Antera Solutions Diseño y desarrollo web
  #2 (permalink)  
Antiguo 10/09/2006, 13:45
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 5 meses
Puntos: 0
Pues en el html que pones no veo ningun atributo id que haga referencia a tu css marcado con #noticias además no si este bien cerrados tus divs talvez purque no es todo tu código. Otro problema podría ser por el modelo de caja en css que maneja IE en versiones anteriores a la 6.

Saludos
  #3 (permalink)  
Antiguo 10/09/2006, 14:34
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Cita:
Iniciado por opeth Ver Mensaje
en versiones anteriores a la 6...
... o usando doctypes que provoquen el modo quirks.
  #4 (permalink)  
Antiguo 11/09/2006, 06:36
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
cierto se me olvido poner todo el coido perdon es este

Cita:
<div id="noticias">
<div id="eventos">
<a href="eventos.htm"><img src="imagenes/titulo-noticias.jpg" border="0"><br></a>
</div>
30-08-06<br>
<h5>Nuevo dise&ntilde;o</h5>
Antera Solutions inaugura el nuevo diseño de su web. En este nuevo diseño se han añadido una nuevas secciones y se ha mejorado la interfaz gr&aacute;fica.<br>
<a href="noticia-1.htm" class="enlace">Leer mas >></a><br>
</div>
Como lo soluciono?
__________________
Antera Solutions Diseño y desarrollo web
  #5 (permalink)  
Antiguo 12/09/2006, 14:48
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
ayuda plis que ya no se que hacer
__________________
Antera Solutions Diseño y desarrollo web
  #6 (permalink)  
Antiguo 12/09/2006, 22:41
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 5 meses
Puntos: 0
trata de poner esto en tu código otra cosa no se me ocurre

width/**/:/**/190px;

Saludos
  #7 (permalink)  
Antiguo 13/09/2006, 04:49
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
sigue igual sabeis de otra solucion
__________________
Antera Solutions Diseño y desarrollo web
  #8 (permalink)  
Antiguo 13/09/2006, 10:03
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Yo sigo sin entender que error es del cual hablas, no lo veo, espacio entre que ???

Y segun veo en tu pagina, tienes puesto el padding en 0px,
Cita:
#noticias {
float: left ;
text-align: left;
padding: 0px;
font-family: tahoma;
font-size: 12px;
width: 200px;
height: 400px;
background-image:url(imagenes/noticias.jpg);
color: #666666;
margin: 0px;
}
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com

Última edición por fearlex; 13/09/2006 a las 10:09
  #9 (permalink)  
Antiguo 13/09/2006, 12:32
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
pues que al poner el paddin 5px se me va toda la seccion al traste se fastidia toda y se descuadra el padding q pongo es para que haya algo de margen a la izquierda
__________________
Antera Solutions Diseño y desarrollo web
  #10 (permalink)  
Antiguo 13/09/2006, 13:35
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
OK ,te explico.

Si tienes el cuerpo con un Width maximo de 700, y estas utilizando un div que tiene como width 200, flotado a la izq. y otro que se lleva 475, flotado a la derecha, la suma da 675, pero no vistes el padding que le distes al body de 25px, con ello suma 700, y por lo tanto si le das 5 mas de padding al texto ya seria 705 y se sobremediria por lo tanto, flotaria hacia debajo. Siempre checkea las medidas y has la suma del total del tamaño, o sea amplia tu caja contenedora, o reduce tus cajas internas.

Cita:
BODY {
PADDING-RIGHT: 25px; PADDING-LEFT: 25px; PADDING-BOTTOM: 25px; MARGIN: auto; COLOR: #000000; PADDING-TOP: 25px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}
#banner {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(imagenes/antera.jpg); PADDING-BOTTOM: 0px; MARGIN: auto; WIDTH: 710px; PADDING-TOP: 0px; HEIGHT: 200px; TEXT-ALIGN: left
}
#cuerpo {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: auto; WIDTH: 710px; PADDING-TOP: 0px; HEIGHT: 400px; TEXT-ALIGN: left
}
#banner-izquierda {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 203px; PADDING-TOP: 0px; HEIGHT: 200px; TEXT-ALIGN: left
}
#noticias {
PADDING-LEFT: 10px; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(imagenes/noticias.jpg); PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 200px; COLOR: #666666; PADDING-TOP: 0px; FONT-FAMILY: tahoma; HEIGHT: 400px; TEXT-ALIGN: left
}
#cuerpo-normal {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; WIDTH: 475px; PADDING-TOP: 0px; TEXT-ALIGN: left
}
Espero lo entiendas y te sea de ayuda ;)
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #11 (permalink)  
Antiguo 13/09/2006, 16:06
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
sigue igual se descuadra todo y nos e que hacer
__________________
Antera Solutions Diseño y desarrollo web
  #12 (permalink)  
Antiguo 14/09/2006, 08:21
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Yo lo probe, y no se descuadra, dime primero entendistes lo que trate de explicarte ?? Aumentale o disminuyele las medidas, hasta que todo quepa en la misma linea. Yo lo probe en Firefox y en IE y todo estuvo fine.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #13 (permalink)  
Antiguo 17/09/2006, 12:15
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
si que se me descuadra mira como queda poniendo las modificaciones que me dijiste

__________________
Antera Solutions Diseño y desarrollo web
  #14 (permalink)  
Antiguo 17/09/2006, 15:52
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
he logrado poner margen y que se descuadre poko pero aun asi aora me sobra de los dos lados algo y eso que sobra que esta en gris lo quiero poner en blanco pero no se puede no se os pongo una captura para que veais como queda



Este es el codigo CSS

Cita:
#noticias {
float: left ;
text-align: left;
padding-left: 5px;
padding-right: 5px;
font-family: tahoma;
font-size: 12px;
width: 200px;
height: 400px;
background-color: #BEBEBE;
color: #666666;
margin: 0px;
}
#eventos {
margin: auto;
padding: 0px;
position: relative;
background-color:#FFFFFF;
text-align: left;
}
Y HTML:

Cita:
<div id="noticias">
<div align="center"><div id="eventos"><a href="eventos.htm"><img src="imagenes/titulo-noticias.jpg" alt="Eventos" width="200" height="40" border="0"></a><br></div>
</div>
<p>12-09-06</p>
<h5>Cambio de Host y dominio </h5>
Antera Solutions cambia de host a uno mejor (mas capacidad) as&iacute; como de dominio ( a un .com) <br>
<a href="noticia-2.htm" class="enlace">Leer mas >></a><br>
<p>30-08-06</p>
<h5>Nuevo dise&ntilde;o</h5>
Antera Solutions inaugura el nuevo diseño de su web. En este nuevo diseño se han añadido una nuevas secciones y se ha mejorado la interfaz gr&aacute;fica.<br>
<a href="noticia-1.htm" class="enlace">Leer mas >></a><br>
</div>
Un saludo y ayuda
__________________
Antera Solutions Diseño y desarrollo web
  #15 (permalink)  
Antiguo 18/09/2006, 09:42
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Yo no entiendo, mira con este codigo como luce:

Cita:
body {
padding-right: 25px; padding-left: 25px; padding-bottom: 25px; margin: auto; color: #000000; padding-top: 25px; background-color: #ffffff; text-align: center
}
p {
font-size: 12px; color: #666666; font-family: tahoma
}
.estilo1 {
font-size: 12px; color: #666666; font-family: tahoma
}
.style8 {
font-size: 11px; color: #6c6c6c; font-family: tahoma
}
.style1 {
font-weight: bold; font-size: 11px; color: #6c6c6c; font-family: tahoma
}
#banner {
padding-right: 0px; padding-left: 0px; background-image: url(imagenes/antera.jpg); padding-bottom: 0px; margin: auto; width: 710px; padding-top: 0px; height: 200px; text-align: left
}
#cuerpo {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: auto; width: 710px; padding-top: 0px; height: 400px; text-align: left
}
#eventos {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: auto; padding-top: 0px; position: relative; text-align: left
}
#banner-izquierda {
padding-right: 0px; padding-left: 0px; float: left; padding-bottom: 0px; width: 203px; padding-top: 0px; height: 200px; text-align: left
}
#noticias {
padding-right: 0px; padding-left: 5px; font-size: 12px; float: left; background-image: url(imagenes/noticias.jpg); padding-bottom: 0px; margin: 0px; width: 195px; color: #666666; padding-top: 0px; font-family: tahoma; height: 400px; text-align: left; background: #0000FF;
}
#cuerpo-bajo {
clear: both; margin: auto; color: #000000; text-align: center
}
#subsecciones {
font-size: 12px; color: #666666; font-family: tahoma; text-align: left
}
#cuerpo-normal {
padding-right: 0px; padding-left: 0px; float: right; padding-bottom: 0px; width: 475px; padding-top: 0px; text-align: left
}
a.enlace {
padding-right: 0px; padding-left: 0px; font-size: 12px; padding-bottom: 0px; color: #6699cc; padding-top: 0px; font-family: tahoma; text-decoration: none
}
a.enlace:hover {
padding-right: 0px; padding-left: 0px; font-size: 12px; padding-bottom: 0px; color: #6699cc; padding-top: 0px; font-family: tahoma; text-decoration: underline
}
Pongo en negrita las modificaciones que hice, ademas te pongo como me sale tanto en Internet Explorer como en Firefox.

Internet Explorer


Firefox


Ademas la imagen noticias.jpeg, no le vi por ningun lado cuando descargue tu pagina del internet.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #16 (permalink)  
Antiguo 18/09/2006, 10:04
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
pero es que no quiero que quede ese hueco al lado de eventos a la derecha
__________________
Antera Solutions Diseño y desarrollo web
  #17 (permalink)  
Antiguo 18/09/2006, 10:23
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
NO me queda otra que decirte que anidastes mal los divs, si le das padding al div noticias, por supuesto que el div eventos va a tomar ese padding tambien, entonces ademas tienes el div noticias pasa por debajo del div eventos, so utlizas la imagen de bacground de ese div abajo y arriba del div eventos, creo que o mejor creas dos div del de noticias o no veo forma de resolver tu problema.

Y estaba ayudandote con respecto al texto no sabia lo de la imagen hasta que lo mencionastes en tu ultimo post.

sorry
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
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 20:48.