Tema: Problema con la posición del menú
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 28/02/2009, 17:20
Avatar de Distriker
Distriker
 
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 16 años, 9 meses
Puntos: 23
Respuesta: Problema con la posición del menú
Hola Mik, esta es la web cuando situo el menu en la parte inferior de la cabecera:

Probando 1

El HTML:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
<link rel="StyleSheet" href="style.css" type=text/css>

		<title>index</title>
		<meta name="author" content="Distriker" >
		<meta name="generator" content="screem 0.16.1" >
		<meta name="description" content="" >
		<meta name="keywords" content="" >
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
		<meta http-equiv="Content-Script-Type" content="text/javascript" >
		<meta http-equiv="Content-Style-Type" content="text/css" >


</head>
	<body>
	
<div id="contenido">
            <div id="cabecera">

                <h1>Bienvenido a Betaconsolas.com</h1>
                <h2>:D:D:D</h2>

<ul id="dropline">
                    <li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">Dropdown One</a></li>
					<li><a href="#url">Dropdown Two</a></li>
					<li><a href="#url">Dropdown Three</a></li>
					<li><a href="#url">Dropdown Four</a></li>
					<li><a class="last" href="#url">Dropdown Five</a></li>
				</ul>
			</div>
<li><a class="sub" href="#"><b>URL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">URL One</a></li>
					<li><a href="#url">URL Two</a></li>
					<li><a href="#url">URL Three</a></li>
					<li><a href="#url">URL Four</a></li>
					<li><a class="last" href="#url">URL Five</a></li>
				</ul>
			</div>

</div>
<div class="borde-inferior"

    <div id="sidebar-izquierda">

        <h3>Sección</h3>
        <p>Bla bla ...</p>

    </div>

    <div id="centro">

        <h3>Vacio</h3>
        <p>Vacio</p>
<p>dsd</p>
<p>dsa</p>
<p>asas</p>

    </div>

<div id="sidebar-derecha">

<h3>Seccion 2</h3>
<p>Bla bla ....</p>

</div>


    <div id="footer">

        Pie - Datos aquí

    </div>

</div>
	</body>
</html>
Y el CSS:

Código CSS: 
Ver original
  1. body {
  2.     text-align: center ;
  3.     background-color: #C9D0E9;
  4.   }
  5.  
  6.  
  7. #cabecera {
  8.     background-color: #00C40D ;
  9.     margin-bottom: 5px;
  10.   }
  11.  
  12. #cabecera borde-superior {
  13. background-image:url(images/superior-contenido.png)
  14. }
  15.  
  16. #contenido {
  17.     width: 800px ;
  18.     margin-left: 300px ;
  19.     margin-right: 300px ;
  20.     background-color: #E2F0DC ;
  21.   }
  22.  
  23.  
  24. #sidebar-izquierda {
  25.     width: 110px ;
  26.     float: left ;
  27.     padding: 25px ;
  28.     background-color: #FFF200;
  29.   }
  30.  
  31.  
  32. #sidebar-derecha {
  33.     width: 110px ;
  34.     float: right ;
  35.     padding: 25px ;
  36.     background-color: #FFF200;
  37.   }
  38.  
  39.  
  40. #centro {
  41.     width: 450px ;
  42.     background-color: #5100FF ;
  43.     float: left ;
  44.     text-align: center;
  45.     margin-left: 15px ;
  46.     margin-right: 15px ;
  47.     margin-bottom: 15px;
  48.   }
  49.  
  50.  
  51. #footer {
  52.     background-color : #FF0004;
  53.     border-left-color : #090909;
  54.     border-left-width : 5px;
  55.     clear : both;
  56.     font-style : italic;
  57.     text-align : center;
  58.   }
  59.  
  60. /* ================================================================ 
  61. This copyright notice must be untouched at all times.
  62.  
  63. The original version of this stylesheet and the associated (x)html
  64. is available at [url]http://www.cssmenus.co.uk[/url]
  65. Copyright (c) 2009 Stu Nicholls. All rights reserved.
  66. This stylesheet and the associated (x)html may be modified in any 
  67. way to fit your requirements.
  68. =================================================================== */
  69. /* style the outer div to give it width */
  70.  
  71.  
  72. #dropline {
  73.     font-family : arial, sans-serif;
  74.     font-size : 12px;
  75.     height : 41px;
  76.     left : 0px;
  77.     list-style-image : none;
  78.     list-style-type : none;
  79.     margin-bottom : 0;
  80.     margin-left : auto;
  81.     margin-right : auto;
  82.     margin-top : 0;
  83.     padding-bottom : 0;
  84.     padding-left : 0;
  85.     padding-right : 0;
  86.     padding-top : 0;
  87.     position : relative;
  88.     text-align : center;
  89.     top : 0px;
  90.     width : 1000px;
  91.   }
  92.  
  93.  
  94. #dropline div {
  95.     padding:0;
  96.     margin:0 auto;
  97.     list-style:none;
  98.     position:absolute;
  99.     left:-9999px;
  100.     width:1000px;
  101.     text-align:center;
  102.     background:url(trans.gif);
  103.   }
  104.  
  105.  
  106. #dropline table {
  107.     border-collapse:collapse;
  108.     font-size:1em;
  109.     float:left;
  110.     margin:0px;
  111.   }
  112.  
  113.  
  114. #dropline ul li {
  115.     display:inline;
  116.     margin:0;
  117.     text-align:left;
  118.   }
  119.  
  120.  
  121. #dropline ul li a {
  122.     display:inline-block;
  123.     height:30px;
  124.     line-height:30px;
  125.     margin:0;
  126.     padding:0px;
  127.     background:transparent;
  128.     font-weight:bold;
  129.     font-size:11px;
  130.   }
  131.  
  132.  
  133. #dropline li {
  134.     display:inline;
  135.     margin:0 -2px;
  136.     text-align:left;
  137.   }
  138.  
  139.  
  140. #dropline li a {
  141.     display:inline-block;
  142.     height:36px;
  143.     margin:5px 0 0 0;
  144.     padding:0px 0 0;
  145.     line-height:30px;
  146.     text-decoration:none;
  147.     color:#000;
  148.   }
  149.  
  150.  
  151. #dropline li a.sub {
  152.     background:url(button-arrow.gif) right top;
  153.   }
  154.  
  155.  
  156. html>/**/body #dropline li {
  157.     display:inline-block;
  158.     padding:0;
  159.   }
  160.  
  161.  
  162. * html #dropline li a {
  163.     margin-bottom:-4px;
  164.     margin-right:0px;
  165.   }
  166.  
  167.  
  168. #dropline li a b {
  169.     display:block;
  170.     height:36px;
  171.     float:left;
  172.     padding:0 0 0 25px;
  173.     cursor:pointer;
  174.   }
  175.  
  176.  
  177. #dropline li a:hover {
  178.     background-position:right bottom;
  179.     color:#fff;
  180.   }
  181.  
  182.  
  183. #dropline li a:hover b {
  184.     background-position:left bottom;
  185.   }
  186.  
  187.  
  188. #dropline li:hover > a {
  189.     background-position:right bottom;
  190.     color:#fff;
  191.   }
  192.  
  193.  
  194. #dropline li:hover > a b {
  195.     background-position:left bottom;
  196.   }
  197.  
  198.  
  199. #dropline :hover div {
  200.     left:0;
  201.     top:41px;
  202.   }
  203.  
  204.  
  205. #dropline :hover ul li a:hover {
  206.     text-decoration:underline;
  207.     color:#800;
  208.   }

