Foros del Web » Creando para Internet » CSS »

como poner imagen a borde?

Estas en el tema de como poner imagen a borde? en el foro de CSS en Foros del Web. hola que tal eh buscado por todos lados pero no consigo ponerle una imagen a mi borde, aca les muestro. este es mio, lo que ...
  #1 (permalink)  
Antiguo 26/08/2011, 13:33
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 15 años, 4 meses
Puntos: 2
Pregunta como poner imagen a borde?

hola que tal eh buscado por todos lados pero no consigo ponerle una imagen a mi borde, aca les muestro.

este es mio, lo que esta en verde es el borde


bueno y lo que deseo hacer es que me quede asi, el borde este son las de colores.


bueno le agradeceria cualquier ayuda, muchas gracias
  #2 (permalink)  
Antiguo 26/08/2011, 14:25
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 13 años, 7 meses
Puntos: 202
Respuesta: como poner imagen a borde?

Ayudaría a saber si lo que estás usando border y sus propiedades o sencillamente es un div de color verde.

El ejempo que muestras (2ª imagen) no creo que esté creado con las propiedades del boder ya que hasta donde yo sé, estas son las disponibles:

http://www.w3schools.com/css/css_border.asp

De todas formas usando un div sólo tienes que repetir en x la imagen.
Bien puedes diseñarla tu mismo (te lo recomiendo) o bien usar este tipo de páginas:

http://www.stripegenerator.com/index...tzaGFkb3c9MDs=

Después p.e algo así: ( a lo mejor ya lo sabes pero por si acaso )

Código CSS:
Ver original
  1. height:15px;
  2. background: url('la ruta de la imagen') repeat-x;

Un saludo.
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #3 (permalink)  
Antiguo 26/08/2011, 14:49
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: como poner imagen a borde?

muchas gracias por tu pronta respuesta, yo en mi css tengo asi

#userlinks{
background: #8cc300;
border: 1px solid #8cc300;
height: 50px;
margin: 5px 0 5px 0;
padding: 0 5px 0 5px;
}
  #4 (permalink)  
Antiguo 26/08/2011, 16:18
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 13 años, 7 meses
Puntos: 202
Respuesta: como poner imagen a borde?

Casualidades de la vida encontré justo la url de esa imagen.
No sabía que la usaba Taringa.

Bueno a ver si esto te sirve de guía:

Código HTML:
Ver original
  1.  
  2.  
  3. <style type="text/css">
  4. #borde{
  5. margin:0 auto;
  6. height:490px;
  7. width:490px;
  8. background:url('http://o2.t26.net/img/register-bg.gif');
  9. padding:10px;
  10. }
  11.  
  12. #contenido{
  13. height:470px;
  14. width:470px;
  15. background:#FFF;
  16. padding:10px;
  17. }
  18.  
  19.  
  20. </head>
  21.  
  22. <div id="borde">
  23.     <div id="contenido">El contenido del div</div>
  24. </div>
  25.  
  26. </body>
  27.  
  28. </html>
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #5 (permalink)  
Antiguo 26/08/2011, 19:44
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: como poner imagen a borde?

muchas gracias pero mira como me queda,



osea el borde de abajo no cierra, como que sigue de largo,

el css lo tengo asi

Código:
#borde{ 
margin:0 auto;
height:40px;
background:url('http://o2.t26.net/img/register-bg.gif');
padding:10px;
}
#contenido{
height:40px;
background:#FFF;
padding:10px;
}
saludos
  #6 (permalink)  
Antiguo 27/08/2011, 02:36
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 13 años, 7 meses
Puntos: 202
Respuesta: como poner imagen a borde?

Pero eso te pasa por la tamaño del div. Cuando te pasé el ejemplo era para que lo adaptases.
Obviamente el borde y contenido no pueden tener el mismo height pues se superpondrían.

Es fácil de entender, el height de #borde (tal y como está la CSS) deberá ser siempre 20px más que el height de #contenido.

Si contenido tiene de alto 40px borde tiene que tener 60, si tiene 50px el borde 70 y así...

Código CSS:
Ver original
  1. #borde{
  2. margin:0 auto;
  3. height:70px;
  4. background:url('http://o2.t26.net/img/register-bg.gif');
  5. padding:10px;
  6. }
  7. #contenido{
  8. height:50px;
  9. background:#FFF;
  10. padding:10px;
  11. }

Espero haberme explicado bien. Saludos.
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #7 (permalink)  
Antiguo 27/08/2011, 11:55
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 15 años, 4 meses
Puntos: 2
Pregunta Respuesta: como poner imagen a borde?

