Foros del Web » Creando para Internet » CSS »

Diferencia de reglas - No comprendo

Estas en el tema de Diferencia de reglas - No comprendo en el foro de CSS en Foros del Web. ¿Qué diferencia existe entre estas dos reglas que prácticamente son iguales pero, aún no entiendo. Código HTML: <body id='wrox'> <ul id='pestanas'> <li id='pestana1'> <a href='wrox.html'> ...
  #1 (permalink)  
Antiguo 30/01/2009, 11:27
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Diferencia de reglas - No comprendo

¿Qué diferencia existe entre estas dos reglas que prácticamente son iguales pero, aún no entiendo.

Código HTML:
<body id='wrox'>
    <ul id='pestanas'>
      <li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
      <li id='pestana2'><a href='amazon.html'><span>Amazon</span></a></li>
      <li id='pestana3'><a href='google.html'><span>Google</span></a></li>
      <li id='pestana4'><a href='slashdot.html'><span>Slashdot</span></a></li>
      </a></li>
    </ul>
</div></div> 
Código HTML:
<body id='wrox'>
 <div id="menu">
  <ul>
    <li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
    <li id='pestana2'><a href='amazon.html'><span>Amazon</span></a></li>
    <li id='pestana3'><a href='google.html'><span>Google</span></a></li>
    <li id='pestana4'><a href='slashdot.html'><span>Slashdot</span></a></li>
  </ul>
</div> </div> 
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 30/01/2009, 11:33
Avatar de juanmi321  
Fecha de Ingreso: septiembre-2004
Mensajes: 262
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Diferencia de reglas - No comprendo

Pue slo que yo no entiendo, es tu pregunta. Si te refieres si hay diferencia entre las dos, si si hay en una abres un div y no lo cierras y en la otra lo cierras y no lo abres :S
__________________
<>< EN MOMENTOS DE CRISIS, SOLO LA IMAGINACIÓN ES MÁS IMPORTANTE QUE EL CONOCIMIENTO <><
  #3 (permalink)  
Antiguo 30/01/2009, 11:45
Avatar de javiro  
Fecha de Ingreso: febrero-2006
Mensajes: 48
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Diferencia de reglas - No comprendo

Es un poco rara tu pregunta, porque la diferencia que hay entre las dos, a parte de que hay cierres </div> sin aperturas, es el indicarle el estilo al contenedor que contiene la lista no numerica ul o indicarle directamente el estilo a la lista ul.
Pues esto son dos opciones con las cuales se puede hacer lo mismo, pero por otras cuestiones, ya se por programacion u otro asunto, te puede resultar uno u otro.

Pero, alomejor me equivoco y la diferencia es otra.

Salud!
  #4 (permalink)  
Antiguo 30/01/2009, 11:48
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Diferencia de reglas - No comprendo

El tema es que en el css en el primero pongo esto ul#pestañas {blablabla} y en el segundo pongo #menu ul {blablabla}

Yo diría que los dos son iguales pero ¿estoy en lo correcto? si es así ¿cuál seria el mejor método?.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 30/01/2009, 11:51
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Diferencia de reglas - No comprendo

Saludos!!

Para mi, la mejor forma es #menu ul {bla bla bla } por orden... al menos yo lo pongo asi.

Creo que cosa de sintaxis... cada quien diseña su codigo como mejor le parezca...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #6 (permalink)  
Antiguo 30/01/2009, 11:55
Avatar de juanmi321  
Fecha de Ingreso: septiembre-2004
Mensajes: 262
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Diferencia de reglas - No comprendo

Haber mira vamos por partes, esto mas que de CSS, es html basico.

Las etiquetas <ul></ul> simplemente son para darle un espacio conforme al margen izquierdo del docuemnto, mejor conocido como sangria.

Las etiquetas <div></div> son para crear una capa en el html y poner dentro de esa capa varios elementos, en este caso tus links

cuando le spones un id a cualquier elemento, es solo para poderlos llamar o hacer alguna referencia a ese elemento.

En conclusion, lo que tu pusiste no es lo mismo, digamos que para el cliente se ve igual, pero internamente no es lo mismo.

Espero haber sido claro
__________________
<>< EN MOMENTOS DE CRISIS, SOLO LA IMAGINACIÓN ES MÁS IMPORTANTE QUE EL CONOCIMIENTO <><
  #7 (permalink)  
Antiguo 30/01/2009, 14:51
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Diferencia de reglas - No comprendo

Si, existen diferencias, si se quieren hacer diferentes menues en una misma pagina y talves exista otra diferencia, no se en realidad.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #8 (permalink)  
Antiguo 30/01/2009, 18:13
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Diferencia de reglas - No comprendo

