¿Comó inserto uno o 2 o mas div al lado de otro div centrado?

Usuario Novato

#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:

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

<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

#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:

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

<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

#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):

<!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.

Anastasiaf Usuario habitual
#4•09/Jul/2018, 23:03 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.

Anterior Siguiente Arriba

Responder

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

Inicio

Ayuda para webmasters

HTML básico

Opciones:

Ir al subforo:

Permisos:

TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes

Temas similares

No se han encontrado temas similares