Cita:
Iniciado por IEKK Ver Mensaje
Pero eso te pasa por la tamaño del div. Cuando te pasé el ejemplo era para que lo adaptases.
Obviamente el borde y contenido no pueden tener el mismo height pues se superpondrían.

Es fácil de entender, el height de #borde (tal y como está la CSS) deberá ser siempre 20px más que el height de #contenido.

Si contenido tiene de alto 40px borde tiene que tener 60, si tiene 50px el borde 70 y así...

Código CSS:
Ver original
  1. #borde{
  2. margin:0 auto;
  3. height:70px;
  4. background:url('http://o2.t26.net/img/register-bg.gif');
  5. padding:10px;
  6. }
  7. #contenido{
  8. height:50px;
  9. background:#FFF;
  10. padding:10px;
  11. }

Espero haberme explicado bien. Saludos.
muchisimas gracias master, ahora me podrias ayudar a ponerlo aca ?

Código:
<script type="text/javascript">
<!--
var ipb_lang_js_blanks   = "{ipb.lang['js_blanks']}";
var ipb_lang_js_no_check = "{ipb.lang['js_no_check']}";
var subsdesc_0 = "{ipb.lang['subsm_no_desc']}";
var subdesc   = new Array(); <!--{SUBS.JSCRIPT}-->
var register_method = "{ipb.vars['converge_login_method']}";
-->
</script>
<script type="text/javascript" src="jscripts/ipb_register.js"></script>
<form action="{ipb.vars['board_url']}/index.{ipb.vars['php_ext']}" method="post" name="REG" onsubmit="return validate_reg_form(event)">
<input type="hidden" name="act" value="Reg" />
<input type="hidden" name="termsread" value="1" />
<input type="hidden" name="agree_to_terms" value="1" />
<input type="hidden" name="CODE" value="02" />
<input type="hidden" name="coppa_user" value="{$data['coppa_user']}" />
<div class="userlinks">
	<div class="maintitle"><{CAT_IMG}>&nbsp;{ipb.lang['registration_form']}</div>
	<div class="formsubtitle">{$data['TEXT']}</div>
	<div class="tablepad">
		<table class='ipbtable' cellspacing="0">
			<tr>
				<td width="50%">
					<fieldset class="row3">
					<legend><b>{ipb.lang['user_name_title']}</b></legend>
<if="ipb.vars['converge_login_method'] == 'username'">
<div class='input-warn-content' id='box-name'><div id='msg-name'>{$errors['username']}</div></div>
						<table class='ipbtable' cellspacing="0">
							<tr>
								<td>{ipb.lang['user_name']} &nbsp;<span>(<a href="#" style="cursor: help; color: #555;" title="{ipb.lang['user_name_text']}">?</a>)</span></td>
							</tr>
							<tr>
								<td>
								  <input type="text" size="50" maxlength="64" value="{ipb.input['UserName']}" id='reg-name' name="UserName" />
								  <img id='img-name' src="{ipb.vars['img_url']}/spacer.gif" alt="" width='12' height='12' />
								</td>
							</tr>
						  </table>
</if>
<if="ipb.vars['auth_allow_dnames'] == 1 OR ipb.vars['converge_login_method'] == 'email'">
<div class='input-warn-content' id='box-dname'><div id='msg-dname'>{$errors['dname']}</div></div>
						  <table class='ipbtable' cellspacing="0">
							<tr>
								<td>{ipb.lang['dname_name']} &nbsp;<span>(<a href="#" style="cursor: help; color: #555;" title="{ipb.lang['dname_text']}">?</a>)</span></td>
							</tr>
							<tr>
								<td>
									<input type="text" size="50" maxlength="64" value="{ipb.input['members_display_name']}" id='reg-members-display-name' name="members_display_name" />
									<img id='img-members-display-name' src="{ipb.vars['img_url']}/spacer.gif" alt="" width='12' height='12' />
								</td>
							</tr>
						 </table>
