Foros del Web » Creando para Internet » CSS »

Margenes del contenido

Estas en el tema de Margenes del contenido en el foro de CSS en Foros del Web. Hola muy buenas, He creado un elemento div y le he dado un color de fondo,he introducido contenido pero se sale del elemento div,es decir ...
  #1 (permalink)  
Antiguo 12/10/2006, 15:55
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Margenes del contenido

Hola muy buenas,

He creado un elemento div y le he dado un color de fondo,he introducido contenido pero se sale del elemento div,es decir que sobresale,lo que quiero es darle unos margenes para que si el contenido llega a ese margen haga un salto de linea y que el div se amplie a lo alto lo necesario,ya que la web sera dinamica.
He probado varias cosas pero me sigue sobrepasando el margen,espero que me podais ayudar.

Un Saludo y gracias de antemano!
  #2 (permalink)  
Antiguo 13/10/2006, 01:54
Avatar de kok
kok
 
Fecha de Ingreso: agosto-2006
Mensajes: 138
Antigüedad: 11 años, 3 meses
Puntos: 2
Cita:
he introducido contenido
¿Qué es el "contenido"? No entiendo cómo puede sobresalir. Si es texto en un tag P se le pueden dar atributos de estilo como
Código:
<p style="margin-right: 20px;">
o agregarle "padding" al mismo DIV.

Claro que puedo estar muy equivocado, porque creo que de todos modos no se debería salir.
  #3 (permalink)  
Antiguo 13/10/2006, 15:54
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Hola buenas,

Todo esto lo he probado ya y no me funciona igual,estoy pensando que puede ser que el elemento <div> donde tengo el contenido tiene position como absolute,es posible que sea eso?

Un Saludo y gracias!
  #4 (permalink)  
Antiguo 13/10/2006, 17:11
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola limboings, así es dificil saber que pasa, sería mejor que postearas tu código
  #5 (permalink)  
Antiguo 14/10/2006, 15:30
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Hola buenas,

No pensaba que fuera necesario,pero hay va:
Código:
#contenido{
width:800px;
padding-left:3px;
padding-right:3px;
position:absolute;
left:205px;
top:280px;
background-color:#666;
}
Un Saludo y gracias!!
  #6 (permalink)  
Antiguo 14/10/2006, 20:04
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola la verdad es que no entiendo lo que quieres hacer

¿Quieres un contenedor o caja para el contenido con espacio cada uno y a los lados de 3 pixeles?

¿para que son esos padding, estas dentro de otro contenido, de un contenedor? o simplemente lo quieres de un contenido solo? Fijate que por ejemplo tienes 800 pixeles de ancho y luego lo colocas a la izquierda y arriba en dimensiones determinadas, así que ...
  #7 (permalink)  
Antiguo 15/10/2006, 16:53
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Hola buenas,

Joer,es que soy nuevo en esto xDD,hace na y menos que trabajo con css y no lo manejo muy bien como veras,yo solo quiero que haya un div de un color determinado y que contenga el contenido que yo le diga,con unos margenes a los lados para que no sobrepase el contenido.

Utilizo absolute por que tengo los demas elementos de la web en absolute,sino lo ponia asi no me encajaban los elementos,y sino indicaba absolute en este div no se me veia.

En resumen lo que quiero es un div que contenga informacion y ese div tenga unos margenes que hagan de tope y no sobrepasen el div.

Un Saludo y muchs gracias!!
  #8 (permalink)  
Antiguo 15/10/2006, 17:17
Avatar de reyesoft  
Fecha de Ingreso: abril-2006
Ubicación: San Rafael, Mendoza
Mensajes: 311
Antigüedad: 11 años, 8 meses
Puntos: 15
Pon el código HTML, por favor. Luego de ahí veremos. Te creo que se salga del elemento DIV, en firefox sucede. Es lo correcto.

Saludos...
  #9 (permalink)  
