Imagenes y divs

[jmb0286]

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.

[edwines]

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.

[jmb0286]

Ok. Voy a probarlo. Gracias.

[jmb0286]

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.

[TEPO]

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.

[jmb0286]

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

[jmb0286]

@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;
}

[jmb0286]

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.

[yoniti7784]

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

[jmb0286]

No no sirve.

En algun momento pienso hacer al curso, para que me queden más clara las cosas.

[omarMusic]

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

margin: 75px 0 0 10px;

Suerte!

[TEPO]

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.

[jmb0286]

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.

[jmb0286]

<div id="contenedor2">
<div id="noticiasindex">
<img src="imagenes/cuadro100x100.png" class="pictureleft" />
<p class="textoleft">Contenido Noticias. Link 1.</p>
</div>

[TEPO]

Iniciado por jmb0286

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

[TEPO]

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.

[jmb0286]

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.

[jmb0286]

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.

[TEPO]

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.

[jmb0286]

No che, no se cual es el problema, pero no se alinean. No se

[jmb0286]

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

[jmb0286]

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

[jmb0286]

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.