</if>

						
					</fieldset><br />
					
					<fieldset class="row3">
					<div class='input-warn-content' id='box-password'><div id='msg-password'>{$errors['password']}</div></div>
					<legend><b>{ipb.lang['password_title']}</b></legend>
						<table class='ipbtable' cellspacing="0">
							<tr>
								<td width="1%" nowrap="nowrap">{ipb.lang['password']} &nbsp;<span>(<a href="#" style="cursor: help; color: #555;" title="{ipb.lang['password_text']}">?</a>)</span></td>
								<td width="100%">{ipb.lang['password_confirm']} &nbsp;<span>(<a href="#" style="cursor: help; color: #555;" title="{ipb.lang['password_confirm_text']}">?</a>)</span></td>
							</tr>
							<tr>
								<td><input type="password" size="25" maxlength="32" value="{ipb.input['PassWord']}" id='reg-password' name="PassWord" /></td>
								<td><input type="password" size="25" maxlength="32" value="{ipb.input['PassWord_Check']}"  id='reg-password-check' name="PassWord_Check" /></td>
							    <td width='12'>
							     <img id='img-password' src="{ipb.vars['img_url']}/spacer.gif" alt="" width='12' height='12' />
							    </td>
							</tr>
						</table>
					</fieldset><br />
				
					<fieldset class="row3">
					<div class='input-warn-content' id='box-emailaddress'><div id='msg-emailaddress'>{$errors['email']}</div></div>
					<legend><b>{ipb.lang['email_address_title']}</b></legend>
						<table class='ipbtable' cellspacing="0">
							<tr>
								<td width="1%" nowrap="nowrap">{ipb.lang['email_address']} &nbsp;<span>(<a href="#" style="cursor: help; color: #555;" title="{ipb.lang['email_address_text']}">?</a>)</span></td>
								<td width="100%">{ipb.lang['email_address_confirm']} &nbsp;<span>(<a href="#" style="cursor: help; color: #555;" title="{ipb.lang['email_address_confirm_text']}">?</a>)</span></td>
							</tr>
							<tr>
								<td><input type="text" size="25" maxlength="150" value="{ipb.input['EmailAddress']}"  id='reg-emailaddress' name="EmailAddress" /></td>
								<td><input type="text" size="25" maxlength="150"  value="{ipb.input['EmailAddress_two']}" id='reg-emailaddress-two' name="EmailAddress_two" /></td>
							    <td width='12'>
							      <img id='img-emailaddress' src="{ipb.vars['img_url']}/spacer.gif" alt="" width='12' height='12' />
							    </td>
							</tr>
						</table>
					</fieldset>
					<!--{REQUIRED.FIELDS}-->
					<!--{SUBS.MANAGER}-->
					<!--IBF.MODULES.EXTRA-->
				</td>
				<td width="50%" valign="top">
					<div>
						<b>{ipb.lang['cf_optional']}</b><br /><br />
						<table class='ipbtable' cellspacing="0">
							<tr>
								<td>
									<fieldset>
									<legend>{ipb.lang['op_email_title']}</legend>
										<div class="desc">{ipb.lang['op_email_text']}</div><br />
										<input type="checkbox" name="allow_admin_mail" value="1" class="checkbox" <!--[admin.checked]--> /> {ipb.lang['op_email_ad']}<br />
										<input type="checkbox" name="allow_member_mail" value="1" class="checkbox" <!--[member.checked]--> /> {ipb.lang['op_email_mem']}
									</fieldset><br />
							
									<fieldset>
									<legend>{ipb.lang['op_tz_title']}</legend>
										<div class="desc">{ipb.lang['op_tz_text']}</div><br />
										<!--{TIME_ZONE}--><br /><br />
										<!--<input type="checkbox" name="dst" value="1" class="checkbox" <!--[dst.checked]--> /> {ipb.lang['op_tz_dst']}<br />-->
									</fieldset>
									<!--{OPTIONAL.FIELDS}-->
								</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
			<tr>
				<td><!--{REG.ANTISPAM}--></td>
				<td valign="middle" align="center">
					<div class="desc">{ipb.lang['submit_text']}</div><br />
						<input type="submit" value="{ipb.lang['submit_form']} &gt; &gt;" />
					</div>

				</td>
			</tr>
		</table>
	</div>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
reg_error_no_name        = "{ipb.lang['reg_error_no_name']}";
reg_error_no_pass        = "{ipb.lang['reg_error_no_pass']}";
reg_error_pass_nm        = "{ipb.lang['reg_error_pass_nm']}";
reg_error_chars          = "{ipb.lang['reg_error_chars']}";
reg_error_taken          = "{ipb.lang['reg_error_taken']}";
reg_error_username_taken = "{ipb.lang['reg_error_username_taken']}";
reg_error_username_none  = "{ipb.lang['reg_error_username_none']}";
reg_error_email_missing  = "{ipb.lang['reg_error_email_missing']}";
reg_error_email_nm       = "{ipb.lang['reg_error_email_nm']}";
reg_error_email_taken    = "{ipb.lang['reg_error_email_taken']}";
reg_error_email_ban      = "{ipb.lang['reg_error_email_ban']}";
var got_dname = 0;
<if="ipb.vars['auth_allow_dnames'] == 1 OR ipb.vars['converge_login_method'] == 'email'">
got_dname = 1;
</if>

init_reg_form(got_dname, register_method);
//]]>
</script>
no logro ponerlo se me deforma todo :S

graciassssssssssssssss

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




La zona horaria es GMT -6. Ahora son las 06:04.