Foros del Web » Creando para Internet » HTML »

Ayudaaa!!!

Estas en el tema de Ayudaaa!!! en el foro de HTML en Foros del Web. Hola... estoy haciendo un menú para mi web y me encuentro con el siguiente problema. Como gran parte de este menú lo saque de otra ...
  #1 (permalink)  
Antiguo 25/09/2006, 22:03
 
Fecha de Ingreso: agosto-2005
Mensajes: 16
Antigüedad: 12 años, 3 meses
Puntos: 0
Exclamación Ayudaaa!!!

Hola... estoy haciendo un menú para mi web y me encuentro con el siguiente problema.
Como gran parte de este menú lo saque de otra pagina, hay cosas que no se si están demás o están bien. Por ejemplo no se si es necesario que algunas cosas se repitan, tal vez no cumplen ningún sentido en el código. Espero que me puedan ayudar también en ese aspecto.

1. El menú tiene que tener, cada celda 17px de alto… eso no se de donde cambiarlo.
2. También la tabla tendría que tener un borde de 1px (toda la tabla) y entre cada celda (en vez de los espacios en blancos).
3. Por otro lado la tabla completa debería alejarse 2 px del margen izquierdo.
4. por ultimo el texto debería separarse 2 o 3 pixeleles de cada celda ya que esta demasiado abajo. O sea que se centre un poco más.

También me encantaría que alguien me pueda explicar que es cuando aparece esto:

padding: 4px 0 0 15px; (o por ejemplo)
margin: 0 0 0px 0;

a lo que voy, no se mucho de css.. y no se que son tantos números.. Yo solo se cuando es un solo numero después del atributo.

Y otra cosa….
Este fragmento del css

body {
margin: 0 auto;
padding: 0;
font-style:normal; font-variant:normal; font-weight:normal; font-size:76%; font-family:Verdana, Tahoma, Arial, sans-serif
}

venía con la página que vi.. pero si lo borro .. la tabla se agranda y no entiendo en que aspecto es necesario.


Espero que me puedan ayudar y desde ya estaré eternamente muy agradecido!! =) Gracias!

Acá esta el código:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu</title>

<STYLE type=text/css>



body {
margin: 0 auto;
padding: 0;
font-style:normal; font-variant:normal; font-weight:normal; font-size:76%; font-family:Verdana, Tahoma, Arial, sans-serif
}

#avmenu {
clear: left;
float: left;
width: 145px;
margin: 0 0 10px 0;
padding: 0;
}

#avmenu ul {
list-style: none;
width: 145px;
margin: 0 0 0px 0;
padding: 0;
}

#avmenu li {
margin-bottom: 1px;
}

#avmenu li a {
font-weight: normal; font-size: 11px; font-family: tahoma, arial; text-decoration: none; color: #333333;
height: 13px;
color: #505050;
display: block;
padding: 4px 0 0 15px;
background: #f4f4f4;
}

#avmenu li a:hover {
background: #eaeaea;
}

</STYLE>

</head>


&nbsp;<div id="avmenu">
<ul>
<li><a href="#">Categorias</a></li>
<li><a href="#">Articulo1</a></li>
<li><a href="#">Articulo2</a></li>
<li><a href="#">Articulo3</a></li>
<li><a href="#">Articulo4</a></li>
<li><a href="#">Articulo5</a></li>
<li><a href="#">Articulo6</a></li>
</ul>

</div>

</div>
</body>
</html>
  #2 (permalink)  
Antiguo 26/09/2006, 10:22
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Un par de cosas. Lo que no deberías quitar son los créditos del autor. No es algo complejo, asi que no veo mucho problema que te hayas agarrado el código, pero trata de respetar ese punto.

1) Padding es el espacio al rededor del contenido de una etiqueta bloque, antes del borde, y margin es después del borde.
Revisa esto:
http://www.sidar.org/recur/desdi/traduc/es/css/box.html

