Foros del Web - Ver Mensaje Individual

southern · #3 (**permalink**) 20/06/2012, 17:13

Adjunto el código pues :)

CSS:

Código:

body {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: black;
	background-color: white;
	
	}





#Contenedor { width: 100%; height: 100%; }

#Superior { position: absolute; top:0; left:0; width:90%; height:14%; overflow:auto; }

#Pubi   {   position: absolute; top: 15%; left: 0; width: 20%; height:81%; overflow:hidden;  }

#Banner {   position: absolute; top: 9%; left: 16%; width:68%; height:5%; overflow: auto;  }

#Ppal   {   position: absolute; top: 15%; left:16%; width:55%; height:71%; overflow: auto; z-index: -1; padding-left: 50px;  }

#Auxi   {   position: absolute; top: 14%; left:61%; width:23%; height:71%; overflow: auto; padding-top: 1%; }

#Pubd   {   position: absolute; top: 15%; left: 85%; width: 15%; height: 81%; overflow:auto; color: #07a747; }

#Pie   {   position: absolute; top: 96%; left:16%; width:68%; height: 4%; overflow: auto; text-align: center; }

index.php

Código:

<html>
<head>
<title>Nutrici&oacute;n A La Carta</title>
<link rel="stylesheet" type="text/css" href="layout.css" />


</head>
<body>

<div id="Contenedor">

<div id="Superior"><img src="logo.png" height="100%" /></div>

<div id="Pubi"> 

<p>.</p><p><?php include("menu.html"); ?></p>

</div>

<div id="Pubd"><b>&Uacute;ltimas Novedades</b><br/><br/>Bla Bla Bla<br/><br/>Bla Bla Bla<br/><br/>Bla Bla Bla<br><br/><img src="fb.png"/><img src="twitter.png"/><img src="youtube.png"/> </div>

<div id="Ppal">


<h1 style="color: #07a747;">Inicio</h1>
<p style="text-align: justify;">Bienvenidos a este peque&ntilde;o rinc&oacute;n dedicado a la salud, y en concreto a la nutrici&oacute;n. En el encontramos conocimientos, actualidad y un servicio personalizado.</p>
<p style="text-align: justify;">Mi carrera profesional se ha desarrollado en &aacute;mbitos muy dispares entre s&iacute;, pero todos con un nexo en com&uacute;n, la alimentaci&oacute;n, lo que me ha permitido seguir creciendo como profesional.</p>
<p style="text-align: justify;">Son varios los motivos que me han impulsado a crear este servicio, pero podemos destacar dos principales. </p>
<p>Por un lado, el amplio conocimiento que existe sobre el campo de la nutrici&oacute;n, y aun contin&uacute;a expandi&eacute;ndose gracias a los diferentes estudios que se llevan a cabo y a los profesionales que se dedican ello. Uno de los objetivos de esta web es mantenerse al d&iacute;a sobre todos los hallazgos y actualidades que tienen que ver con la nutrici&oacute;n, y siempre sobre una base cient&iacute;fica. &iexcl;Se acabaron los falsos mitos!</p>
<p>Y por otro lado, llevar todos estos conocimientos a la pr&aacute;ctica con ustedes en sus casas o empresas. Adem&aacute;s de la ventaja y comodidad que conlleva un servicio a domicilio, este es personalizado, ofreciendo diferentes servicios para cubrir sus necesidades. </p>
<p>Ahora si les he dejado con la miel en los labios, les invito a que conozcan en detalle mi p&aacute;gina web y se pongan en contacto conmigo.</p>
<p><b>TODAS LAS DIETAS SE PUEDEN ADAPTAR EN MENOR O MAYOR MEDIDA A LOS DIFERENTES COMENSALES.</b></p>




</div>

<div id="Pie">Pie de p&aacute;gina. El verde es: #07ba21</div>

Y lo siguiente es una buena pedrada de código, espero que se pueda ver bien:

