Foros del Web » Creando para Internet » CSS »

Imagenes y divs

Estas en el tema de Imagenes y divs en el foro de CSS en Foros del Web. Estoy armando mi página web, tengo el siguiente link http://acceso-directo.net23.net En el index hay tres rectángulos de texto izquierda derecha pero me surge el proble ...
  #1 (permalink)  
Antiguo 13/05/2011, 09:03
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Pregunta Imagenes y divs

Estoy armando mi página web, tengo el siguiente link http://acceso-directo.net23.net

En el index hay tres rectángulos de texto izquierda derecha pero me surge el proble de que quiero poner una imagen que es cuadrado de 100x100 al lado del div (es decir antes)

me que daría algo asi.

_____________ ________________________________________
| | | |
| | | |
| | | |
| | | |
| | | |
|____________| |_______________________________________|


Y lo mismo para el lado derecho. Desde ya gracias.


P.S.: El dibujo de pre-eliminar que hice se ve corrido pero es un cuadrado y un rectangulo.
  #2 (permalink)  
Antiguo 13/05/2011, 09:27
Avatar de edwines  
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 5 años, 8 meses
Puntos: 3
Respuesta: Imagenes y divs

Supongo que el problema es qué posicionar adecuadamente la imagen para qué este antes del div.

Para esto puedes utilizar la opción display de CSS; pues el comportamiento normal de un DIV es tomarse todo el ancho disponible y por ende se va hacia una linea diferente.

Lo que debes hacer es darle al div un display:inline-block.
  #3 (permalink)  
Antiguo 13/05/2011, 10:54
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

Ok. Voy a probarlo. Gracias.
  #4 (permalink)  
Antiguo 13/05/2011, 11:59
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

No. funciona voy saber el index. El problema es que para alinear la imagen que ahora la puse dentro un div con la caja texto. Tengo que poner en la caja de texto. Margin-top: -100px; Pero el problema es que no me deja poner ese valor.
Se puede ver en el index de la página.
  #5 (permalink)  
Antiguo 13/05/2011, 12:18
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 6 años, 11 meses
Puntos: 23
Respuesta: Imagenes y divs

Amigo, no entiendo que es lo que queres hacer y cual es tu problema, podrias explicarlo de otro modo, porque si lo queres colocar es un div antes de los recuadros, no es dificil, el tema es que no entiendo tu consulta.
De todos modos te tiro una idea:

al "contenedor2" agregale position:relative; margin:auto;
y todo lo quieras posicionar dentro de este le podes poner un position:absolute y moverlo dentro del relative con top, bootom, right, left.
Te comento esto porque en el ultimo post pusiste que hay un elemento que con margin no se te mueve, eso puede pasar porque esta contenido dentro de otro elemento y segun como esten posicionados, no logras que se superpongan.

Espero te sirva de algo. Saludos.
  #6 (permalink)  
Antiguo 13/05/2011, 12:44
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

Basicamente lo que quiero es alinear el cuadrado con el div

@charset "utf-8";
@import url("barmenu.css");
/* CSS Document */


#main{
height: 1091px;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #1C7474;

}#contenedor1 {
background-color: #006666;
height: 290px;
width: 1000px;
float: left;
}
#logo {
height: 245px;
width: 1000px;
float: left;
background-color: #999999;
background-image: url(../imagenes/logo.png);
}
#mainmenu {
background-color: #CCCCCC;
float: left;
width: 1000px;
height: 45px;
}
#contenedor2 {
float: left;
height: 750px;
width: 1000px;
}
#noticiasindex {
float: left;
width: 500px;
height: 500px;
background-image: url(../imagenes/noticasindex.png);
}

#videosindex {
float: right;
width: 500px;
height: 500px;
background-image: url(../imagenes/videosindex.png);
}

#fotosindex {
background-color: #CCCCCC;
float: left;
width: 1000px;
height: 250px;
background-image: url(../imagenes/fotosindex.png);
}

#contenedor3 {
float: left;
width: 1000px;
height: 50px;
}
#copyright {
float: left;
width: 1000px;
height: 50px;
background-image: url(../imagenes/copyright.png);
}

.textoleft{
float: left;
width: 370px;
height: 100px;
font-family: Tahoma;
font-size: 12px;
line-height: 15px;
color: #000000;
background-color: #0099FF;
margin-top: 0px;
margin-bottom: -30px;
margin-right: 10px;
margin-left: 120px;
clear: left;

}

