x

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación.
Si continúa navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de cookies

 
  Entrar Regístrate
 
¿Comó inserto uno o 2 o mas div al lado de otro div centrado?
#1 · 12/Nov/2008, 19:32

Buenas, soy nuevo en esto y apenas llevo unas dos semana, tratando de crear una web. Tengo la inquietud de como inserto uno o dos o mas  div al aldo de otro div centrado y no centrado con un margen a la derecha de unos 250px, como por decir algo, claro que se me ocurre hacer una tabla y meter los dos o mas divs, en al alguna celda de contenido y luego establecer la posición de la tabla al centro o no tan al centro. Ademas también tengo la duda para que sirve la etiqueta css "position" y ver si se puede cambiar la resolución de una imagen de fondo por css.

Aqui les pongo el codigo de lo que hice:

CSS:
<style type="text/css">
  body {
background-color:black;
background-image:url(http://fc21.deviantart.com/fs9/i/2006/052/4/6/Pop_Art_by_tuiazinha.jpg);
background-attachment:fixed;
background-position:top center;
background-repeat:no-repeat}
}

#contenedor{
margin-left:30px;
margin-top:0px;
padding:0 0 0 0;
width:auto;
position:absolute;
}
.divcontenido{
    float:left;
    background-color:black;
    color:white;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    padding:10px;
    border-color:#CCCCCC;
    border-style:groove;
    border-width:10px;
    width:200px;
    text-align:left;
}
.divcontenido{
    float:left;
    background-color:black;
    color:white;
    font-family:Arial;
    font-size:15px;
    padding:10px;
    border-color:#CCCCCC;
    border-style:groove;
    border-width:10px;
    width:200px;
    text-align:left;
    margin-left:25px;
}
</style>
HTML:
<div id="contenedor">
<div class="divcontenido">
<p>Interesante esto de los div</p>
</div>
<div class="divcontenido">
<p>lo que se es que no es facil esto xD...</p>
</div>
<div style="clear:both;"></div>
</div>

 


penpop88
Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 5
Desde: 12/Nov/2008
·
#2 · 13/Nov/2008, 04:49

Consegui una media solución, probe en varios navegadores y se ve bien excepto en interet explorer 8 beta 2, flock 1.2.6 y seamonkey 1.1.13... lo que hice fue crear dos id en css y en la id="contenido" le puse un atributo display:inline-block..

aqui va el codigo:

CSS:
<style type="text/css">
#contenedor {
padding:0 0 0 0;
width:auto;
margin-top:10px;
}

#contenido {
    padding:10px 10px 10px 10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:black;
    border-width:5px;
    width:auto;
    border-style:double;
    display:inline-block;
}
</style>
HTML:
<center>
    <div id="contenedor">
        <div id="contenido"><img src=    "http://www.imageandart.com/tutoriales/historia_diseno/pop/politica_pop/imagenes/coca.jpg" border="0" /></div><div id="contenido"><img src=    "http://www.imageandart.com/tutoriales/historia_diseno/pop/politica_pop/imagenes/coca.jpg" border="0" /></div>
    </div>
    <div id="contenedor">
        <div id="contenido"><img src=    "http://www.imageandart.com/tutoriales/historia_diseno/pop/politica_pop/imagenes/coca.jpg" border="0" /></div><div id="contenido"><img src=    "http://www.imageandart.com/tutoriales/historia_diseno/pop/politica_pop/imagenes/coca.jpg" border="0" /></div>
    </div>
</center>

 


penpop88
Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 5
Desde: 12/Nov/2008
·
#3 · 16/Nov/2008, 18:29

 

Solucionado insertar uno o 2 o más div al lado de otro, el truco esta en introducir todos los divs dentro de un div y calcular su ancho total y colocar como margin:o auto.

Aqui les dejo un ejemplo (trae explicaciones):

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:: Prueba de uno o 2 o m&aacute;s div al lado de otro ::. </title>
</head>
<style type="text/css">
body {
background:#59b5ec url(http://robcubbon.com/images/rihanna-pop-art.gif)top left no-repeat fixed;
}
#contenedor{
margin:0 auto;/*para centrarlo el contenedor debe poseer este margen*/
padding:0;
width:632px;/*si queremos que salga 4 veces la imagen con separación de margenes a la derecha de 10px y  incluyendo bordes de 2px, quedando todo junto hacia el centro hacemos esto:
-->Multiplicamos el width=ancho x 4 del espacio 1 =   144 x 4 = 576px  +
-->Multiplicamos el margin=margen x 4 del espacio 1 =  10 x 4 =  40px
-->Sumamos el border=borde derecho y isquierdo del
espacio 1 y luego lo multiplicamos x 4 =            (2 + 2) 4 =  16px
                                                                ------
-->Y nos dar como el total el width que nesecitamos -----------> 632px

NOTA: si ponemos el width:auto del contenedor, todo se ira hacia el margen izquierdo. */
text-align:center;
height:auto;/*aqui puedes poner una altura deseada teniedo en cuenta que tiene que ser mayor o igual al de la imagen, y si tiene bordes la imagen se le suma a la altura, igual si el
div->espacio 1 tuviera bordes se lo sumarias a la altura=height,  y cuando hablo que le sumarias el borde seria el borde de arriba + el borde de abajo ahi que tenerlo en cuenta, por recomendación usar height=auto */
background:transparent;
}
#espacio1{
padding:0;
width:144px;
float:left;
background:transparent;
height:auto;
border:solid black 2px;
margin-right:10px;
}
</style>
<body>
<div id="contenedor">
    <div id="espacio1"><img src="http://robcubbon.com/images/rihanna-pop-art.gif" width="144px" height="192px" /></div>
    <div id="espacio1"><img src="http://robcubbon.com/images/rihanna-pop-art.gif" width="144px" height="192px" /></div>
    <div id="espacio1"><img src="http://robcubbon.com/images/rihanna-pop-art.gif" width="144px" height="192px" /></div>
    <div id="espacio1"><img src="http://robcubbon.com/images/rihanna-pop-art.gif" width="144px" height="192px" /></div>
</div>
</body>
</html>

 

Lo de la etiqueta css position, estuve viendo en esta site que "Retorna o establece de que manera será posicionado el elemento."  y lo de cambiar la resolución de un background por css, aun no lo se tendría que investigarlo, pero lo que me importaba era lo de los divs, con eso es suficiente.


penpop88
Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 5
Desde: 12/Nov/2008
·
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Foro de soporte · Ayuda para webmasters · HTML básico
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 21:12 UTC+02:00 DST
Temas similares
No se han encontrado temas similares