Cita:
padding: 4px 0 0 15px;
margin: 0 0 0px 0;
de los 4 valores (están un poco mal escritos, pero funcionan)
te dicen margin: arriba, derecha, abajo, izquierda.
Mal escritos ya que conviene marcar claramente
4px 0px 0px 15px.
en caso de 0 no importa que no aparezca px.
2)
Cita:
body {
margin: 0 auto;
padding: 0;
font-style:normal; font-variant:normal; font-weight:normal; font-size:76%; font-family:Verdana, Tahoma, Arial, sans-serif
}
basicamente si lo eliminas el tamaño de letra, en vez de medir 76% mide 100%, el tamaño normal.
Lo azul pues está maecando los valores normales, así que en este caso eso si sobra.

3) tus medidas, te doy unas, las otras, con lo explicado muevele un poquito cada vez hasta que le des.

por ejemplo, el margen de 2px, para toooda la lista, analiza
toda la lista está en el div llamado #avmenu, entonces, con lo explicado
#avmenu {
clear: left;
float: left;
width: 145px;
margin: 0 0 10px 2px;
padding: 0;
}

TAREA, aparte de que tu resuelvas lo del alto de 17px, te ayudo un poco con el borde.

Cita:
#avmenu ul {
list-style: none;
width: 145px;
margin: 0 0 0px 0;
padding: 1px;
background-color: red;

}
Analiza un poco para que veas que pasa

Última edición por Rafael; 26/09/2006 a las 10:32
  #3 (permalink)  
Antiguo 26/09/2006, 11:42
 
Fecha de Ingreso: agosto-2005
Mensajes: 16
Antigüedad: 12 años, 3 meses
Puntos: 0
Hola!! muchas gracias por la respuesta.. estaba muy detallado .jej... hice todas las modificaciones... y esta todo perfecto.. la tabla es exactamente como quiero.. el unico problema es que al poner el background-color.. en la ultima celda quedo un borde de 2px a diferencia de las demas de 1 px.. se puede hacer que el borde de 2 px final cambie a 1px?... desde ya muchas gracias!

Aca esta el código...

- - - - - - - - - - - - - - - - - - - - - - - - - - - -

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu</title>

<STYLE type=text/css>



body {
margin: 0 auto;
padding: 0;
font-size:76%; font-family:Verdana, Tahoma, Arial, sans-serif
}

#avmenu {
clear: left;
float: left;
width: 145px;
margin: 0 0 0px 10px;
padding: 0;
}

#avmenu ul {
list-style: none;
width: 145px;
margin: 0px 0px 0px 0px;
padding: 1px;
background-color: #CCCCCC;
}

#avmenu li {
margin-bottom: 1px;
}

#avmenu li a {
font-weight: normal; font-size: 11px; font-family: tahoma, arial; text-decoration: none; color: #333333;
height: 1px;
color: #333333;
display: block;
padding: 2px 0px 2px 15px;
background: #FFFFFF;
}

#avmenu li a:hover {
background: #F0F0F0;
}

</STYLE>

</head>


&nbsp;<div id="avmenu">
<ul>
<li><a href="#">Categorías</a></li>
<li><a href="#">Articulo1</a></li>
<li><a href="#">Articulo2</a></li>
<li><a href="#">Articulo3</a></li>
<li><a href="#">Articulo4</a></li>
<li><a href="#">Articulo5</a></li>
<li><a href="#">Articulo6</a></li>
</ul>

</div>

</div>
</body>
</html>

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
  #4 (permalink)  
Antiguo 27/09/2006, 10:03
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Modifica el último li así:

<li style="margin-bottom: 0px;"><a href="#">Articulo6</a></li>
  #5 (permalink)  
Antiguo 27/09/2006, 14:30
 