opps, me equivoque de código, en realidad es así

Código HTML:
<body id='wrox'>
    <ul id='pestanas'>
      <li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
      <li id='pestana2'><a href='amazon.html'><span>Amazon</span></a></li>
      <li id='pestana3'><a href='google.html'><span>Google</span></a></li>
      <li id='pestana4'><a href='slashdot.html'><span>Slashdot</span></a></li>
      <li id='pestana5'><a href='twit.html'><span>This Week in Tech</span></a></li>
    </ul>
    <div id='iframe'>
      <iframe src='http://p2p.wrox.com' frameborder='0' marginheight='0' marginwidth='0'></iframe>
    </div>
  </body> 
Cita:
Las etiquetas <div></div> son para crear una capa en el html y poner dentro de esa capa varios elementos, en este caso tus links
El código funciona aun así
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #9 (permalink)  
Antiguo 30/01/2009, 18:16
Avatar de juanmi321  
Fecha de Ingreso: septiembre-2004
Mensajes: 262
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Diferencia de reglas - No comprendo

Asi es Dopey, mira dentro del <body> tienes un interlineado, marcado dentro de los <ul></ul> y al finalizar el interlineado tienes una capa <div> y dentro de la capa tienes un <iframe>

comprendido????
__________________
<>< EN MOMENTOS DE CRISIS, SOLO LA IMAGINACIÓN ES MÁS IMPORTANTE QUE EL CONOCIMIENTO <><
  #10 (permalink)  
Antiguo 30/01/2009, 18:33
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Diferencia de reglas - No comprendo

pero, poniendo
Código HTML:
<ul>
      <li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
</ul> 
¿no conseguiría lo mismo?
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #11 (permalink)  
Antiguo 31/01/2009, 10:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Diferencia de reglas - No comprendo

No sé bien lo que quieres decir, pero con <body id='wrox'> <ul id='pestanas'>, te puedes referir en la CSS a ese "ul" en concreto de manera inequivoca, de forma que si hicieras

#wrox ul {...

puede que hubiera más de un "ul" dentro de esa caja "wrox", mientras que con:

ul#pesatañas {... o con #pestañas simplemente, te refieres específicamente a esa lista, nada más.
Funcionaría igual, efectivamente, pero puede que una te produjera futuros problemas por ambigua y la otra no por inequívoca.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 31/01/2009, 15:15
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Diferencia de reglas - No comprendo

Cita:
#wrox ul {...

puede que hubiera más de un "ul" dentro de esa caja "wrox", mientras que con:
Perdona mi ignorancia pero, cuando te refieres a otro ul, imagino que te refieres a otro menú ¿estoy en lo correcto?


Yo tengo 5 cajas y lo único que cambia es el <body id='wrox'> en conjunto a los enlaces...

si yo le doy a amazon me voy a la caja de amazon obvio, no se si es a eso que te referes o es a lo que te dije al principio de este mensaje en particular
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #13 (permalink)  
Antiguo 31/01/2009, 15:58
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Diferencia de reglas - No comprendo

DoPey. Yo tampoco entiendo muy bien que necesitas. Como nadie está viendo el código css posiblemente reaccionen las cosas diferente, porque estás poniendo cosas diferentes, que ciertamente pueden funcionar igual.

Pero para fines prácticos probablemente te convenga más poner el menú dentro de un div, así no te limitarás por ejemplo a poner una sola lista, sino podrás poner un título al menú, una lista, otro subtítulo, otra lista, por ejemplo.

Poner el ul directo dentro del body, probablemente te quite flexibilidad.

Ejemplo metiendo las cosas en un div, y dentro 2 ul diferentes:
-------------------------
Quienes Somos
  • Tema1
  • Tema2
  • Tema3
Que Hacemos
  • Tema4
  • Tema5
--------------------

Si asignas estilos a div#Menu ul {bla bla}
No tendrás que estar asignando class o Id a las 2 ul por separado. Las ul se actualizarán solitas.
  #14 (permalink)  
Antiguo 31/01/2009, 16:04
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Diferencia de reglas - No comprendo

Creo que lo mejor aqui, es que digas que es lo que quieres hacer, y aqui te decimos como! porque realmente esta medio complicado entenderte...

Entoces... nos ayudas con eso, y nosotros te ayudamos con lo tuyo! si?
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #15 (permalink)  
Antiguo 31/01/2009, 16:07
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Diferencia de reglas - No comprendo

Cita:
Las etiquetas <ul></ul> simplemente son para darle un espacio conforme al margen izquierdo del docuemnto
Juanmi, más bien las etiquetas ul y dentro los a son para respetar más las normas de accesibilidad.

