Hola amigos:
Mi problema es el siguente, estoy comenzando con esto de diseñar páginas
buscando, di con un menu que me gustó, al cual quise agregarle una imagen corporativa arriba, el tema es que no se ajustan al tamaño de la ventana.
La barra de menu ni el banner llegan al final...¿Me explique bien?
Estoy usando una hoja de estilo, de a poco voy averiguando como funciona, como información adicional, estoy ocupando iexplorer 8
¿ Alguién me podria guiar en como hacerlo?
adjunto código e imagen de como se ve
De antemano gracias y salu2.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="menu.aspx.vb" Inherits="Default2" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
---------------------MENU.ASPX-----------------------------------------------------
<!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>
<title>Pagina de Prueba SVTI</title>
<link href="imagenes/svti_icon.ico" type="image/x-icon" rel="shortcut icon" />
<link href="Styles/menu.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" ></style>
</head>
<body>
<div id="uno">
<img class="foto" src="http://localhost:3149/WebSite2/imagenes/bannerInt.gif" />
</div>
<form id="form1" runat="server">
<ul class="menu2">
<li class="top"><a href="#" id="telmex" class="top_link"><span class="down">SVTI</span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="sub">
<li><a href="http://www.svti.cl/">Acerca de Nosotros</a></li>
<li><a href="#">Normas</a></li>
<li><a href="#">Código de Etica</a></li>
<li><a href="#">Historia</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]--></li>
<li class="top"><a href="#" id="telmex" class="top_link"><span class="down">Dpto Sistemas</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="sub">
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]--></li>
<li class="top"><a href="#" id="telmex" class="top_link"><span class="down">Mision</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="sub">
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]--></li>
<li class="top"><a href="#" id="telmex" class="top_link"><span class="down">Vision
</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="sub">
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]--></li>
</ul>
<!-- FIN MENU-->
</div>
<div style="width: 100px; height: 28px">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<div id="contenedor">
<div id="centro">
<img src="imagenes/im01.jpg" />
</div>
</div>
</form>
</body>
</html>
--------------HOJA DE ESTILO------------------------
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#marco {
width:455px;
margin:10px 0;
padding:0px;
text-align:left;
}
.derecha {
float: right;
}
.izquierda {
float: left;
margin-top: 74px;
}
img.foto
{
border: 0px solid #000;
width: 1000;
/*height:280px;*/
background-repeat:repeat-x;
}
.preload2
{
background: url('../imagenes/button4a.gif');
}
.menu2 /*imagen general del menu*/
{
padding: 0;
margin: 0;
height: 25px;
background: #fff url('../imagenes/nav_bg.png') repeat-x;
position: relative;
font-family: arial, verdana, sans-serif;
list-style-type: none;
top: -1px;
left: -9px;
}
.menu2 li.top
{
display:block;
float:left;
position:relative;
}
.menu2 li a.top_link /*texto inicio de menu*/
{
display: block;
float: left;
height: 25px;
margin-left: 6px;
line-height: 25px;
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
font-weight: bold;
padding: 0 0 0 6px;
cursor: pointer;
}
.menu2 li a.top_link span
{
float:left; display:block;
padding:0 10px 0 6px;
height:40px;
}
.menu2 li a.top_link span.down
{
float:left;
display:block;
padding:0 10px 0 6px;
height:25px;/*background"#555" no-repeat right top;*/
}
.menu2 li a.top_link:hover
{
color: #808080;
background: url('button4a.gif');
}
.menu2 li a.top_link:hover span
{
background:url('button4a.gif');
}
.menu2 li a.top_link:hover span.down
{
background:url('button4a.gif');
}
.menu2 li:hover > a.top_link /**/
{
color: #C0C0C0;
background: url('button4a.gif');
}
.menu2 li:hover > a.top_link span
{
background:url('button4a.gif');
}
.menu2 li:hover > a.top_link span.down
{
background:url('button4a.gif');
}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.menu2 a:hover
{
visibility:visible;
}
.menu2 li:hover
{
position:relative; z-index:200;
}
/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul
{
position:absolute;
left:-9999px; top:-9999px;
width:0; height:0;
margin:0; padding:0;
list-style:none;
}
.menu2 :hover ul.sub
{
left: 6px;
top: 25px;
padding: 0; /*border:1px solid #1E8BB5; white-space:nowrap;*manipulacion submenu*/
width: auto;
height: auto;
font-weight: normal;
background-color: #000000; /*background-image: url('../imagenes/nav_bg.png');*/
}
.menu2 :hover ul.sub li /*BORDES SUBMENU*/
{
display:block;/*height:20px; */
position:relative;
float:left;
width:160px;
border-bottom:1px solid Black;
border-left:1px solid Black;
border-right:1px solid Black;
margin-bottom:2;
}
.menu2 :hover ul.sub li a /*letras submenu*/
{
display: block;
height: auto;
font-size: 11px;
padding: 4px 3px;
line-height: 1;
color: #FFFFFF;
text-decoration: none;
}
.menu2 :hover ul.sub li a.fly
{
background: #fff url('../imagenes/fd_menu.gif') no-repeat 150px 6px;
}
.menu2 :hover ul.sub li a:hover /*cambia color de texto cuando paso por un submenu*/
{
background:#E5FAFC;
color:#005FB9;
}
.menu2 :hover ul.sub li a.fly:hover
{
background: #E5FAFC url('../imagenes/vineta_menu.gif') no-repeat 150px 6px;
}
.menu2 :hover ul li:hover > a.fly
{
background:#E5FAFC
}
.menu2 :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{
left: 160px;
top: -1px;
background: #000000;
padding: 0; /* white-space:nowrap; */
width: auto;
z-index: 300;
height: auto;
}
.menu2 :hover ul.sub li ul /* se hereda*/
{
border-top: 1px solid #005FB9;
background: #fff;
z-index: 300;
border-top-color: #000000;
}
.central
{
background-position:center;
border-width:medium;
}