Antiguo 16/10/2006, 16:20
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Hola buenas,

Este es el codigo que he creado:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Chriser Miniaturas</title>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 5.5000]> <script type="text/javascript" src="./png.js"></script> <![endif]-->
</head>
<body>
<div id="header"></div>
<div id="principal">
	<div id="cabecera">
		<div id="c1"></div>
		<div id="c2"></div>
		<div id="c3"></div>
	</div>
	<div id="cuerpo">
		<div id="cu1"></div>
		<div id="cu2"></div>
		<div id="cu3"></div>
		<div id="cu4"></div>
		<div id="cu5"></div>
		<div id="cu6"></div>
		<div id="cu7"></div>
		<div id="navegacion">		
			<div id="timenu"></div>
			<ul>
				<li><a href="link/">La autora</a></li>
				<li><a href="link/">Nuestros Productos</a></li>
				<li><a href="link/">Tienda</a></li>
				<li><a href="link/">Proyectos DVD</a></li>
				<li><a href="link/">Pedidos</a></li>
				<li><a href="link/">Ferias</a></li>
				<li><a href="link/">Links</a></li>
				<li><a href="link/">Contactar</a></li>
			</ul>
			<div id="tiencuestas"></div>
		</div>
		<div id="tituloapar"></div>
		<div id="opcionesuser">
			<ul id="menuser">
				<li><a href="link/">Perfil de Usuario</a></li>
				<li><a href="link/">¿Perdiste tu contraseña?</a></li>
				<li><a href="link/">¿Perdiste tu nombre de usuario?</a></li>
			</ul>
		</div>
		<div>
			<ul id="registro">
				<li><a href="link/">¿Aun no eres usuario?¡Registrate!</a></li>
			</ul>
		</div>
		<div id="encuesta">
			<form>
				<p>¿Que producto<br /> le agrada mas?</p><br />
				<input type="radio" name="articulo" value="bolsos" /><p>Bolsos</p><br />
				<input type="radio" name="articulo" value="maletas" /><p>Maletas</p><br />
				<input type="radio" name="articulo" value="sillas"/><p>Sillas</p><br />
				<input type="radio" name="articulo" value="mesas"/><p>Mesas</p><br />
				<input type="radio" name="articulo" value="cajoneras"/><p>Cajoneras</p>
				<div id="votarbo"><input type="button" value="Votar"  /></div>
			</form>	
		</div>
		<div id="resultencu">
				<pre>
					Bolsos    |||| 25%
					Maletas   |||| 25%
					Sillas    |||| 25%
					Mesas     |||| 25%
					Cajoneras |||| 25%
				</pre>
			</div>
		<div id="login">
			<form>
				<p>Usuario: </p><input type="text" name="usuario" value="Usuario" size="14px" />
				<p>Contraseña: </p><input type="password" name="clave" value="clave" size="14px" />
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><input type="button" value="Login"  />
			</form>
		</div>
		<div id="buscar">
			<form>
				<p>Buscar Producto: </p><input type="text" name="buscar" value="Producto a buscar" size="16px" /><br />
				<div id="buscarbo"><input type="button" value="Buscar"  /></div>
			</form>
		</div>
		<div id="contenido">
		<p>ContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenidoContenido</p>
		</div>
	</div>
	<div id="pie">
	
	</div>
<div>
</body>
</html> 
Bueno,seguramente este mal estructurado por lo de que es mi primera vez con CSS,si teneis alguna sugerencia..

Un Saludo y graciass!!
  #10 (permalink)  
Antiguo 17/10/2006, 17:05
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Hola buenas,

Nadie puede decirme como lo hago?

Un Saludo!!
  #11 (permalink)  
Antiguo 17/10/2006, 17:25
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola limboings

La verdad es que es dificil mirar el código y más sin haber puesto el css de "estilo.css" que estas usando, de todas suponiendo que estas usando el ejemplo anterior que me citabas arriba de #contenido creo que tu problema está aquí:

