Bueno persento mi problema...
Estoy armando una pagina, en la cual quiero usar border redondeado, encontre en una web una manera de hacerlo, tome el codigo y lo adapte... [Son mis primeros bordes redondeado, pero los creditos van para su creador original.], la cuestion es que cuendo comienzo a querer insertar mas div dentro de los div que contienen las imagenes de los bordes, las cosa no sale como yo quiero!!!, a continuacion muestro una imgen de lo que me queda, e indico donde quiero que valla el div en rojo!!!, mas abajo dejo el codigo, e leido, probado pero algo esta mal, no puedo poner el div donde yo quiero, sin que se me desarme todo!!!
Espero me ayuden desde ya muchas gracias.
El Codigo!!! [Perdon, si hay cosas mal hechas!!!]...
Código HTML:
<html> <head> <title>Arara'a Yagua</title> <style type="text/css" media="screen"> *{ border: 0px; padding: 0px; outline: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 25px; } body{ background-image: url(bosque.jpg); background-position: 0% 0%; background-repeat: repeat-x; background-attachment: scroll; background-color: #882f05; } div.top { /* La altura es de 28 píxeles ya que ese es el espacio que ocupa nuestra imagen de esquina. */ height: 28px; background-image: url(top_line.gif); background-repeat: repeat-x; border: 0px solid #00AA00; padding: 0px 0px 0px 0px; } img.esquina_sup_izq{ float: left; } img.esquina_sup_der{ float: right; } #contenedor{ position: relative; top: 25px; text-align: center; width: 861px; background-color: #FFFFFF; margin: auto; padding: 0px 0px 0px 0px; opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); } div.content { background-image: url(left_line.gif); background-repeat: repeat-y; } div.boxcontrol { padding-left: 30px; background-image: url(right_line.gif); background-position: right; background-repeat: repeat-y; } #contenedor #cabecera{ position: reletive; width: 800px; height: 150px; border-bottom: 0px solid #CCFFCC; background-image: url(bannersuperior.jpg); } #info{ background-image: url(f_tv.gif); width: 800px; text-align: right; } #contenedorinterno{ position: relative; width: 800px; background-color #000099; border: 1px solid #00AA00; } #contenedorinterno #menu{ position: inherit; width: 177px; text-align: center; background-color: #000000; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); border: 1px solid #FF0000; } #menu #lista{ margin-left: 17px; /*aca doy, margenen*/ } #menulateral a{ display: block; /*Muestro un bloque al elemento de la lista*/ height: 28px; background-color: #555555; /*algo de color al fondo*/ color: #FFFFFF; /*Color para el texto*/ width: 160px; /*defino el ancho del rectangulo del vinculo*/ text-decoration :none; /*elimino el subrayado del vínculo*/ font-weight :bold; list-style-image: url(vineta_roja.jpg); } #menulateral a:hover { background-color: #A7D772; /*decoración para el evento hover (mouse encima)*/ color: #000000; text-transform: uppercase; /*decorare los vinculos en mayusculas*/ text-align: center; } #contenedorinterno #datos{ width: 150px; text-align: center; background-color: #FF0000; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); } div.bottom { height:28px; background-image:url(btm_line.gif); background-repeat: repeat-x; } img.esquina_inf_izq { float:left; } img.esquina_inf_der { float:right; } </style> <!--- Probendo AJAX --> <script type="text/javascript" language="javascript"> var READY_STATE_UNINITIALIZED=0; var READY_STATE_LOADING=1; var READY_STATE_LOADED=2; var READY_STATE_INTERACTIVE=3; var READY_STATE_COMPLETE=4; var peticion_http; function cargaContenido(url, metodo, funcion) { peticion_http = inicializa_xhr(); if(peticion_http) { peticion_http.onreadystatechange = funcion; peticion_http.open(metodo, url, true); peticion_http.send(null); } } function inicializa_xhr() { if (window.XMLHttpRequest) { // Mozilla, Safari, ... return new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE return new ActiveXObject("Microsoft.XMLHTTP"); } } function muestraMensaje() { if(peticion_http.readyState == READY_STATE_COMPLETE) { if (peticion_http.status == 200) { //alert(peticion_http.responseText); var capa=document.getElementById("prueba"); var contenido=''; contenido +='<p>Esto se modifico via ajax???</p>'; contenido +=peticion_http.responseText; alert(contenido); //capa.innerHTML=contenido; } } } function muestraContenidosa() { cargaContenido("http://localhost/ajax/holamundo.txt", "GET", muestraMensaje); } function muestraContenidosb() { cargaContenido("http://localhost/ajax/chaumundo.txt", "GET", muestraMensaje); } function muestraContenidosc() { cargaContenido("http://localhost/ajax/imagen.txt", "GET", muestraMensaje); } window.onload = muestraContenidosb; </script> </head> <!-- Aca comienza el doccumento HTML--> <body> <div id="contenedor"> <div id="top" class="top"> <img src="top_left.gif" alt="Esquina superior izquierda" class="esquina_sup_izq"/> <img src="top_right.gif" alt="Esquina superior derecha" class="esquina_sup_der"/> </div> <div id="content" class="content"> <div id="boxcontrol" class="boxcontrol"> <div id="cabecera"></div> <div id="info"><p>Arara'a Yagua [Eco Turismo] Puerto Iguazu - Misiones - Argentiana -</p></div> <div id="contenedorinterno"><!-- Aca Empieza el Div que contiene la informacion interna--> <div id="menu"><!-- Aca Empieza el Div que contiene el menu!!!--> <ul id="lista"> <li id="menulateral"><a href="#" onclick="javascript:muestraContenidosa()">Arara`a Yagua</a></li> <li id="menulateral"><a href="#" onclick="javascript:muestraContenidosb()">Fotos</a></li> <li id="menulateral"><a href="#" onclick="javascript:muestraContenidosc()">Ecoturismo</a></li> <li id="menulateral"><a href="#" onclick="javascript:muestraContenidosc()">Referencias</a></li> <li id="menulateral"><a href="#" onclick="javascript:muestraContenidosc()">Libro de Visitas</a></li> <li id="menulateral"><a href="#" onclick="javascript:muestraContenidosc()">Contactenos</a></li> </ul> </div><!-- Aca Finaliza Div que contiene el menu!!!--> <div id="datos"><p>Para poder mostrar la informacion.....</p></div> </div> <!-- Aca Finaliza el Div que contiene la informacion interna--> <div id="prueba"></div> </div> <!-- Fin del div boxcontrol --> </div> <!-- Fin del div content--> <div id="bottom" class="bottom"> <img src="btm_left.gif" alt="Esquina inferior izquierda" class="esquina_inf_izq" /> <img src="btm_right.gif" alt="Esquina inferior derecha" class="esquina_inf_der" /> </div> </div> </body> </html>
PD:. Si alguien quiere le paso toda la paguina, via mail!!!, son unos 240Kb.