.textoright{
float: right;
width: 370px;
height: 100px;
font-family: Tahoma;
font-size: 12px;
line-height: 15px;
color: #000000;
background-color: #00CCCC;
margin-top: 75px;
margin-bottom: -30px;
margin-left: 120px;
margin-right: 10px;

}

.pictureleft{
float: left;
margin-top: 75px;
margin-left:: 5px;
margin-right: 10px;
margin-left: 10px;
height: 100px;
width: 100px;
}
  #7 (permalink)  
Antiguo 13/05/2011, 12:45
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

@charset "utf-8";
@import url("barmenu.css");
/* CSS Document */


#main{
height: 1091px;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #1C7474;

}#contenedor1 {
background-color: #006666;
height: 290px;
width: 1000px;
float: left;
}
#logo {
height: 245px;
width: 1000px;
float: left;
background-color: #999999;
background-image: url(../imagenes/logo.png);
}
#mainmenu {
background-color: #CCCCCC;
float: left;
width: 1000px;
height: 45px;
}
#contenedor2 {
float: left;
height: 750px;
width: 1000px;
}
#noticiasindex {
float: left;
width: 500px;
height: 500px;
background-image: url(../imagenes/noticasindex.png);
}

#videosindex {
float: right;
width: 500px;
height: 500px;
background-image: url(../imagenes/videosindex.png);
}

#fotosindex {
background-color: #CCCCCC;
float: left;
width: 1000px;
height: 250px;
background-image: url(../imagenes/fotosindex.png);
}

#contenedor3 {
float: left;
width: 1000px;
height: 50px;
}
#copyright {
float: left;
width: 1000px;
height: 50px;
background-image: url(../imagenes/copyright.png);
}

.textoleft{
float: left;
width: 370px;
height: 100px;
font-family: Tahoma;
font-size: 12px;
line-height: 15px;
color: #000000;
background-color: #0099FF;
margin-top: 0px;
margin-bottom: -30px;
margin-right: 10px;
margin-left: 120px;
clear: left;

}

.textoright{
float: right;
width: 370px;
height: 100px;
font-family: Tahoma;
font-size: 12px;
line-height: 15px;
color: #000000;
background-color: #00CCCC;
margin-top: 75px;
margin-bottom: -30px;
margin-left: 120px;
margin-right: 10px;

}

.pictureleft{
float: left;
margin-top: 75px;
margin-left:: 5px;
margin-right: 10px;
margin-left: 10px;
height: 100px;
width: 100px;
}
  #8 (permalink)  
Antiguo 13/05/2011, 12:46
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

Lo que quiero hacer es alinear la imagen que esta adentro de un div picture1 con la caja de texto que no es un div. Tal como se ve en el index. Espero haber sido más clarlo.
  #9 (permalink)  
Antiguo 13/05/2011, 13:02
 
Fecha de Ingreso: mayo-2011
Ubicación: sinaloa
Mensajes: 150
Antigüedad: 5 años, 8 meses
Puntos: 4
Respuesta: Imagenes y divs

sube una imagen o algo a un servidor para saber como lo necesitas

http://www.subirimagenes.com/

pones el link para ver como lo quieres
  #10 (permalink)  
Antiguo 13/05/2011, 13:35
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

No no sirve.

En algun momento pienso hacer al curso, para que me queden más clara las cosas.
  #11 (permalink)  
Antiguo 13/05/2011, 16:34
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 5 años, 11 meses
Puntos: 10
Respuesta: Imagenes y divs

pues en tu clase .textoleft quita los margenes q estan incorrectos y coloca esto:

margin: 75px 0 0 10px;

Suerte!
  #12 (permalink)  
Antiguo 13/05/2011, 18:13
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 6 años, 11 meses
Puntos: 23
Respuesta: Imagenes y divs

OK, no desesperes.
hace esto:

.textoleft {
background-color: #0099FF;
color: #000000;
font-family: Tahoma;
font-size: 12px;
height: 100px;
line-height: 15px;
margin-left: 120px;
margin-right: 10px;
margin-top: 75px;
width: 350px;
}

Asi te tiene que andar (fijate en todos los navegadores, yo no pude).
Espero tu respuesta.
  #13 (permalink)  
Antiguo 13/05/2011, 19:10
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

