Tema: Ayuda con cabecera
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/02/2010, 04:34
Avatar de triqui
triqui
 
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 4 meses
Puntos: 31
Ayuda con cabecera
Hola estoy intentado crear una cabecera, hasta el momento tiene este aspecto:




Realmente tengo dos problemas a simple vista, quiero colocar Carlos encima de los 550 puntos.

Y segundo los objetos de la cabecera los divido con "&nbsp" si os fijais mas adelante en el código que os pego, se que es la gran chapuza del siglo porque si encojo la ventana se me mueve todo entre otros muchos problemas, deberia hacerlo con divs verticales, pero he probado con un montón de ejemplos pero no logro colocar la foto y el nombre al final de la cabecera y las dos imagenes centrales en el lugar que aparecen, este es el aspecto que necesitaria tener:




Este es mi codigo Html, he referenciado las imagenes de la cabecera a internet para que las podais visualizar en conjunto con la web si copias el codigo.


Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>

<style>

html, body {width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#contenido{height: 100%;
background-color: #ffffff;
}
#encabezado{background-color: #3b5998;
height: 50px; margin-top: 5px; margin-left: 2px; margin-right: 2px;
}


#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#ffffff;
background-repeat:repeat;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:153.3px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#ffffff;
border-width:0px;
border-color:#6655ff;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:normal 11px Verdana;
color: #444444;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover

img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover

img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_double_1o.gif)}
ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_double_1.gif)}
</style>

</head>

<body>
<div id="contenido">
<div id="encabezado">



<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 1</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Opcion</span><![if gt IE 6]></a><![endif]><!--[if lte IE

6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Opcion 1</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Opcion 2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Ayuda</span><![if gt IE 6]></a><![endif]><!--[if lte IE

6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Ayuda 1</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Ayuda 2</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Ayuda 3</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Ayuda 4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Más</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu</span><![if gt IE 6]></a><![endif]><!--[if lte IE

6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 1</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu 2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Comarcas</span><![if gt IE 6]></a><![endif]><!--[if lte IE

6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Aragón</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Galicia</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Catalunya</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Comunidad de Madrid</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Murcia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Otras</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>


&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<a><img vertical-align:"text-top" src="http://img24.imageshack.us/img24/8350/cab2m.png" height="50px"/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<a><img vertical-align:"text-top" src="http://img28.imageshack.us/img28/1102/logo2pi.png" height="50px"/>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<a><img vertical-align:"text-top" src="http://img696.imageshack.us/img696/5019/userhr.jpg" width="40px"/>
&nbsp
<a href="www.ejemplo.com" style="color: #FFF;
font-family: Arial, Sans-Serif;
font-size: 0.8em;text-decoration:none">Carlos (550 Puntos)</a>

</div>
<p>contenido</p>

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


Gracias
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
Última edición por triqui; 22/02/2010 a las 05:24