12/10/2006, 14:55
| ||||
| ||||
| 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! |
|
13/10/2006, 00:54
| ||||
| ||||
| Cita: ¿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 he introducido contenido
Código:
o agregarle "padding" al mismo DIV.<p style="margin-right: 20px;"> Claro que puedo estar muy equivocado, porque creo que de todos modos no se debería salir. |
|
13/10/2006, 14:54
| ||||
| ||||
| 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! |
|
13/10/2006, 16:11
| ||||
| ||||
| Hola limboings, así es dificil saber que pasa, sería mejor que postearas tu código 
__________________ Portafolio Desarrollador Web Freelance |
|
14/10/2006, 14:30
| ||||
| ||||
| Hola buenas, No pensaba que fuera necesario,pero hay va:
Código:
Un Saludo y gracias!! #contenido{
width:800px;
padding-left:3px;
padding-right:3px;
position:absolute;
left:205px;
top:280px;
background-color:#666;
}
|
|
14/10/2006, 19:04
| ||||
| ||||
| 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 ... 
__________________ Portafolio Desarrollador Web Freelance |
|
15/10/2006, 15:53
| ||||
| ||||
| 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!! |
|
16/10/2006, 15:20
| ||||
| ||||
| 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> </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> Un Saludo y graciass!! |
|
17/10/2006, 16:25
| ||||
| ||||
| 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: Intentalo con esto por ejemplo#contenido{ width:800px; padding-left:3px; padding-right:3px; position:absolute; left:205px; top:280px; background-color:#666; } Código HTML: <style type="text/css"> #contenido{ background-color:#666; margin:6px; } </style> 
__________________ Portafolio Desarrollador Web Freelance |
|
18/10/2006, 11:32
| ||||
| ||||
| Buenas, os pongo aqui el codigo css:
Código:
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.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;
}
Un Saludo y gracias!! |
