Foros del Web » Creando para Internet » CSS »

div para contenido de la pagina

Estas en el tema de div para contenido de la pagina en el foro de CSS en Foros del Web. Estimados; Recurro a ustedes por el siguiente problema, la verdad que soy nuevo, y quiero hacer lo siguiente para un proyecto de la U. tengo ...
  #1 (permalink)  
Antiguo 27/06/2011, 10:34
Avatar de lagunillano  
Fecha de Ingreso: abril-2011
Ubicación: Santiago de Chile, Dominican Republic
Mensajes: 16
Antigüedad: 5 años, 11 meses
Puntos: 1
div para contenido de la pagina

Estimados;

Recurro a ustedes por el siguiente problema, la verdad que soy nuevo, y quiero hacer lo siguiente para un proyecto de la U.

tengo una pagina que estoy construyendo con CSS he logrado insertar todo lo que quiero en sus lugares correctos, pero no se como se hace para que por ejemplo al momento de yo hacer click en un meno el contenido de este menu se me muestre en la misma pagina,al lado del menu( la idea es que me va a mostrar formularios o grillas. se como redireccionar los menu y todo pero repito nuevamente no se como mostrar la informacion dentro de la misma pagina index.

adjunto los codigos para que le hechen una mirada

Index

<!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=utf-8" />
<title>Untitled Document</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="jquery-ui-1.8.13/jquery-1.5.1.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
$(function(){
$('#menu li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
</script>

</head>

<body>

<div class="estilos" id="web">
<div class="estilos" id="header"></div>
<div class="estilos" id="top"></div>

<ul id="menu">
<li><a href="#">Inicio</a>
<ul>
<li><a href="www.google.cl">Quienes Somos</a></li>
<li><a href="#">Mision</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Historia</a></li>
</ul>
</li>

<li><a href="#">Buscar</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu sin submenu</a></li>
</ul>



</div>

</body>
</html>




aqui los css

@charset "utf-8";
.estilos {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
text-decoration: underline;
}

body
{background-image:url(imagen/fondo.png);
background-repeat:no-repeat;
background-position:center;
margin-top:50px;
}


#header{
background-image:url(imagen/head.png);
text-align: center;
margin: 0 auto;
width:1100px;
height:250px;
padding:2px;
padding-left:inherit;
padding-right:40pz;
padding-top:1px;
}

#web{
width:1100px;
margin: 0 auto;
}
//*******menu jquery*********//


#menu{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 3px #888;
-moz-box-shadow:1px 1px 3px #888;


}
#menu li{border-bottom:1px solid #FFF;}
#menu ul li, #menu li:last-child{border:none}
a{
display:block;
color:#FFF;
text-decoration:none;
font-family:'Helvetica', Arial, sans-serif;
font-size:13px;
padding:3px 5px;
text-shadow:1px 1px 1px #325179;
}
#menu a:hover{
color:#F9B855;
-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#6594D1;}
#menu ul a:hover{
background-color:#FFF;
color:#2961A9;
text-shadow:none;
-webkit-transition: color, background-color 0.2s linear;
}
ul{
display:block;
background-color:#2961A9;
margin:0;
padding:0;
width:130px;
list-style:none;

}
#menu ul{background-color:#6594D1;}
#menu li ul {display:none;}

/***************top menu***************/

#top
{
background-image:url(imagen/top2.jpg);
width: 1103px;
height:30px;
margin: 0 auto;
text-align: center;



por favor les agradesco mucho la ayuda desde ya muchas gracias


saludos,

francisco
  #2 (permalink)  
Antiguo 27/06/2011, 10:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: div para contenido de la pagina

Se conoce como navegación por pestañas o tabs
Tabs css
Aunque en sitios de "produccion" suelen hacer uso de algo de javascripts (generalmente):
http://www.google.es/search?q=tabs+javascript

Etiquetas: contenido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:16.