Anónimo
Posición de un div
Mi problema es sencillo pero no logro solucionarlo es el siguiente
tengo una tabla
<tabla>
<tr>
<td>
<div class=menu9" ></div>
</td>
<td>
un formulariio extenso
</td>
<tr>
Resulta que el menu me sale en la mitad de la primera columna yo quiero que se posiscione en la esquina superior izquierda de mi tabla por favor ayuda este es el css de mi menu
<html>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu9 {
width: 200px;
margin: 10px;
}
#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 35px;
}
#menu9 li a:hover {
color: #FFF;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style>
tengo una tabla
<tabla>
<tr>
<td>
<div class=menu9" ></div>
</td>
<td>
un formulariio extenso
</td>
<tr>
Resulta que el menu me sale en la mitad de la primera columna yo quiero que se posiscione en la esquina superior izquierda de mi tabla por favor ayuda este es el css de mi menu
<html>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu9 {
width: 200px;
margin: 10px;
}
#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 35px;
}
#menu9 li a:hover {
color: #FFF;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style>
1 Respuesta
Respuesta de krlosnow
1
Lo primero que veo raro es que al div le das el class "menu9" y en la hoja de estilo, "menu9" lo tratas como un id. Para que funcione, en tu hoja de estilo deberás tener ".menu9{...}" en vez de "#menu9{...}" y lo mismo para el resto de estilos que tienen que ver con menu9.
Después, para que salga en la esquina superior izquierda, no hay que hacer nada. Es el tratamiento por defecto. Pero para asegurarte que que el menú lo planta donde quieres, puedes poner:
.menu9 {
position:relative;
left:0px;
top:0px;
width: 200px;
margin: 10px;
}
Si te sigue sin funcionar, pásame el html completo de la página y le echo un vistazo.
Después, para que salga en la esquina superior izquierda, no hay que hacer nada. Es el tratamiento por defecto. Pero para asegurarte que que el menú lo planta donde quieres, puedes poner:
.menu9 {
position:relative;
left:0px;
top:0px;
width: 200px;
margin: 10px;
}
Si te sigue sin funcionar, pásame el html completo de la página y le echo un vistazo.
Voy a probar si me resulta
Ah otra cosa yo tengo esto en mi estilo de mi body para centrar mi stio sirve en IE pero no en mozilla como lo puedo arreglar para que centre todas las página
body{
font-family: arial,verdana;
font-style: normal;
font-size: 14px;
color:#000000;
background:('../imagenes/imagen.jpeg') ; // color del fondo exterior y que sale en las demas paginas
padding:0px;
margin:0px;
}
Ah otra cosa yo tengo esto en mi estilo de mi body para centrar mi stio sirve en IE pero no en mozilla como lo puedo arreglar para que centre todas las página
body{
font-family: arial,verdana;
font-style: normal;
font-size: 14px;
color:#000000;
background:('../imagenes/imagen.jpeg') ; // color del fondo exterior y que sale en las demas paginas
padding:0px;
margin:0px;
}
Perdona pero en el estilo que muestras no parece que haya nada que centre los elementos. ¿No tendrás un <center> en algún sitio? Prueba meter en el estilo de tu body
text-align:center;
Un saludo: Carlos.
text-align:center;
Un saludo: Carlos.
Si no hay nada que centre, la idea es que centre todo el contenido de la página no el texto que contiene.
Como podría centrar la página
Gracias
Como podría centrar la página
Gracias
Lo de la posición relativa no me sirve te mando todo el html
<table>
<tr>
<td>
<h2>Correo interno</h2>
<div id='menu9'>
<ul>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/index.php' title='Pagina Principal'>Pagina Principal</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/bandeja_entrada.php' title='Bandeja entrada'>Bandeja Entrada</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/redactar.php' title='Escriba su mensaje'>Redactar Mensaje</a></li>
<li><a href='insertar_noticia.php' title='Noticias'>Noticias </a></li>
</ul>
</div>
<td>
</td>
</td>
<td class='estilocelda'>
<?
$mensaje = "
<h1>
<p align='left'>Redactar Noticias</p>
</h1>
";
echo $mensaje;?>
<form action='procesa_noticia.php' name='form1' id='form1' enctype='multipart/form-data' method='post' >
<p align='left'>Titulo<br>
<input type='text' name='titulo' size='40'></p>
<br>
<p align='left'>Suba una imagen para su noticia:
<br>
<i><b>(Su imagen debe ser jpg o gif y el tamaño maximo debe ser de 100k)</i></b>
<br><input type='file' name='userfile' size='40' onchange='comprueba_extension(this.form, this.form.userfile.value)'></p>
<p align='left'> Resumen noticia </p>
<textarea cols='40' rows='10' name='articulo'></textarea><br>
<br>
<p align='center'><input type = 'button' value = 'enviar' onclick = 'validar()'></p>
</td>
</table>
El menu(letra en negrilla) no me queda en la esquina superior izquierda me queda en la mitad
Que puedo hacer gracias por tu ayuda
<table>
<tr>
<td>
<h2>Correo interno</h2>
<div id='menu9'>
<ul>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/index.php' title='Pagina Principal'>Pagina Principal</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/bandeja_entrada.php' title='Bandeja entrada'>Bandeja Entrada</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/redactar.php' title='Escriba su mensaje'>Redactar Mensaje</a></li>
<li><a href='insertar_noticia.php' title='Noticias'>Noticias </a></li>
</ul>
</div>
<td>
</td>
</td>
<td class='estilocelda'>
<?
$mensaje = "
<h1>
<p align='left'>Redactar Noticias</p>
</h1>
";
echo $mensaje;?>
<form action='procesa_noticia.php' name='form1' id='form1' enctype='multipart/form-data' method='post' >
<p align='left'>Titulo<br>
<input type='text' name='titulo' size='40'></p>
<br>
<p align='left'>Suba una imagen para su noticia:
<br>
<i><b>(Su imagen debe ser jpg o gif y el tamaño maximo debe ser de 100k)</i></b>
<br><input type='file' name='userfile' size='40' onchange='comprueba_extension(this.form, this.form.userfile.value)'></p>
<p align='left'> Resumen noticia </p>
<textarea cols='40' rows='10' name='articulo'></textarea><br>
<br>
<p align='center'><input type = 'button' value = 'enviar' onclick = 'validar()'></p>
</td>
</table>
El menu(letra en negrilla) no me queda en la esquina superior izquierda me queda en la mitad
Que puedo hacer gracias por tu ayuda
Te paso el código html con el elemento clave resaltado:
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.menu9 {
width: 200px;
margin: 10px;
}
.menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
.menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 35px;
}
.menu9 li a:hover {
color: #FFF;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style>
</head>
<body>
<table>
<tr>
<td valign="top">
<h2>Correo interno</h2>
<div id='menu9'>
<ul>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/index.php' title='Pagina Principal'>Pagina Principal</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/bandeja_entrada.php' title='Bandeja entrada'>Bandeja Entrada</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/redactar.php' title='Escriba su mensaje'>Redactar Mensaje</a></li>
<li><a href='insertar_noticia.php' title='Noticias'>Noticias </a></li>
</ul>
</div>
<td>
</td>
</td>
<td class='estilocelda'>
<?
$mensaje = "
<h1>
<p align='left'>Redactar Noticias</p>
</h1>
";
echo $mensaje;?>
<form action='procesa_noticia.php' name='form1' id='form1' enctype='multipart/form-data' method='post' >
<p align='left'>Titulo<br>
<input type='text' name='titulo' size='40'></p>
<br>
<p align='left'>Suba una imagen para su noticia:
<br>
<i><b>(Su imagen debe ser jpg o gif y el tamaño maximo debe ser de 100k)</i></b>
<br><input type='file' name='userfile' size='40' onchange='comprueba_extension(this.form, this.form.userfile.value)'></p>
<p align='left'> Resumen noticia </p>
<textarea cols='40' rows='10' name='articulo'></textarea><br>
<br>
<p align='center'><input type = 'button' value = 'enviar' onclick = 'validar()'></p>
</td>
</table>
</body>
</html>
<html>
<head>
<style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 80%; font-weight: bold; background: #FFF; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } .menu9 { width: 200px; margin: 10px; } .menu9 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } .menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(menu9.gif); padding: 8px 0 0 35px; } .menu9 li a:hover { color: #FFF; background: url(menu9.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
</head>
<body>
<table>
<tr>
<td valign="top">
<h2>Correo interno</h2>
<div id='menu9'>
<ul>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/index.php' title='Pagina Principal'>Pagina Principal</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/bandeja_entrada.php' title='Bandeja entrada'>Bandeja Entrada</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/redactar.php' title='Escriba su mensaje'>Redactar Mensaje</a></li>
<li><a href='insertar_noticia.php' title='Noticias'>Noticias </a></li>
</ul>
</div>
<td> </td>
</td>
<td class='estilocelda'> <? $mensaje = "
<h1>
<p align='left'>Redactar Noticias</p>
</h1>
"; echo $mensaje;?> <form action='procesa_noticia.php' name='form1' id='form1' enctype='multipart/form-data' method='post' >
<p align='left'>Titulo<br> <input type='text' name='titulo' size='40'></p>
<br>
<p align='left'>Suba una imagen para su noticia: <br> <i><b>(Su imagen debe ser jpg o gif y el tamaño maximo debe ser de 100k)</i></b> <br><input type='file' name='userfile' size='40' onchange='comprueba_extension(this.form, this.form.userfile.value)'></p>
<p align='left'> Resumen noticia </p>
<textarea cols='40' rows='10' name='articulo'></textarea><br> <br>
<p align='center'><input type = 'button' value = 'enviar' onclick = 'validar()'></p>
</td>
</table>
</body>
</html>
El problema está en que usas tablas para maquetar. Mi consejo es que a partir de ahora uses divs contenedores, que puedas posicionar donde quieras.
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.menu9 {
width: 200px;
margin: 10px;
}
.menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
.menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 35px;
}
.menu9 li a:hover {
color: #FFF;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style>
</head>
<body>
<table>
<tr>
<td valign="top">
<h2>Correo interno</h2>
<div id='menu9'>
<ul>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/index.php' title='Pagina Principal'>Pagina Principal</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/bandeja_entrada.php' title='Bandeja entrada'>Bandeja Entrada</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/redactar.php' title='Escriba su mensaje'>Redactar Mensaje</a></li>
<li><a href='insertar_noticia.php' title='Noticias'>Noticias </a></li>
</ul>
</div>
<td>
</td>
</td>
<td class='estilocelda'>
<?
$mensaje = "
<h1>
<p align='left'>Redactar Noticias</p>
</h1>
";
echo $mensaje;?>
<form action='procesa_noticia.php' name='form1' id='form1' enctype='multipart/form-data' method='post' >
<p align='left'>Titulo<br>
<input type='text' name='titulo' size='40'></p>
<br>
<p align='left'>Suba una imagen para su noticia:
<br>
<i><b>(Su imagen debe ser jpg o gif y el tamaño maximo debe ser de 100k)</i></b>
<br><input type='file' name='userfile' size='40' onchange='comprueba_extension(this.form, this.form.userfile.value)'></p>
<p align='left'> Resumen noticia </p>
<textarea cols='40' rows='10' name='articulo'></textarea><br>
<br>
<p align='center'><input type = 'button' value = 'enviar' onclick = 'validar()'></p>
</td>
</table>
</body>
</html>
<html>
<head>
<style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 80%; font-weight: bold; background: #FFF; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } .menu9 { width: 200px; margin: 10px; } .menu9 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } .menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(menu9.gif); padding: 8px 0 0 35px; } .menu9 li a:hover { color: #FFF; background: url(menu9.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
</head>
<body>
<table>
<tr>
<td valign="top">
<h2>Correo interno</h2>
<div id='menu9'>
<ul>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/index.php' title='Pagina Principal'>Pagina Principal</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/bandeja_entrada.php' title='Bandeja entrada'>Bandeja Entrada</a></li>
<li><a href='http://simon.uis.edu.co/redescuela2/general/correointerno/redactar.php' title='Escriba su mensaje'>Redactar Mensaje</a></li>
<li><a href='insertar_noticia.php' title='Noticias'>Noticias </a></li>
</ul>
</div>
<td> </td>
</td>
<td class='estilocelda'> <? $mensaje = "
<h1>
<p align='left'>Redactar Noticias</p>
</h1>
"; echo $mensaje;?> <form action='procesa_noticia.php' name='form1' id='form1' enctype='multipart/form-data' method='post' >
<p align='left'>Titulo<br> <input type='text' name='titulo' size='40'></p>
<br>
<p align='left'>Suba una imagen para su noticia: <br> <i><b>(Su imagen debe ser jpg o gif y el tamaño maximo debe ser de 100k)</i></b> <br><input type='file' name='userfile' size='40' onchange='comprueba_extension(this.form, this.form.userfile.value)'></p>
<p align='left'> Resumen noticia </p>
<textarea cols='40' rows='10' name='articulo'></textarea><br> <br>
<p align='center'><input type = 'button' value = 'enviar' onclick = 'validar()'></p>
</td>
</table>
</body>
</html>
El problema está en que usas tablas para maquetar. Mi consejo es que a partir de ahora uses divs contenedores, que puedas posicionar donde quieras.