Foros del Web » Creando para Internet » CSS »

Ayuda con cabecera

 Estas en el tema de Ayuda con cabecera en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/02/2010, 04:34
Avatar de 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
  #2 (permalink)  
Antiguo 22/02/2010, 04:56
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: Ayuda con cabecera
Hola:

De entrada tienes algunos errores de estructura:

1º La etiqueta <style> y su contenido está fuera del <head>.
2º No abres el <body>
3º Comentarios Condicionales abiertos así <! en lugar de <!--
4º Estilos en los elementos que no existen y mal colocados.

Creo que mejor validas tu código antes de seguir para solucionar los errores de código que tienes y después continúas, sino no serás capaz de arreglar todo eso.

Saludos.
  #3 (permalink)  
Antiguo 22/02/2010, 05:49
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 4 meses
Puntos: 31
Respuesta: Ayuda con cabecera
Ya lo arregle todo lo que dijiste, ahora quite el menu que era mucho código, la verdad que ese código se creo de una web que genera automáticamente menus, ahora lo quite para que me podais ayudar mejor.

Por favor podeis ayudarme.

este es mi código de nuevo

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  5. <title></title>
  6.  
  7. <style>
  8.  
  9. html, body {width: 100%;
  10. height: 100%;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. #contenido{height: 100%;
  15. background-color: #ffffff;
  16. }
  17. #encabezado{background-color: #3b5998;
  18. height: 50px; margin-top: 5px; margin-left: 2px; margin-right: 2px;
  19. }
  20.  
  21. </style>
  22.  
  23. </head>
  24.  
  25. <body>
  26. <div id="contenido">
  27. <div id="encabezado">
  28.  
  29.  
  30.  
  31.  
  32. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  33.  
  34. &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
  35. <a><img vertical-align:"text-top" src="http://img24.imageshack.us/img24/8350/cab2m.png" height="50px"/>
  36. &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
  37. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  38. <a><img vertical-align:"text-top" src="http://img28.imageshack.us/img28/1102/logo2pi.png" height="50px"/>
  39.  
  40. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  41. <a><img vertical-align:"text-top" src="http://img696.imageshack.us/img696/5019/userhr.jpg" width="40px"/>
  42. &nbsp
  43. <a href="www.ejemplo.com" style="color: #FFF;
  44. font-family: Arial, Sans-Serif;
  45. font-size: 0.8em;text-decoration:none">Carlos (550 Puntos)</a>
  46.  
  47. </div>
  48. <p>contenido</p>
  49.  
  50. </div>
  51. </body>
  52. </html>
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
  #4 (permalink)  
Antiguo 22/02/2010, 23:56
Avatar de daPhyre
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 1 mes
Puntos: 142
Respuesta: Ayuda con cabecera
Oh vaya que es un problema gigante O_O

Mi recomendación es que esa info la pongas en un div que flotes a la derecha en posición absoluta, a la foto le des un float:left y así el nombre y puntuaje lo pongas en dos párrafos. Eso en teoría te solucionará de manera fácil tus problemas. ¿O tú que opinas?
__________________
<signs>daPhyre</signs>
Jugaa.me

Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 23/02/2010, 15:56
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 4 meses
Puntos: 31
Respuesta: Ayuda con cabecera
Gracias, lo solucione.
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo

Etiquetas: cabeceras
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:12.