No che, sabes que no andubo. La imagen como la pongo antes del texto.
Porque cuando la imagen le class="picture", la coloca bien pero la caja de texto se va para abajo, no se si hay algo mal definido.
  #14 (permalink)  
Antiguo 13/05/2011, 19:12
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

<div id="contenedor2">
<div id="noticiasindex">
<img src="imagenes/cuadro100x100.png" class="pictureleft" />
<p class="textoleft">Contenido Noticias. Link 1.</p>
</div>
  #15 (permalink)  
Antiguo 13/05/2011, 20:17
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 6 años, 11 meses
Puntos: 23
Respuesta: Imagenes y divs

Cita:
Iniciado por jmb0286 Ver Mensaje
<div id="contenedor2">
<div id="noticiasindex">
<img src="imagenes/cuadro100x100.png" class="pictureleft" />
<p class="textoleft">Contenido Noticias. Link 1.</p>
</div>
Bueno, ahora si nos entendemos, yo estaba tratando de alinear el texto con la imagen, obvio que la imagen se te va ir para cualquier lado y el texto te va a quedar abajo de la misma, porque esta mal colocada, los <p> son elemnetos de bloque, tu imagen no tiene contenedor, esta suelta en el documento, te propongo hagas esto, la imagen no la coloques desde html, colocala desde css y algo muyyyy importante:Para poder controlar los elementos dentro de tu documento, los tenes que colocar dentro de divs, pensalo como si fueran contenedores de tus elementos que te permiten moverlos y hacer con ellos lo que quieras.

codigo html:

<div id="contenedor2">
<div id="noticiasindex">
<div class="pictureleft"></div>
<p class="textoleft">Contenido Noticias. Link 1.</p>
</div>

codigo css:
.pictureleft{
widht:100px;
height:100px;
position:absolute;
backgroung-image:url("imagenes/cuadro100x100.png");
background-repeat:no-repeat;
background-position:center;
top: xxpx;
left: xxpx;
}



Con esto deberias poder mover tu imagen, ojo no copies y pegues el codigo que te pase, ya que puede haber faltas de ortografia en las propiedades, chequealo con dreamweaver, tene en cuenta que de este modo vas a poder mover tu imagen con las coordenadas: top, left, right, bootom, no con margin.
Tene en cuenta que siempre tienes que tener un width y un height, que sea igual a las medidas de tu imagen, la imagen dice 100 x 100 asi que asumo que esa es la medida de la imagen, no hay chance esto te tiene que funcionar, sino avisame., ojo con tener mal escritas las propiedades en css!

Última edición por TEPO; 13/05/2011 a las 20:23
  #16 (permalink)  
Antiguo 13/05/2011, 20:26
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 6 años, 11 meses
Puntos: 23
Respuesta: Imagenes y divs

tene en cuenta que para que te funcione textoleft lo tenes que poner asi: El texto tampoco deberia estar suelto, sino dentro de un div, pero bueno.

.textoleft {
background-color: #0099FF;
color: #000000;
font-family: Tahoma;
font-size: 12px;
line-height: 15px;
position:absolute;
width: xxpx;
height: xxpx;
top: xxpx:
left:xxpx;
}

mmm, espero esntiendas, tenes muchos errores con css y como esta maquetado el documento, dificil arreglarlo, mejor hacerlo de nuevo, pero espero que te sirva.

Última edición por TEPO; 13/05/2011 a las 20:31
  #17 (permalink)  
Antiguo 14/05/2011, 02:02
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

Ok. Gracias nuevamente. Voy probarlo. Demoré en contestarte porque me había ido a lo de unos amigos. Y volvi rercien 4 de la mañana uruguay. Un saludo. Lo pruebo y te cuento.
  #18 (permalink)  
Antiguo 14/05/2011, 18:04
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

Creo que anduvo pero no se porque no respeta el div de picture no repeta
el margin-right: 10px, y el margin-left: 10px; entre y el puse al div noticiasindex position: relative, si le saco eso no funciona.

Ya subi de vuelta el index con el cambio para que veas. Un abrazo.
  #19 (permalink)  
Antiguo 15/05/2011, 10:23
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 6 años, 11 meses
Puntos: 23
Respuesta: Imagenes y divs

Para que tengas en cuenta, los elementos posicionados en static, los podes mover con margin, los elementos posicionados en relative, los podes mover con margin y coordenadas (top, right, left, bootom), los elementos posicionados en absolute, solo los moves con coordenadas-
Puede ser por eso que algunos elementos no se te mueven con margin, revisalo.
Saludos.
  #20 (permalink)  