Cita:
#contenido{
width:800px;
padding-left:3px;
padding-right:3px;
position:absolute;
left:205px;
top:280px;
background-color:#666;
}
Intentalo con esto por ejemplo

Código HTML:
<style type="text/css">
#contenido{
background-color:#666;
margin:6px;
}
</style> 
  #12 (permalink)  
Antiguo 18/10/2006, 12:09
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Hola buenas,

Pues sigue sin funcionarme,haver si alguien me puede decir como hago para que no se salga el contenido de los bordes del div..

Un Saludo y gracias!!
  #13 (permalink)  
Antiguo 18/10/2006, 12:32
Avatar de limboings  
Fecha de Ingreso: enero-2005
Mensajes: 794
Antigüedad: 12 años, 10 meses
Puntos: 2
Buenas,

os pongo aqui el codigo css:
Código:
body{
	background-color: #8f0817;
	margin: 0.5% 0% 0% 0%;
}

body> div{
	background-color: #8f0817;
	margin:0 0 0 0;
	padding:0 0 0 0;
	width:1022px;
}

div>#cabecera{
height:150px;
width:1022px;
}
#cabecera>#c1{
position:absolute;
left:1px;
top:7px;
background-position:0px 0px;
width:356px;
height:69px;
background-image: url(imagenes/c1.png);
background-repeat: no-repeat;

}
#header
{position:absolute;
  width: 600px;
  height: 178px;
  background: none; /* Aquí quitamos cualquier fondo existente */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="maleta2fondo.png", sizingMethod="image"); /*cargamos la imagen igual que como lo hicimos con la etiqueta img, pero el  método de escala será ahora image, es decir, la misma imagen */
  background-repeat:no-repeat;
  margin-left: 200px;
} 
#cabecera>#c2{
position:absolute;
left:357px;
top:7px;
width:666px;
height:69px;
background-image: url(imagenes/c2.png);
background-repeat: no-repeat;
background-position:0px 0px;

}
#cabecera>#c3{
position:absolute;
left:1px;
top:76px;
width:1022px;
height:78px;
background-image: url(imagenes/c3.png);
background-repeat: no-repeat;
background-position:0px 0px;
}

div>#cuerpo{
height:800px;
width:1022px;

}
#cuerpo>#cu1{
position:absolute;
top:154px;
left:1px;
width:194px;
height:127px;
background-image: url(imagenes/cu1.png);
background-repeat: no-repeat;
background-position:0px 0px;
}
#cuerpo>#cu2{
position:absolute;
top:154px;
left:195px;
width:828px;
height:844px;
background-image: url(imagenes/cu2.png);
background-repeat: no-repeat;

