Intentando ajustar bordes en Html.

xavinet · #1 (**permalink**) 18/09/2011, 16:17

Me presento antes de nada. Soy Xavinet, llevo como 2 meses leyendo manuales y libros de Html, tengo mis nociones básicas (o eso creo).

Así que como me veo verde pero no tan verde

como para no hacer nada, decidí hacer una web para un amigo, para su peluquería. Algo estático, que sea entrar y saber los horarios, donde esta localizada y precios.

Bueno al voy al grano. Buscando en Google como hacer tablas con bordes redondeados los que están tan de moda ahora. Pues encontré un código que añadí, quedando algo así.

Resumido:

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Peluquers</title>
</head>

<body topmargin=50>

<style type="text/css">
.borde{display:block}
.borde *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#1099F5}
.borde1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #2dce81;
  border-right:1px solid #2dce81;
  background:#1cb0c2}
.borde2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #3ded3e;
  border-right:1px solid #3ded3e;
  background:#19aace}
.borde3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #19aace;
  border-right:1px solid #19aace;}
.borde4{
  border-left:1px solid #2dce81;
  border-right:1px solid #2dce81}
.borde5{
  border-left:1px solid #1cb0c2;
  border-right:1px solid #1cb0c2}
.bordefg{
  background:#1099F5}
</style>

<div>
  <b class="borde">
  <b class="borde1"><b></b></b>
  <b class="borde2"><b></b></b>
  <b class="borde3"></b>
  <b class="borde4"></b>
  <b class="borde5"></b></b>

  <div class="bordefg">
    <table align="center" cellspacing="0">
   <tr>
    <td colspan="2" width="1000" height="100">Titulo</td>
   </tr>
   <tr>
    <td width="300" height="200"> Menus</td>
    <td width="700" height="200"> Text</td>
   </tr>
</table>
  </div>

  <b class="borde">
  <b class="borde5"></b>
  <b class="borde4"></b>
  <b class="borde3"></b>
  <b class="borde2"><b></b></b>
  <b class="borde1"><b></b></b></b>
</div>

</body>

</html>

El problema que tengo es que los bordes azules de derecha e izquierda llegan muy lejos en horizontal y quisiera que quedase mas pequeño, una tabla menos ancha.

No se si estoy preguntando alguna tontería o que. No seáis muy malos con migo haha

.

Saludos y gracias por la ayuda.

ArturoGallegos · #2 (**permalink**) 18/09/2011, 19:26

y no te gustaría hacerlo mejor con CSS3, de esa forma es mucho mas sencillo

investiga la propiedad border-radius del CSS3 y aqui en esta pagina encontraras lo necesario para que funcione en IE -> clic aquí

xavinet · #3 (**permalink**) 19/09/2011, 01:21

Wua! que bonito. Pues mi idea era poner algo así creía que con código no era posible, que sería flash o algo así.

Madre mía pues no estoy perdido ni nada con los estilos haha

Muchas gracias por la rápida respuesta.

Saludos.