Fecha de Ingreso: agosto-2005
Mensajes: 16
Antigüedad: 12 años, 3 meses
Puntos: 0
Rafael gracias por toda la ayuda! este menu me esta llevando mas tiempo del que deseaba y a pesar de que gracias a el aprendi bastante, en especial de css cuando creo que mas o menos domino el arte "cssiano" surgen nuevas dudas.. yo crei que ya no iba a necesitar ayuda.. aahha me esta volviendo loco... pero ya es algo personal jaja .. tengo la necesidad de ver esto terminado!!

bueno hice el cambio que me dijiste y quedo perfecto el tema del borde... y ahora queria hacer algo que no mencione antes .. que el nombre de la tabla este arriba en otra div (no se si es lo correcto hacerlo en otra div, esto para que no este recuadrado por el pixel gris o sea que quede solo este una imagen (fondocelda.gif) que tiene los bordes circulares y el texto) ... lo hice.. crei que me había quedado bien, pues lo probe en internet explorer pero cuando lo puse en mozilla la tabla aparecia todo deformada y no entiendo porque ya que pense que habia hecho todo bien pero no.. bueno espero que este sea el ultimo pedido de ayuda para esta tabla.. desde ya muchas gracias y aprecio el tiempo dedicadao jajaj .. gracias!

Aqui esta como lo hice...

----------------------------------

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu</title>

<STYLE type=text/css>



body {
margin: 0 auto;
padding: 0;
font-size:76%; font-family:Verdana, Tahoma, Arial, sans-serif
}

.avmenu2 {
clear: left;
float: left;
width: 145px;
margin: 0 0 0px 10px;
padding: 0;
padding: 2px 0px 2px 15px;
font-weight: normal; font-size: 11px; font-family: tahoma, arial; text-decoration: none; color: #333333;
background: url('fondocelda.gif');
background-repeat: no-repeat;
}


#avmenu {
clear: left;
float: left;
width: 145px;
margin: 0 0 0px 10px;
padding: 0;
}

#avmenu ul {
list-style: none;
width: 145px;
margin: 0px 0px 0px 0px;
padding: 1px;
background-color: #CCCCCC;
}

#avmenu li {
margin-bottom: 1px;
}

#avmenu li a {
font-weight: normal; font-size: 11px; font-family: tahoma, arial; text-decoration: none; color: #333333;
height: 1px;
color: #333333;
display: block;
padding: 2px 0px 2px 15px;
background: #FFFFFF;
}

#avmenu li a:hover {
background: #F0F0F0;
}

</STYLE>

</head>


<div class="avmenu2">Categorías
</div>

<div id="avmenu">
<ul>
<li><a href="#">Articulo0</a></li>
<li><a href="#">Articulo1</a></li>
<li><a href="#">Articulo2</a></li>
<li><a href="#">Articulo3</a></li>
<li><a href="#">Articulo4</a></li>
<li><a href="#">Articulo5</a></li>
<li style="margin-bottom: 0px;"><a href="#">Articulo6</a></li></ul>
</div>

</div>
</body>
</html>

----------------------------------

gracias!
  #6 (permalink)  
Antiguo 27/09/2006, 16:02
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Tienes esto:
Cita:
avmenu li a {
font-weight: normal; font-size: 11px; font-family: tahoma, arial; text-decoration: none; color: #333333;
height: 1px;
color: #333333;
display: block;
padding: 2px 0px 2px 15px;
background: #FFFFFF;
}
Eliminalo

El título intégralo dentro del div, para que sea una unidad:
Cita:
<div id="avmenu">
<div class="avmenu2">Categorías</div>

<ul>
<li><a href="#">Articulo0</a></li>
<li><a href="#">Articulo1</a></li>
<li><a href="#">Articulo2</a></li>
<li><a href="#">Articulo3</a></li>
<li><a href="#">Articulo4</a></li>
<li><a href="#">Articulo5</a></li>
<li style="margin-bottom: 0px;"><a href="#">Articulo6</a></li></ul>
<div>