El elemento a es un elemento inline.
Si pusiera yo un párrafo con varios links diferentes dentro, en realidad sigue siendo un sólo párrafo. Un lector lo leerá de corrido, como un sólo párrafo. Poner un menú de a seguidos se leerá como un trabalenguas de palabras o frases.

En cambio un ul es una lista, como la lista del supermercado, de las compras, de las tareas, con su debída separación, posiblemente entonada como comas.

Semánticamente es distinto, visualmente se podrá ver igual. Saludos.
  #16 (permalink)  
Antiguo 31/01/2009, 16:25
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Diferencia de reglas - No comprendo

Yo quiero hacer un menú con pestaña en la cual la primera llama a la indicada wrox, la segunda llama a la amazon y así sucesivamente
Código HTML:
 <body id='wrox'>
    <ul id='pestanas'>
      <li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
      <li id='pestana2'><a href='amazon.html'><span>Amazon</span></a></li>
      <li id='pestana3'><a href='google.html'><span>Google</span></a></li>
      <li id='pestana4'><a href='slashdot.html'><span>Slashdot</span></a></li>
      <li id='pestana5'><a href='twit.html'><span>This Week in Tech</span></a></li>

    </ul>
    <div id='iframe'>
      <iframe src='http://p2p.wrox.com' frameborder='0' marginheight='0' marginwidth='0'></iframe>
    </div>
  </body> 
Código HTML:
 <body id='amazon'>
    <ul id='pestanas'>
      <li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
      <li id='pestana2'><a href='amazon.html'><span>Amazon</span></a></li>
      <li id='pestana3'><a href='google.html'><span>Google</span></a></li>
      <li id='pestana4'><a href='slashdot.html'><span>Slashdot</span></a></li>
      <li id='pestana5'><a href='twit.html'><span>This Week in Tech</span></a></li>
    </ul>
    <div id='iframe'>
      <iframe src='http://www.amazon.com' frameborder='0' marginheight='0' marginwidth='0'></iframe>
    </div>
  </body> 
Entonces, el css sería este
Código HTML:
body, html {
  margin: 0;
  padding: 0;
}
ul#pestanas {
  list-style: none;
  margin: 0;
  padding: 10px 0 0 0;
  height: 25px;
  border-bottom: 1px solid black;
  background: rgb(222, 222, 222);
}
ul#pestanas li {
  float: left;
  margin: 0 5px;
  height: 23px;
  text-align: center;
  position: relative;
  width: 150px;
  border: 1px solid black;
  top: 1px;
  background: rgb(128, 128, 128);
}
ul#pestanas li:hover {
  border-bottom: 1px solid white;
  background: white;
}
ul#pestanas a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: white;
  font: 14px Arial, sans-serif;
}
body#wrox li#pestana1,
body#amazon li#pestana2,
body#google li#pestana3,
body#slashdot li#pestana4,
body#twit li#pestana5 {
  background: white;
  border-bottom: 1px solid white;
}
ul#pestanas a:hover,
body#wrox li#pestana1 a,
body#amazon li#pestana2 a,
body#google li#pestana3 a,
body#slashdot li#pestana4 a,
body#twit li#pestana5 a {
  color: black;
}
ul#pestanas span {
  display: block;
  padding: 4px 10px 0 10px;
}
div#iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin-top: 50px;
  border-top: 1px solid black;
}
iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Yo digo que de esta forma hay mucho mas cogido que si pusiera #menu ul pero realmente yo estoy aun un poco nuevo en css como para entender ciertas cosas... claro, e aprendido pero yo no soy una persona autodidacta lol
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #17 (permalink)  
Antiguo 31/01/2009, 17:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Diferencia de reglas - No comprendo

No, hay la misma cantidad de código.

Te da igual poner un div con su ID, y dentro de este un UL sin ID, que no poner ese div y ponerle un ID al UL. Para identificarlos es más o menos lo mismo, pero como te he dicho, por un lado para poner una lista desordenada (UL) no es necesario que una caja la contenga, y por otro lado si la caja #menu tuviera más de una lista (me preguntas si otro menú, pero podría otra lista de cosas, de información sin más, sin ser un menú), poniendo #menu ul ambas se verían afectadas por igual, que quizá no es lo que quieres.

Tú sólo piensa cuan inequívoco necesitas que sea un elemento y cómo hacerlo:
- ¿todos tus UL irán sin símbolo inicial?
ul {list-style-type: none;}

- ¿de repente uno tiene algo especial?:
ul#especial {...} (<ul id="especial">...</ul>)

-¿todos los de dentro de una caja son idénticos?:
#caja ul {...} (<div id="caja"><ul><li>...</li></ul></div>

etcétera.
__________________
Visita mi nueva web idplus.org
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 05:25.