Entrar

¿CÓMO HAGO LO SGT. EN DIV CONTENIDO?

Ana Luisa · · Solicitar retirada
Hola a todos,

Deseo hacer en mi web algo como esto:

http://img515.imageshack.us/my.php?image=listaxx0.jpg

Ya Yaneth y Manmanu me han ayudado pero, no me sale igual. Algo debo estar haciendo mal o bien no sé cómo hacerlo. Lo que he hecho pueden verlo en mi web de prácticas:

todojazz.mywebcommunity.org/plantilla.html

He hecho y desecho y ya no doy con esto ni para adelante ni atrás. Necesito que, por favor, alguien me ayude, si fueran tan amables. Abajo, dejo toda la parte del div CONTENIDO de estilos.

No logro situar el texto en el centro de los recuadros (los que sí lo están, es porque puse align="center" dentro del código de la imagen en html, pero no sé si estará bien así. Tampoco logro que la imagen tenga su borde como sí se ve en la muestra y todas las imágenes aparecen muy pegadas y no como en la muestra.

Les agradeceré que me ayuden con esto porque a mí ya casi me sale humo de la cabeza. :cry:

#contenido {background-color:e1e1e1 ; border-left:black 1px solid ; border-right:black 1px solid}
#contenido p {margin:5px 10px 0px 10px ; text-indent:15px}

#menu {background-color:yellow ; width: 150px ; float:left ;
text-align:left ; margin:3px 10px 3px 3px ;
background-image:url(objetos/menu-parte-inferior.gif) ; background-position:bottom ;
padding-bottom:5px}
#menu li {list-style:none ; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12 ; background-image:url(objetos/menu-parte-superior.gif) ;
padding-top:12px}
a {color:brown ; text-decoration:none ; display:block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver}
a:active {}

#menucentral {width:400px; margin-right:150px ;}
#menucentral h2{padding-left:113px; text-align:left; height:25px; font:15px verdana, sans-serif;
border-bottom:e1e1e1 1px solid; display:block; background-color:555555; color:white;}
#menucentral li{list-style-type:none; text-align:left; font:11px verdana, sans-serif; border-bottom:e1e1e1 1px solid;}
#menucentral a.uno {color:white ; text-decoration:none ; display:block; background-color:969595 }
#menucentral a.uno:link {}
#menucentral a.uno:visited {}
#menucentral a.uno:hover {color:white ; text-decoration:underline ; background-color:afd472}
#menucentral a.uno:active {}

#menucentral a.dos {color:white ; text-decoration:none ; display: block; background-color:gray}
#menucentral a.dos:link {}
#menucentral a.dos:visited {}
#menucentral a.dos:hover {color:white ; text-decoration:underline ; background-color:afd472}
#menucentral a.dos:active {}


#pie {border-left:black 1px solid ; border-right:black 1px solid ;
border-top:black 1px solid ; height:65px}
manmanu · · Solicitar retirada
Hola Ana luisa, hola lingkl,
que tal estamos!!!!!

Perdona que meta amigo,
Ana te estamos preparando unos ejemplos, lo que pasa que lleva un poco de tieempo.En uno de los ejemplos previos que te pongo, de lo hecho hasta ahora, el color :hover con internet explorer no va, de momento.

Copia y pega en un achivo de texto por separado el 1º y el 2º.
Cambiale la extensión .txt por .html, ejecutalos y lugo lo vamos mejorando.
Con un poco de tiempo !!!Valeee...!!!!

Espero te guste.
El que tú pusiste en un post, está creado mediente
  • , en ñlos que te pongo lo estamos creando mediante<div>.Ya lo terminaremos.

    Prueba el gris en Firefox,opera o nestcape.
    Quita en img la direcció web de las imagenes y ponle la de tu ruta de archivos.
    Luego los arreglamos entre todos !!!Valeeee....!!!!

    Saludos a todos

    Bueno hay van;
    1ª ejemplo Gris para firefox,luego arreglamos ésto para I.explorer
    <style type="text/css" media="all" >
<!-- 
#todoslosdiv{float: left; width:400px; height:320px;border:#0000CC solid 1px;}
#todoslosdiv a{ color:#FFFFFF; text-decoration:none;}
#todoslosdiv a:hover { background-color:#a2cd5a; text-decoration:none;}
#uno:hover, #dos:hover,#tres:hover,#cuatro:hover,#cinco:hover,#seis:hover{ background-color:#a2cd5a; text-decoration:none;}
#todoslosdiv a:active { color: #FF6600; text-decoration:none;}
#altillo{float: left; width:400px; height:20px; background-color:#555555}
#uno,#dos,#tres,#cuatro,#cinco,#seis{ font-family:Geneva, Arial, Helvetica, sans-serif}


