Poner imágenes a una textarea y un botón de input

DDrDark · #1 (**permalink**) 29/12/2005, 13:47

Hola: estoy intentando terminar la cabecera de mi nuevo blog, y hace unos días que le llevo dando vueltas, pero no se... creo que me travé

Veamos, así es como debería quedar: blog

Pues bien como no se como hacerlo, hice 3 divs, y dividí lógicamente la imagen en 3
1º:

2º:

(el fondo de la textarea)
3º:

Y luego la que iría en el boton de GO que es ésta:

Pues bien, el primer div como véis se ve bien y el código es éste:

Código:

.bizq {
min-height: 20px;
float: left;
padding-bottom: 15px;
padding-right: 66px;
background-image: url("img/buscarizq.png");
background-repeat: no-repeat;
}

Luego el "central" que engloba a todo el form

Código:

.searchfield textarea{
min-height: 20px;
float: left;
padding-bottom: 15px;
padding-right: 119px;
background-image: url("img/buscarcen.png");
background-repeat: no-repeat;
}

Y por último el div de la derecha (que se ve mal, pero si lo pongo seguido del div de la izquierda se ve bien)

Código:

.bder {
min-height: 20px;
float: left;
padding-bottom: 15px;
padding-right: 16px;
background-image: url("img/buscarder.png");
background-repeat: no-repeat;
}

Y aquí está el código de todo el header:

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

 
<!--  <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> -->

<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />

<style type="text/css" media="screen">

    @import url( <?php bloginfo('stylesheet_url'); ?> );    

</style>

<?php wp_head(); ?>

<script type="text/javascript" type="text/javascript" src="http://oceanic.wsisiz.edu.pl/~slabosz/wordpress/wp-content/themes/aquasoft/livesearch.js"></script>

</head>

 
<body>

<a id="tooCool" href="http://www.w3junkies.com/toocool/">Too Cool for Internet Explorer</a>

 
 
<div id="masthead"></div>

<div class="loquequieras">

<ul>

 <li><div class="home"><a href="<?php bloginfo('url'); ?>"></a></div></li>

 <li><div class="icons"><a href="/test/?cat=9"></a></div></li>

 <li><div class="walls"><a href="/test/?cat=8"></a></div></li>

 <li><div class="desks"><a href="/test/?cat=2"></a></div></li>

 <li><div class="links"><a href="/test/?page_id=413"></a></div></li>

 <li><div class="salta"><a href="/lecturas/"></a></div></li>

 <li><div class="autor"><a href="http://213.60.209.225/test/?page_id=2"></a></div></li>

 <li><div class="bizq"></div></li>

 
 <li><div class="searchfield">

  <form id="searchform" method="get" action="<?php bloginfo('url'); ?>">

 <input type="text" class="input" name="s" id="search" alt="Search" size="15" />

 
   <input name="submit" type="submit" tabindex="5" value="<?php _e(''); ?>" />

  </form></div><li>

<li><div class="bder"></div></li>

 
</ul>

</div>

</div>

<!-- Begin #content -->

<div id="content">

 
<!-- Begin #main -->

<div id="main"><div id="main2">

Buscando por google, e incluso mirando los manuales que hay por el índice de faqs encontré que el CSS no reconoce? al textarea como input, osea que tendría que cambiarle el nombre de la etiqueta para que pase de esto:

Código PHP:

  <input type="text" class="input" name="s" id="search" alt="Search" size="15" />

a esto:

Código PHP:

  <input type="text" class="input" name="s" id="search" alt="Search" size="15" />

Así entonces se ve la imagen del medio pero todo desordenado y la textarea se hace enorme... en fin... la verdad que no se como hacerlo, si voy bien, si voy mal, si hay alguna otra forma más fácil de hacerlo. Ojalá alguien pueda darme alguna idea, muchas gracias de antemano!