Ver Mensaje Individual
  #7 (permalink)  
Antiguo 01/06/2008, 10:39
Avatar de plateado
plateado
 
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: iFrame en CSS

A eso me refiero, no usa ningun frameset supongo que lo hicieron utilizando CSS, y esa es la parte que no logro realizar, que mis demas enlaces me aparezcan en una parte derecha por ejeplo de mi página.

He estado investigando y encontre esto, le hice algunas modificaciones, subo el código porque no esta alojada en ningún sitio solo es un ejemplo de lo que quiero lograr hacer:

CODIGO CSS
================================================== =====================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
overflow:auto;
background-image: url();
background-color: #333333;
}
#Superior {
border-top-color:#FF9933;
position:absolute;
top:33px;
left:49px;
width:907px;
height:81px;
overflow:auto;
background-image: url(img24.jpg);
}
#Izquierda { position:absolute; top:116px; left:50px; width:190px; height:400px; overflow:auto; }
#Derecha {
position:absolute;
top:116px;
left:225px;
width:730px;
height:400px;
overflow:auto;
}

/*===================Menu lateral izquierdo============================*/
#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}

#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

</head>

<body>

<div id="Superior" style=" background-color:#D6EEFC">... contenido de la contenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaaja superior... </div>


<div id="Izquierda" style=" background-color:#DCDABE">
<div id="ddblueblockmenu">

<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
</ul>

<div class="menutitle">CSS Library</div>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>
</div>
</div>

<div id="Derecha" style="background-color:#FFFFFF">Mostrar el contenido de las direcciones laterales en esta parte ùnicamente </div>

</body>
</html>

================================================== =========================

Disculpen la molestia por favor, pero es que no logro encontrar nada para realizar este efecto.

Última edición por plateado; 01/06/2008 a las 10:50