background-position:0px 0px;

}
#cuerpo>#cu3{
position:absolute;
left:1px;
top:281px;
width:155px;
height:288px;
background-image: url(imagenes/cu3.png);
background-repeat: no-repeat;
background-position:0px 0px;
}
#cuerpo>#cu4{
position:absolute;
top:281px;
left:156px;
width:39px;
height:716px;
background-image: url(imagenes/cu4.png);
background-repeat: no-repeat;
background-position: top left;
}
#cuerpo>#cu5{
position:absolute;
left:1px;
top:570px;
width:22px;
height:428px;
background-image: url(imagenes/cu5.png);
background-repeat: no-repeat;
background-position:0px 0px;
}
#cuerpo>#cu6{
position:absolute;
top:569px;
left:23px;
width:133px;
height:283px;
background-image: url(imagenes/cu6.png);
background-repeat: no-repeat;
background-position:0px 0px;
}
#cuerpo>#cu7{
position:absolute;
top:852px;
left:23px;
width:133px;
height:145px;
background-image: url(imagenes/cu7.png);
background-repeat: no-repeat;
background-position:0px 0px;
}
#encuesta p{
display:inline;
font-family:Verdana;
font-size:0.7em;
font-weight:bold;
color: #000000;
}
#cuerpo>#encuesta {
position:absolute;
left:55px;
top:616px;
width:100px;
}
#cuerpo>#resultencu>pre {
position:absolute;
left:-155px;
top:755px;
font-family:Verdana;
font-size:0.8em;
font-weight: bold;
}
#votarbo{
position:absolute;
left:46px;
top:125px;
}
#login p{
font-family:Verdana;
color: #000000;
display:inline;
font-size:0.7em;
font-weight:bold;

}
#navegacion>#timenu{
position: absolute;
top:278px;
left:162px;
width:32px;
height:300px;
background-image: url(imagenes/titulomenu.png);
background-repeat: no-repeat;
}
#navegacion>#tiencuestas{
position: absolute;
top:600px;
left:162px;
width:32px;
height:320px;
background-image: url(imagenes/tituloencuestas.png);
background-repeat: no-repeat;
}
#cuerpo>#tituloapar{
position: absolute;
top:233px;
left:375px;
width:630px;
height:40px;
background-image: url(imagenes/tituloapar.png);
background-repeat: no-repeat;
background-position:0px 0px;
}
#cuerpo>#opcionesuser{
position: absolute;
top:148px;
left:451px;
width:560px;
height:85px;
background-image: url(imagenes/opcionesuser.png);
background-repeat: no-repeat;
background-position:0px 0px;
}
#opcionesuser>#menuser {
position: absolute;
top:0px;
left:0px;
list-style:none;
}
#menuser a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
#registro{
list-style:none;
position: absolute;
left:25px;
top:175px;
}
#registro a{
color: #000000;
text-decoration: none;
font-weight: bold;
}
#cuerpo>#login {
position:absolute;
left:5px;
top:157px;

}
#cuerpo>#buscar {
position:absolute;
left:140px;
top:228px;
}
#buscarbo {
position:absolute;
left:169px;
top:22px;
}
#cuerpo>#buscar p {
font-family:Verdana;
color: #000000;
display:inline;
font-size:0.7em;
font-weight:bold;
}
#navegacion ul {
	position:absolute;
	left:0;
	top:260px;
	list-style:none;	
	margin-left:5px;
	margin-top: 20px;
	font-size: 12px;
	font-family:Verdana,Arial;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
	width:146px;
	height:287px;
	
border:1px solid #a53323;
}

#navegacion ul li{
    background-image: url(ico.png);
	padding-left: 0px;
	padding-top: 7px;
	
	border-bottom:1px solid #a53323;
	border-top:8px solid #ff4f37;
	width:146px;
	height: 20px;
	text-align: center;
}
#navegacion ul li:hover{
    background-image: url(ico.png);
	margin-left:15px;
	padding-left:15px;
	padding-top: 7px;
	border:2px solid #fd5f21;
	border-top:8px double #fd5f21;
	width:146px;
	height: 20px;
	text-align: left;
	
}

#navegacion a{
	color: #5c0803;
	text-decoration: none;
}
#navegacion ul li:hover a{
 color: #5c0803; 
	
}
#navegacion ul li:hover a:hover{
 color: #f59601 ; 
	
}
#contenido{


background-color:#666;
margin-top:0;
padding-top:0;
float:left;
width:67%;
background:#fff;
margin-right: 1.67em;
padding-bottom:20px;
border-right: 1px solid black;
padding-right: 1 em;
}

p{
	color: #000000;
	font-size: 1.5em;
	font-family: Verdana,Times;
}
input{
background-color:#ff908c;
border:1px solid black;
}
Es bastante largo,por eso no lo puse desde un principio,pero bueno aqui os lo dejo seguro que veis errores por doquier asi que os agradeceria que me los dijerais ,asi de paso mejoro el codigo.

Un Saludo y gracias!!
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:47.