#uno,#tres,#cinco{float:left;margin-left:0px; width:400px; height:50px; background-color: #999999}
uno a.uno{ background-color:#a2cd5a }
#dos,#cuatro,#seis{float:left;margin-left:0px; width:400px; height:50px; background-color:#555555}
dos.a:hover{ background-color:#a2cd5a}



.centrado{float:left; margin: 0px 0px 0px 0px;}

.Estilo1 { color:#FFFFFF; font-size:12px; font-weight:bold;text-align:left;margin: 19px 0px 0px 175px}

-->
</style>


<div id="todoslosdiv">
<div id="altillo"></div>
<div id="uno">[img]http://todojazz.mywebcommunity.org/objetos/rectangulo.jpg[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum13.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="dos">[img]http://todojazz.mywebcommunity.org/objetos/rectangulo.jpg[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum14.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="tres">[img]http://todojazz.mywebcommunity.org/objetos/rectangulo.jpg[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum24.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="cuatro">[img]http://todojazz.mywebcommunity.org/objetos/rectangulo.jpg[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum29.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="cinco">[img]http://todojazz.mywebcommunity.org/objetos/rectangulo.jpg[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum29.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="seis">[img]http://todojazz.mywebcommunity.org/objetos/rectangulo.jpg[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum29.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>




</div>

    2º ejemplo Azules para todos los navegadores
    <style type="text/css" media="all" >
<!--
#todoslosdiv{float: left; width:300px; height:220px;border:#0000CC solid 1px;}
#todoslosdiv a{ color:#FFFFFF; text-decoration:none;}
#todoslosdiv a:hover { color: #000066; text-decoration:none;}
#todoslosdiv a:active { color: #FF6600; text-decoration:none;}
#uno,#dos,#tres,#cuatro{ font-family:Geneva, Arial, Helvetica, sans-serif}
#uno,#tres{float:left;margin-left:0px; width:300px; height:55px; background-color:#94BCF8}
#dos,#cuatro{float:left;margin-left:0px; width:300px; height:55px; background-color:#0066CC}
.centrado{float:left; margin: 7px 0px 0px 20px;}
.Estilo1 { color:#FFFFFF; font-size:12px; font-weight:bold;text-align:left;margin: 19px 0px 0px 95px}

-->
</style>


<div id="todoslosdiv">
<div id="uno">[img]http://perso.gratisweb.com/reparacion_de_rines/objetos/yan.gif[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum13.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="dos">[img]http://perso.gratisweb.com/reparacion_de_rines/objetos/yan.gif[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum14.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="tres">[img]http://perso.gratisweb.com/reparacion_de_rines/objetos/yan.gif[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum24.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>
<div id="cuatro">[img]http://perso.gratisweb.com/reparacion_de_rines/objetos/yan.gif[/img]<p class="Estilo1">[url="http://www.comocreartuweb.com/phpBB2/forum29.html"]Aqu&iacute; t&uacute; texto preferido[/url]</p></div>

</div>
    • Ana Luisa · · Solicitar retirada
    Hola Linkgl,

    qué bueno que respondiste!!! voy a abrir un nuevo enlace y allí quiero poner ese listado en el lado izquierdo, tendrá aprox. 500px ancho. Ese listado casi ocupará toda la página, eso sospecho.

    Estoy viendo la alternativa que me está dando Manmanu pero la veo un poquito tranca. Más fácil está la forma que me enseño Yaneth que es la que he hecho.

    Recibe un saludo en la distancia y otro para Manmanu, nuevamente estoy con los misiles recargados. :lol: :lol: :lol:
    Ana Luisa · · Solicitar retirada
    Gracias por responderme,

    estoy viendo tus códigos, créeme voy a ver todas las maneras posibles para hacer el listado ya que hay varias para hacer una misma cosa. Aquí yo solo tengo el IE ver. 7. En el Perú, lo tenemos casi el 90% de la población; por los colores, no te preocupes, eso es lo de menos, creo que lo importante es saber la técnica. El netscape ya no existe, ese cerró creo que a comienzos de año. Nos leemos!!! :lol: :lol: :lol:
    linkgl · · Solicitar retirada
    Bien debido a mi ausencia en el foro creo que no eh estado al tanto de lo que pasa por lo cual no vi el otro post de ayuda por lo que se me complica ayudar bueno segun entiendo quieres alinearlo a la izquierda?? si es asi solo create un div que cubra el menu junto con el listado de imagenes, de esta manera pon dentro el menu y las imagenes y ponle un float left con lo que se alineará a la izquierda

    si no es esto lo que quieres dime de nuevo que necesitas soy malo leyendo xD
    Ana Luisa · · Solicitar retirada
    Hola compañeros,

    Estoy muy contenta porque ya me salió lo que quería. El resultado, si gustan, se puede ver en:

    http://todojazz.mywebcommunity.org/plantilla.html

    Mi gratitud a Yaneth, Manmanu y Linkgl que me respondieron. Solo resta un pequeño problemita: Si se escribe más de una línea, el texto aparece debajo de la imagen y no en el campo de texto. Eso se puede ver en mi web. ¿Cómo se podría solucionar ese impasse???

    Saludos :lol: :lol: :lol: