hola a todos estoy practicando un poco de html y css y bueno decidi colocar una imagen que consegui en internet y dicha imagen queda muy por debajo del sitio donde yo deseo que quede esta misma
[align=center]
aca les dejo una imagen para que vean mi problema[/align]
(http://fotos.subefotos.com/a81a8f77362b0c2861bfc98c5268b98co.jpg)
aca les dejo el codigo html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<table width="100%" height="109px">
<tr>
<td><img src="images/Sin título-1.jpg" width="87" height="108" /></td>
<td class="central"><p>Tratamientos Cosmeticos Faciales y Corporales</p></td>
<td><img src="images/Sin título-2.jpg" width="135" height="108" align="right" /></td>
</tr>
</table>
</div>
<div id="contenedordebotones"><table align="center" width="58%">
<tr>
<td class="boton1"><a>Inicio</a></td>
<td class="boton2"><a>Tratamientos Corporales</a></td>
<td class="boton3"><a>Tratamientos Faciales</a></td>
<td class="boton4"><a>Contacto</a></td>
</tr>
</table>
</div>
<div id="cuerpo">
<img src="images/imagen_inicio.png" width="1440" height="762" />
</div>
</body>
</html>
y aca el codigo css
#header{
height: 109px;
}
.central{
font-family: "Monotype Corsiva";
font-size: 30px;
background-color: #996600;
height: 109px;
text-align: center;
border-width: 1px; border-style: solid; border-color: black;
}
#contenedordebotones{margin-top: 8px;
font-family: "Monotype Corsiva";
width: 100%;
line-height: 120%;
text-align: center;
font-size: 20px;
font-style: normal;
color: #000;
background-color: #C03;
border-width: 1px; border-style: solid; border-color: black;}
.boton1 a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }
.boton2 a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }
.boton3 a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }
.boton4 a { text-decoration: none; border-radius: 10px; padding: 0px 5px 0px 5px; }
a:hover { background: #FFF; }
#cuerpo {
}
gracias a quien me pueda ayudar
en el css añade lo siguiente:
#contenedordebotones{margin-top: 8px;
font-family: "Monotype Corsiva";
width: 100%;
line-height: 120%;
text-align: center;
font-size: 20px;
font-style: normal;
color: #000;
background-color: #C03;
border-width: 1px; border-style: solid; border-color: black;7
margin-bottom: 0;
}
#cuerpo {
margin-top: 0;
}Si por casualidad no se coloca donde quieres, ve poniendo valores negativos a margin-top de #cuerpo. Por ejemplo:
margin-top: -100px;
en el css añade lo siguiente:
#contenedordebotones{margin-top: 8px;
font-family: "Monotype Corsiva";
width: 100%;
line-height: 120%;
text-align: center;
font-size: 20px;
font-style: normal;
color: #000;
background-color: #C03;
border-width: 1px; border-style: solid; border-color: black;7
margin-bottom: 0;
}
#cuerpo {
margin-top: 0;
}Si por casualidad no se coloca donde quieres, ve poniendo valores negativos a margin-top de #cuerpo. Por ejemplo:
margin-top: -100px;
gracias por la ayuda el problema fue d eparte mia ya que no soy muy diestro en fireworks recorte la imagen pero la parte que se ve en blanco sigue siendo parte de la misma imagen que hice la volvi a recortar otra ves y listo tema resuelto
ya decia yo que sin haber puesto margenes y ese espacio no me cuadraba el asunto... ;D