Ahora, si situo el menú en la parte superior, pasa esto:

Probando 2. (¿Veis? Se va para abajo lo que se supone que debe de estar en el div :.

El HTML es este:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
<link rel="StyleSheet" href="style.css" type=text/css>

		<title>index</title>
		<meta name="author" content="Distriker" >
		<meta name="generator" content="screem 0.16.1" >
		<meta name="description" content="" >
		<meta name="keywords" content="" >
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
		<meta http-equiv="Content-Script-Type" content="text/javascript" >
		<meta http-equiv="Content-Style-Type" content="text/css" >


</head>
	<body>
	
<div id="contenido">
            <div id="cabecera">

<ul id="dropline">
                    <li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">Dropdown One</a></li>
					<li><a href="#url">Dropdown Two</a></li>
					<li><a href="#url">Dropdown Three</a></li>
					<li><a href="#url">Dropdown Four</a></li>
					<li><a class="last" href="#url">Dropdown Five</a></li>
				</ul>
			</div>
<li><a class="sub" href="#"><b>URL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div>
				<ul>
					<li><a href="#url">URL One</a></li>
					<li><a href="#url">URL Two</a></li>
					<li><a href="#url">URL Three</a></li>
					<li><a href="#url">URL Four</a></li>
					<li><a class="last" href="#url">URL Five</a></li>
				</ul>
			</div>


                <h1>Bienvenido a Betaconsolas.com</h1>
                <h2>:D:D:D</h2>

</div>

    <div id="sidebar-izquierda">

        <h3>Sección</h3>
        <p>Bla bla ...</p>

    </div>

    <div id="centro">

        <h3>Vacio</h3>
        <p>Vacio</p>
<p>dsd</p>
<p>dsa</p>
<p>asas</p>

    </div>

<div id="sidebar-derecha">

<h3>Seccion 2</h3>
<p>Bla bla ....</p>

</div>


    <div id="footer">

        Pie - Datos aquí

    </div>

</div>
	</body>
</html>
Y el CSS es el mismo.

Y si el menú lo pongo arriba y abajo como quiero llegar a hacer, me sale mas horrendo aun :, miren:

http://betaconsolas.com/probando/index3.html

El HTML os lo podeis descargar de aquí, ya que en este mensaje no me cambian mas caracteres

Y el CSS es el mismito.

¿Qué le pasa a mi codigo?

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.