Como poner un texto link ensima de una plantilla o boton.

**elpiterpan** · 14/08/2009, 18:13

Hola amigos del foro, dos dudas, la primera es que tengo una plantilla o boton elegida por mi, para hacer el menu lateral izquierdo, bueno ahora lo que yo quiero es ponerle un texto que a su vez sea un link, lo del texto y lo del link lo tengo claro de como hacerlo, lo que no se es como ponerlo ensima de la plantilla, cuando lo pongo en el codido de la plantilla no se pone ensima si no que se corre, aqui le paso la pagina para que vean que es lo que me pasa...

http://www.innovacionatural.com.ar/

y este es mi codigo de html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Web Templates by LINE9.com</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">

<div id="menu">
<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>
<td width="1%" valign="top" background="objetos/sidebkg.png">[img]objetos/topleft.png[/img]

[img]objetos/blankbutton.png[/img] [*]Velas
[img]objetos/blankbutton.png[/img]</td>
<td width="99%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="objetos/topbkg.png">
<tr>
<td width="1%">[img]objetos/topbkg.png[/img]</td>
<td width="99%" valign="top">[img]objetos/logo.png[/img]</td>
</tr>
</table>

La banda nació en 1982, cuando tras ver por la tele un concierto de Bruce Springsteen dos chavalotes se digeron... y si aprendemos a tocar algo? Fue entonces cuando Juanito se compró su primera batería y Pepito su primer ampli y guitarra. Tras encontrarse con Pablito y convencerle de que le pidiera el bajo a su tio, empezaron a ensayar en el garaje de uno de ellos. Al principio intentaban tocar sus canciones preferidas, las que sonaban en esos momentos por la radio y cosas así. Más tarde Pepito empezó a escribir algunas letras a las que pusieron música. Así nació la banda, imagino que, igual que muchas otras;</p>

</font></td>
</tr>
</table>
<table border="0" width="672%" cellspacing="0" cellpadding="0" background="objetos/bottombar.png">
<tr>
<td width="100%">[img]objetos/bottombar.png[/img]</td>
</tr>

</table>
<h1></h1>

</div>

<h1> </h1>

</p>
</div>

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

Y la segunda duda que tengo es, como separar mas esos botones o plantillas "son dos" porque estan muy pegados, desde ya gracias y disculpen las molestias.

El piterpan.

**Alpolo** · 14/08/2009, 20:27

Hola Piter...

Para que el Link te pueda quedar como tu quieres tienes que hacer asi definir una lista como asi::

Código:

<ul class="menu">[*]Menu 1[*]Menu 1[*]Menu 1[/list]

Una vez tu tengas definidas esa lista, lo que tienes que hacer es ir a tu hoja de estilo y definir esa lista como, asi :

Código:

 #menu li {background-image: url (ruta/imgen.jpg);

Vez como es, la imagen definida en el[*] va hacer trata en todos los[*], y por esa razon te quedaria la imagen como fondo de esos[*], lo unico que tienes que hacer es ya darte margin, padding para que te pueda quedar super atractiva jaja...

Saludos...

**elpiterpan** · 14/08/2009, 23:45

Hola! gracias por responder

trate de hacer lo que me dijiste y aun nada... Asi quedo la pagina:

www.innovacionatural.com.ar

este es el codigo html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Web Templates by LINE9.com</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">

<div id="menu">
<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>
<td width="1%" valign="top" background="objetos/sidebkg.png">[img]objetos/topleft.png[/img]

[img]objetos/blankbutton.png[/img]

[img]objetos/blankbutton.png[/img]</td>
<ul class="menu"> [*]Menu 1 [*]Menu 1 [/list] <td width="99%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="objetos/topbkg.png">
<tr>
<td width="1%">[img]objetos/topbkg.png[/img]</td>
<td width="99%" valign="top">[img]objetos/logo.png[/img]</td>
</tr>
</table>

La banda nació en 1982, cuando tras ver por la tele un concierto de Bruce Springsteen dos chavalotes se digeron... y si aprendemos a tocar algo? Fue entonces cuando Juanito se compró su primera batería y Pepito su primer ampli y guitarra. Tras encontrarse con Pablito y convencerle de que le pidiera el bajo a su tio, empezaron a ensayar en el garaje de uno de ellos. Al principio intentaban tocar sus canciones preferidas, las que sonaban en esos momentos por la radio y cosas así. Más tarde Pepito empezó a escribir algunas letras a las que pusieron música. Así nació la banda, imagino que, igual que muchas otras;</p>

</font></td>
</tr>
</table>
<table border="0" width="672%" cellspacing="0" cellpadding="0" background="objetos/bottombar.png">
<tr>
<td width="100%">[img]objetos/bottombar.png[/img]</td>
</tr>

