Que tal gente como va???.
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> Siempre sigo el foro... y me gustaria, (seria importante), saber que opinan de la portada de la futura web??? ja ja espero poder hacer andar!!!
PD:. Si alguien quiere le paso toda la paguina, via mail!!!, son unos 240Kb.