09/02/2009, 13:24
|
| | | Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 15 años, 2 meses Puntos: 4 | |
| Respuesta: Como centrar izzymenu
Código HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http(dos puntos)//www(punto)w3(punto)org/TR/xhtml11/DTD/xhtml11(punto)dtd">
<html xmlns="http(dos puntos)//www(punto)w3(punto)org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>El titulo</title>
<link href="estilo/estilos.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="estilo/noprint.css" rel="stylesheet" type="text/css" media="print"/>
<link href="estilo/menu.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="scripts/chrome.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.bgpos.js"></script>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body onload="window.defaultStatus='Teléfono: +(000)(00)000 Cel: 00 - Mail: mail(arroba)mail(punto)com - Ciudad - Pais';return true">
<div class="nover"> <!--Para que no se pueda imprimir la página-->
<div id="pagina" class="singlecol">
<div id="cabecera">
</div>
<div id="MainMenu"> <!--Menu-->
<div id="tab">
<ul>
<li><a href="home.html"><span>Inicio</span></a></li>
<li><a href="about.html"><span>Objetivos</span></a></li>
<li><a href="contact.html"><span>Blog</span></a></li>
<li><a href="subpage.html"><span>Contáctenos</span></a></li>
</ul>
</div>
</div>
<div class="divisor">
</div>
<div id="izquierda"> <!-- DIV que contiene las preguntas del costado izquierdo -->
<!--Creo las lista con las preguntas-->
<ul>
<li><a href="contenido/preferirnos html">¿Por qué preferirnos?</a></li>
<li><a href="contenido/hacemos html">¿Qué hacemos exactamente?</a></li>
<li><a href="contenido/esperar html">¿Qué puede esperar de nuestro trabajo?</a></li>
</ul>
<!--Inserto el flash-->
<div id="swf"><object type="application/x-shockwave-flash" data="flash/presentacion.swf" height="267" width="200"><param name="movie" value="flash/presentacion.swf"></object>
</div>
</div>
<div id="derecha"> <!-- Columna de la derecha, donde están las explicaciones -->
<p><img class="alignleft" src="images/arroba.jpg" alt="Esfera del mundo con arroba"/><b class="marketec">compañía</b> texto.</p>
<p>texto <img class="alignright" src="images/clientes.jpg" alt="clientes"/> texto.</p>
</div>
<!--Limpio los floats-->
<div class="divisor">
</div>
<!--Abro el footer-->
<div id="footer">
<p><a href="http(dos puntos)//validator(punto)w3(punto)org/check?uri=referer"><img class="center" src="http(dos puntos)//www(punto)w3(punto)org/Icons/valid-xhtml11-blue" alt="XHTML 1.1 válido" height="31" width="88" /></a></p>
<p><a href="http(dos puntos)//jigsaw(punto)w3(punto)org/css-validator/"><img class="center" src="http(dos puntos)//jigsaw(punto)w3(punto)org/css-validator/images/vcss-blue" alt="¡CSS Válido!"/></a></p>
<p>Designed by: <b class="marketec">compañia</b> 2009.</p>
</div>
</div> <!--Cierro el DIV página-->
</div> <!--Cierro el DIV no ver-->
<script type="text/javascript">
jQuery(function(){
jQuery("#tab a")
.css( {backgroundPosition: "right 0"} )
.mouseover(function(){
jQuery(this).stop().animate({backgroundPosition:"(right -27px)"}, {duration:400})
})
.mouseout(function(){
jQuery(this).stop().animate({backgroundPosition:"(right 0)"}, {duration:400})
})
jQuery("#tab a span")
.css( {backgroundPosition: "left 0"} )
.mouseover(function(){
jQuery(this).stop().animate({backgroundPosition:"(0 -27px)"}, {duration:400})
})
.mouseout(function(){
jQuery(this).stop().animate({backgroundPosition:"(left 0)"}, {duration:400})
})
});
</script>
</body>
</html>
El código CSS:
Código:
@charset "utf-8";
/* Hoja de estilos */
body {background:#39F;
font-size:100%;
color:#171717;
background-color:#051F49; /*Color de fondo de la página*/
text-align:center;
margin:0;
padding:0;
}
.marketec{color:#06C;
font-size:110%;
}
.espacio{padding:0 0 0 20px;}
img.alignleft {float: left;
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
img.center {
display: block;
margin: auto;
}
img.alignright {float: right;
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
/*Página central blanca*/
#pagina { /*Este es el contenedor blanco que se ve de fondo*/
background-color:white;
text-align:left;
background:url(../images/fondo.jpg) repeat-y top; border:none;
margin: 0 auto;
padding: 0px;
width: 742px;
}
#pagina.singlecol { /*Clase*/
background-image:url(../images/fondo.jpg);
}
#cabecera {margin:0;
padding:0;
height:300px; /*alto de la imagen de cabecera*/
width:742px; /*ancho de la cabecera*/
background:url(../images/cabecera.jpg) no-repeat bottom center #051F49;
}
#footer {background:url(../images/tecnologia.jpg) center no-repeat;
width:742px;
line-height:300%;
text-align:center;
font-size:0.8em;
}
#content {font-size:1.2em;
}
#izquierda{/*line-height:1.6em; /*Columna izquierda*/
font-family:"Times New Roman", Times, serif;
width:200px;
float:left;
margin:auto;
}
#izquierda ul{margin:0 0 0 20px;
padding-left:0;
}
#izquierda li{margin:2px;
padding:2px;
border:1px solid #CCCCCC;
list-style:none;
}
#izquierda li a{display:block; /*Convertimos el vínculo en un bloque.*/
padding:4px 0;
text-decoration:none;
font-size:0.8em;
color:#333333;
background-color:white;
font-family:"Lucida Grande",Verdana,Arial,Sans-Serif;
font-weight:bold;
line-height:normal;
border-left:10px solid #330; /*Agrego un borde ancho a la izquierda*/
padding-left:10px;
}
#izquierda li a:hover {border-left:10px solid #051F49;
}
#derecha {/*Columna derecha*/
font-family:"Lucida Grande",Verdana,Arial,Sans-Serif;
margin:0 0 0 225px;
width:480px;
background:white;
text-align:justify;
line-height:140%;
padding:10px 0 10px 0;
}
#derecha h1{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:left;
font-size:1.6em;
border-bottom:#051F49 solid;
}
#derecha img {border:#051F49 double;
padding: 5px 5px;
margin: 10px 10px;
}
.divisor{clear:both;}
#swf {width:200px; height:267px; padding:0 0 0 20px;}
El código de menú.css ya lo he puesto en un post anterior.
Gracias |