</table>
<h1></h1>

</div>

<h1> </h1>

</p>
</div>

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

Y este es el de los estilos.css:

* {text-indent: 0px ; margin:0px ; padding:0px ; border:0px}

p {text-align: center}

h1 {font-size: 1.2em; color:white ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:white ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {background-image: url(objetos/fondo.png) ; text-align: center ; background-repeat: no-repeat }

#global {width:800px ; margin:0px auto }

#cabecera {background-color: none ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 17px 0px 17px }
#navegacion ul { margin-left: 25px }
#contenido {border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 0px 0px 0px 0px ; text-indent: 15px}

#menu { text-align:left ; margin: 0px 0px 0px 0px ;

#menu li {list-style:none ; margin: 0px 0px 0px 0px ; {background-image: url (objetos/blankbutton.png.jpg) ; width: 150px ; float:left }
#menu h1 {text-decoration:none ; font-size:0px ; padding-top:0px}

a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline}
a:active {}

#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}

#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: none }
#logotipo a:active {}

podria ayudarme??
gracias

El Piterpan.[/url]

**Alpolo** · 15/08/2009, 18:10

Hola Piter..

respecto a lo que tienes vamos a hacerlo mas facil ok..

mas a crear un <div> y ese <div> va a tener la lista ok, asi::..:::.

Código:

<div id="menu">
      <ul>[*]Menu one[*]Menu 2[*]Menu 3[/list]</div>

Una vez tengamos hecho eso lo que haces es ir a la hoja de estilo y ponemos asi ......::::....:::...:::

Estilo.css

Código:

#menu {
             margin: 4px;
             float: left;
	     width: 200px;

}
#menu li {
               background-image:url(imagen/menu.png);
               background-repeat:no-repeat;
               float:left;
               padding:5px 0px 5px 0px;
	       margin:10px 10px 10px 10px;
               list-style:none;
               height:40px;
	       width: 150px;
}

Más omenos asi te deve quedar ok...

Saludos....

**elpiterpan** · 16/08/2009, 02:58

No, no es eso lo que quiero, ves los dos botones que estan debajo de la flor? bueno quiero poner el menu ensima de ellos, con lo que me pasas vos me estan dando otra cosa.

**Alpolo** · 16/08/2009, 18:04

Hola...

Si tu quieres poner el menu tal cual como lo dijiste tienes que hacer asi como te dije ok..
Tu quieres que quede asi o no ...
Una toma para que puedas ver si es asi como la quieres ok..

Espero sea asi y si lo es, tienes que hacer como te lo indique arriba ok..

Otra cosa si la imagen no sale o no se ve haz Click en esta dirección
ok..
Saludos...

**johnpeterjp** · 16/08/2009, 20:58

Hola elpiterpan, donde tienes las imagenes del boton que debe llevar el texto encima, tienes 2 opciones.

1º. Agregar el texto al boton con un editor de imagenes como photoshop o paint. (muy sencilla solución)

2º. Tienes una tabla de 221px de alto y dentro de ella las imagenes: topleft.png, y 2 blankbutton.png, correcto ?
Bueno, crea una tabla solo para la primera imagen, luego una para el primer boton y una para el segundo boton, y a cada una agrega la imagen (blankbutton.png) de fondo, así podrás escribir dentro de ella y encima de la imagen del boton.

Si optas por la más sencilla. así debería quedar.

Si optas por la otra forma, he aquí el codigo solo de la tabla, debes corregir la ruta de la imagen.

<table width="136" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="136" height="123" valign="top" background="objetos/sidebkg.png">[img]objetos/topleft.png[/img]</td>
</tr>
<tr>
<td height="30" align="center" valign="middle" background="blankbutton.png"><span class="Estilo1">Menu 1 </span></td>
</tr>
<tr>
<td height="30" align="center" valign="middle" background="blankbutton.png"><span class="Estilo2">Menu 2 </span></td>
</tr>
</table>

Y aquí la captura de pantalla para que veas como queda.

Saludos.

**elpiterpan** · 16/08/2009, 23:59

Muchisima gracias por sus respuestas.

Me ayudaron mucho:)

gracias gracias!

El Piterpan.

**johnpeterjp** · 17/08/2009, 00:05

Je, je...veo que optaste por la primera opción. Me parece muy bien, viendo tu web lo aprecio, sin embargo la imagen no actúa como botón, para que veas como funciona solo enlaza la imagen a un simbolo # así podras.

Ah!.. otro consejo, las imágenes que usas redimensionalas al tamaño final que las utilizarás, así logras reducir la carga de ellas y de la página web total.

Saludos.