Problemas con la modificacion de una seccion

#1 (**permalink**) 10/09/2006, 05:21

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ñ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áfica.<br>
<a href="noticia-1.htm" class="enlace">Leer mas >></a><br>
</div>

Un saludo

opeth · #2 (**permalink**) 10/09/2006, 12:45

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

webosiris · #3 (**permalink**) 10/09/2006, 13:34

Cita:

Iniciado por opeth

en versiones anteriores a la 6...

... o usando doctypes que provoquen el modo quirks.

#4 (**permalink**) 11/09/2006, 05:36

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ñ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áfica.<br>
<a href="noticia-1.htm" class="enlace">Leer mas >></a><br>
</div>

Como lo soluciono?

#5 (**permalink**) 12/09/2006, 13:48

ayuda plis que ya no se que hacer

opeth · #6 (**permalink**) 12/09/2006, 21:41

trata de poner esto en tu código otra cosa no se me ocurre

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

Saludos

#7 (**permalink**) 13/09/2006, 03:49

sigue igual sabeis de otra solucion

fearlex · #8 (**permalink**) 13/09/2006, 09:03

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;
}

#9 (**permalink**) 13/09/2006, 11:32

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

fearlex · #10 (**permalink**) 13/09/2006, 12:35

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 ;)

#11 (**permalink**) 13/09/2006, 15:06

sigue igual se descuadra todo y nos e que hacer

fearlex · #12 (**permalink**) 14/09/2006, 07:21

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.

#13 (**permalink**) 17/09/2006, 11:15

si que se me descuadra mira como queda poniendo las modificaciones que me dijiste

#14 (**permalink**) 17/09/2006, 14:52

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í 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ñ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áfica.<br>
<a href="noticia-1.htm" class="enlace">Leer mas >></a><br>
</div>

Un saludo y ayuda

fearlex · #15 (**permalink**) 18/09/2006, 08:42

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.

#16 (**permalink**) 18/09/2006, 09:04

pero es que no quiero que quede ese hueco al lado de eventos a la derecha

fearlex · #17 (**permalink**) 18/09/2006, 09:23

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