Foros Club Delphi - Banda bonita con enlaces ;)

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)

- PHP (https://www.clubdelphi.com/foros/forumdisplay.php?f=15)

- - Banda bonita con enlaces ;) (https://www.clubdelphi.com/foros/showthread.php?t=52757)

Banda bonita con enlaces ;)

Hola, ¿qué tal?

Veréis, soy nuevo en esto de PHP, y no se me ocurre cómo hacer esto.

Quiero poner en mi página web, en la parte superior, una banda que ocupe todo el ancho de la pantalla, independientemente de la resolución de la pantalla del usuario o del estado de la ventana del navegador.

Además, quiero colocar sobre esa banda unos textos, que son enlaces a distintas secciones.

Mi idea era coger una imagen pequeña (de 4x30), y copiarla varias veces, una al lado de otra. Pero no sé cómo hacerlo. ¿Cómo se el ancho de que dispongo? ¿Cómo coloco el texto sobre la secuencia de imágenes (bueno, esto ya es más duda de HTML)?

EL restulado es como similar a esto (pero ocupando todo el ancho, claro): http://usuarios.lycos.es/mikelunatik...egra_texto.png

Saludos, y gracias.

Lo que pides no es una cuestión de PHP sino de HTML y CSS.

A ver si me sale:

Código PHP:


		
			
<html>
  <head>
    <title></title>
    <meta content="">
    <style>
    ul.menu { background: black; font-family: sans-serif; }
    ul.menu li a { color: white }
    </style>
  </head>
  <body>
  <ul class="menu">
    <li><a href="op1.php">Opci&oacute;n 1</a></li>
    <li><a href="op2.php">Opci&oacute;n 2</a></li>
    <li><a href="op3.php">Opci&oacute;n 3</a></li>
</ul></body>
</html>

Bueno, vale, no es lo mismo pero coges la idea. Hay una propiedad del CSS que permite eliminar los bolardos a la lista e imprimir sus elementos en una sola línea pero no recuerdo cuales eran. Aquí te dejo este tutorial sobre HTML y CSS para que vayas aprendiendo. Hay muchos más en Internet, sólo hay que buscarlos.

Hola,

Cita:

Empezado por Ñuño

Hay una propiedad del CSS que permite eliminar los bolardos a la lista e imprimir sus elementos en una sola línea pero no recuerdo cuales eran.

Se trata de "display" ("inline") y de "list-style" ("none"). ;)

Más o menos lo que se quiere hacer:

Código PHP:


		
			
<html>

 <head>
 
  <style type="text/css">
     
     body {
       margin: 0;
         padding: 0;
     }
     
     div#menu {
       color: #fff;
         padding: 1em;
         font-size: 1.4em;
         text-align: center;
         font-family: Verdana;
       background-color: #000;
     }
     
       div#menu a {
       color: #fff;         
             text-decoration: none;
           background-color: #000;
         }
     
       div#menu ul {
         margin: 0;
           padding: 0;
         list-style: none;
           margin: 0 0 0 -1em;
       }
     
       div#menu ul li {
           display: inline;
             margin: 0 0 0 1em;
         }
     
    </style>
 
 </head>

 <body>
 
  <div id="menu">
     <ul>
      <li><a href="#inicio" title="Inicio">Inicio</a></li>
      <li><a href="#creaciones" title="Creaciones">Creaciones</a></li>        
      <li><a href="#programas" title="Programas">Programas</a></li>        
      <li><a href="#musica" title="Música">M&#250;sica</a></li>        
     </ul>
    </div>
 
 </body>
 
</html>

Ok, dec, es justo lo que quería, pero... ¿cómo meto esa imagen de fondo? si te fijas en la imangen del enlace, el fondo no es un rectángulo negro, sino que tiene un degradado, para hacerlo más bonito :)

Y si estoy verde en PHP, HTML... en CSS ni os cuento :o

Salu2.

Hola,

Pues debes preparar la imagne para el fondo y luego usar CSS, efectivamente:

Código PHP:


		
			
     div#menu {
       color: #fff;
       padding: 1em;
       font-size: 1.4em;
       text-align: center;
       font-family: Verdana;
       background-color: #000;

       background-position: center;
       background-repeat: repeat-x;
       background-image: url(../images/imagen-fondo.png);
     }

Nota que acaso estas últimas "propiedades" tienes que adaptarlas a la imagen en cuestión. Si tienes algún problema silva que por aquí estamos. ;)

¡Genial! Va de maravilla, muchas gracias.

Sólo un pequeño detalle :o, ¿cómo hago transparente el fondo del texto? Es que sale con el fondo negro (sólo el texto, lo demás bien). He probado con una imagen png transparente, pero no va :(

Gracias :)

.

Vaya, parece ser que me tendré que conformar con que el rectángulo donde va el texto sea opaco y de color negro...:rolleyes:

Hola,

Código:

background-color: transparent;

:D:) ¡Gracias! :D;)