menu.html :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="all" />
<title>jQuery Vertical Mega Menu Plugin v 1.1</title>
<link href="css/vertical_menu_basic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.1.js'></script>
<script type="text/javascript">
$(document).ready(function($){
	$('#mega-1').dcVerticalMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'slide',
		direction: 'right'
	});
});
</script>
</head>
<body>
<div class="wrap">
<div class="demo-container clear">
<div class="dcjq-vertical-mega-menu">
<ul id="mega-1" class="menu">
<li id="menu-item-0"><a href="#">Home</a></li>
<li id="menu-item-1"><a href="#">Dietas</a>
<ul>
<li id="menu-item-4"><a href="#">Control de Peso</a>
<ul>
<li id="menu-item-19"><a href="#">Adelgazamiento</a></li>
<li id="menu-item-20"><a href="#">Coger Peso</a></li>
<li id="menu-item-21"><a href="#">Mantenimiento</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">Para Distintas Etapas</a>
<ul>
<li id="menu-item-25"><a href="#">Ni&ntilde;os Lactantes<br/> (0-6 meses)</a></li>
<li id="menu-item-26"><a href="#">Ni&ntilde;os Lactantes<br/> (6-12 meses)</a></li>
<li id="menu-item-27"><a href="#">Ni&ntilde;os</a></li>
<li id="menu-item-27"><a href="#">Adolescentes</a></li>
<li id="menu-item-27"><a href="#">Edad Avanzada</a></li>
<li id="menu-item-27"><a href="#">Lactancia</a></li>
<li id="menu-item-27"><a href="#">Menopausia</a></li>
<li id="menu-item-27"><a href="#">Deportistas</a></li>

</ul></li>
<li id="menu-item-7"><a href="#">Espec&iacute;ficas</a>
<ul>
<li id="menu-item-28"><a href="#">Diab&eacute;ticos</a></li>
<li id="menu-item-29"><a href="#">Cardiovasculares/Dislipemias</a></li>
<li id="menu-item-30"><a href="#">Hipertensi&oacute;n Arterial</a></li>
<li id="menu-item-28"><a href="#">Obesidad</a></li>
<li id="menu-item-29"><a href="#">Anemias</a></li>
<li id="menu-item-30"><a href="#">Osteoporosis</a></li>
<li id="menu-item-28"><a href="#">Alergias e Intolerancias</a></li>
<li id="menu-item-29"><a href="#">Patolog&iacute;as Digestivas</a></li>
<li id="menu-item-30"><a href="#">Patolog&iacute;as Renales</a></li>
<li id="menu-item-28"><a href="#">Enfermedades Hep&aacute;ticas</a></li>
<li id="menu-item-29"><a href="#">Enfermedad Pulmonar Obstructiva</a></li>
<li id="menu-item-30"><a href="#">Vegetarianos</a></li>
</ul></li>


</li>


</ul>
<li id="menu-item-0"><a href="#">T&eacute;cnicas Culinarias</a></li>
<li id="menu-item-0"><a href="#">Juegos</a></li>
<li id="menu-item-0"><a href="#">Ejercicios F&iacute;sicos</a></li>
</li>






<li id="menu-item-3"><a href="#">Empresas</a>
<ul>
<li id="menu-item-47"><a href="#">Colegios</a></li>
<li id="menu-item-48"><a href="#">Residencias</a></li>
<li id="menu-item-47"><a href="#">Empresas e Instituciones</a></li>
<li id="menu-item-48"><a href="#">Cursos</a></li>
<li id="menu-item-47"><a href="#">Charlas Instructivas</a></li>
<li id="menu-item-48"><a href="#">Visita de Sanidad</a></li>
<li id="menu-item-47"><a href="#">Organizaci&oacute;n de Trabajo</a></li>
<li id="menu-item-48"><a href="#">Talleres</a></li>
</ul></li>

<li id="menu-item-0"><a href="#">Actualidad</a></li>
<li id="menu-item-0"><a href="#">Videos</a></li>
<li id="menu-item-0"><a href="#">Formaci&oacute;n</a></li>
<li id="menu-item-0"><a href="#">Contacto</a></li>





</ul>
</div>
</div>
</div>
</body>
</html>

Cualquier cosilla que te pueda aclarar me lo dices a ver si entre los dos lo conseguimos :)

Un saludo y gracias por tomarte el tiempo de contestar!