Última edición por Rafael; 27/09/2006 a las 16:07
  #7 (permalink)  
Antiguo 28/09/2006, 01:01
 
Fecha de Ingreso: agosto-2005
Mensajes: 16
Antigüedad: 12 años, 3 meses
Puntos: 0
Desacuerdo

Hola... gracias de vuelta!.. hice los cambios pero ahora esta mucho peor que antes, no entiendo que pasa!!!!!!!!

me estoy volviendo LOCOOO!!!

aca esta el codigo modificado

----------------------------------

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu</title>

<STYLE type=text/css>



body {
margin: 0 auto;
padding: 0;
font-size:76%; font-family:Verdana, Tahoma, Arial, sans-serif
}

.avmenu2 {
clear: left;
float: left;
width: 145px;
margin: 0 0 0px 10px;
padding: 0;
padding: 2px 0px 2px 15px;
font-weight: normal; font-size: 11px; font-family: tahoma, arial; text-decoration: none; color: #333333;
background: url('fondocelda.gif');
background-repeat: no-repeat;
}


#avmenu {
clear: left;
float: left;
width: 145px;
margin: 0 0 0px 10px;
padding: 0;
}

#avmenu ul {
list-style: none;
width: 145px;
margin: 0px 0px 0px 0px;
padding: 1px;
background-color: #CCCCCC;
}

#avmenu li {
margin-bottom: 1px;
}

#avmenu li a {
font-weight: normal; font-size: 11px; font-family: tahoma, arial; text-decoration: none; color: #333333;
color: #333333;
display: block;
padding: 2px 0px 2px 15px;
background: #FFFFFF;
}

#avmenu li a:hover {
background: #F0F0F0;
}

</STYLE>

</head>


<div id="avmenu">
<div class="avmenu2">Categorías</div>
<ul>
<li><a href="#">Articulo0</a></li>
<li><a href="#">Articulo1</a></li>
<li><a href="#">Articulo2</a></li>
<li><a href="#">Articulo3</a></li>
<li><a href="#">Articulo4</a></li>
<li><a href="#">Articulo5</a></li>
<li style="margin-bottom: 0px;"><a href="#">Articulo6</a></li></ul>
<div>

</div>
</body>
</html>

gracias!
  #8 (permalink)  
Antiguo 28/09/2006, 14:13
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Ok por partes.

Un bug. Vas a tener que agregar

Cita:
* html #avmenu li a {width: 145px;}
y eliminar de

Cita:
.avmenu2 {
clear: left;
float: left;
  #9 (permalink)  
Antiguo 28/09/2006, 14:17
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Y un comentario. El hecho de que partiste de un menú hecho trae como consiguiente que tengas elementos excesivos.

No entiendo para que hace falta meter los a dentro de los li, la unica razón debe estar fuera del codigo, solo se justifica si hay un javascript por ahí controlando el menu.
  #10 (permalink)  
Antiguo 05/10/2006, 01:04
 
Fecha de Ingreso: agosto-2005
Mensajes: 16
Antigüedad: 12 años, 3 meses
Puntos: 0
Exclamación

Hola de nuevo, bueno antes que nada gracias Rafael por preocuparte en la ayuda. Lamentablemente sigo teniendo problemas .. les juro que ya enloqueci con el menu... pero ya es algo personal ajaj...

Hice todos los cambios y tengo el siguiente problema...

asi es como me queda en el navegador Mozilla:

celayacossettini.com.ar/pruebas/mozilla.jpg

y asi es como me queda en el navegador de WIndows:

celayacossettini.com.ar/pruebas/iexplorer.jpg

La ultima modificacion del codigo esta en

celayacossettini.com.ar/pruebas/menu1.htm

Por favor ayudenme .. creo que falta poco!!! ajaj gracias gracias gracias
  #11 (permalink)  
Antiguo 06/10/2006, 15:41
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
ok dame chance para revisar.
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 03:39.