Antiguo 15/05/2011, 15:26
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

No che, no se cual es el problema, pero no se alinean. No se
  #21 (permalink)  
Antiguo 15/05/2011, 15:27
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

<style type="text/css" media="all">
<!--
@import url("css/index.css");
body {
background-color: #333333;
}
-->
</style>
</head>

<body>
<div id="main">
<div id="contenedor1">
<div id="logo"></div>
<div id="mainmenu">
<ul class="barmenu">
<li><a href="index.html">INICIO</a></li>
<li><a href="html/musica.html">MÚSICA</a></li>
<li><a href="html/noticias.html">NOTICIAS</a></li>
<li><a href="html/fotos.html">MULTIMEDIA</a></li>
<li><a href="html/descargas.html">DESCARGAS</a></li>
<li><a href="html/blog.html">MI BLOG</a></li>
<li><a href="html/contacto.html">CONTACTO</a></li>
</ul>


</div>
</div>

<div id="contenedor2">
<div id="noticiasindex">
<div class="pictureleft" id="picture1"><img src="imagenes/cuadro100x100.png" width="100" height="100" /></div>

<p class="textoleft">Contenido Noticias. Link 1.</p>
<p class="textoleft">&nbsp;</p>
</div>

<div id="videosindex">

<p class="textoright">Contenido Video. Link 1.</p>
<p class="textoright">Contenido Video. Link 2.</p>
<p class="textoright">Contenido Video. Link 3.</p>
</div>
<div id="fotosindex"></div>
</div>

<div id="contenedor3">
<div id="copyright"></div>
</div>
</div>
</body>
</html>
  #22 (permalink)  
Antiguo 15/05/2011, 15:28
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

INDEX.CSS


@charset "utf-8";
@import url("barmenu.css");
/* CSS Document */


#main{
height: 1091px;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #1C7474;

}

#contenedor1 {
background-color: #006666;
height: 290px;
width: 1000px;
float: left;
}


#logo {
height: 245px;
width: 1000px;
float: left;
background-color: #999999;
background-image: url(../imagenes/logo.png);
}
#mainmenu {
background-color: #CCCCCC;
float: left;
width: 1000px;
height: 45px;
}
#contenedor2 {
float: left;
height: 750px;
width: 1000px;
position: relative;
}
#noticiasindex {
float: left;
width: 500px;
height: 500px;
background-image: url(../imagenes/noticasindex.png);
position: relative;
}

#videosindex {
float: right;
width: 500px;
height: 500px;
background-image: url(../imagenes/videosindex.png);
position: relative;
}

#fotosindex {
background-color: #CCCCCC;
float: left;
width: 1000px;
height: 250px;
background-image: url(../imagenes/fotosindex.png);
}

#contenedor3 {
float: left;
width: 1000px;
height: 50px;
}

#copyright {
float: left;
width: 1000px;
height: 50px;
background-image: url(../imagenes/copyright.png);
}


.textoleft{
float: left;
width: 365px;
height: 100px;
font-family: Tahoma;
font-size: 12px;
line-height: 15px;
color: #FFFFFF;
background-color: #1B7676;
margin-top: 101px;
margin-right: 10px;
margin-left: 124px;
clear: left;
margin-bottom: -80px;
position: static;

}

.textoright{
float: right;
width: 365px;
height: 100px;
font-family: Tahoma;
font-size: 12px;
line-height: 15px;
color: #000000;
background-color: #00CCCC;
margin-top: 101px;
margin-bottom: -80px;
margin-left: 123px;
margin-right: 10px;

}

.pictureleft{
float: left;
margin-top: 100px;


margin-left:: 5px;
margin-right: 10px;
margin-left: 10px;
height: 100px;
width: 100px;
background-repeat: no-repeat;
position: absolute;
left: 10px;
top: 0px;
right: 10px;
}
  #23 (permalink)  
Antiguo 28/05/2011, 14:04
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Imagenes y divs

hola, soy yo de vuelta. Como hago para el siguiente menu http://acceso-dirercto.net23.net/multimedia.html

deje de haber un espacio grande en cada item. Igual se que ese espacio es el margin-top: 124px; desd ya gracias.

Etiquetas: divs, imagenes
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 08:54.