Diferencia de reglas - No comprendo

DoPeY-BBS · #1 (**permalink**) 30/01/2009, 11:27

¿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>

juanmi321 · #2 (**permalink**) 30/01/2009, 11:33

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

javiro · #3 (**permalink**) 30/01/2009, 11:45

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!

DoPeY-BBS · #4 (**permalink**) 30/01/2009, 11:48

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?.

Calizman · #5 (**permalink**) 30/01/2009, 11:51

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...

juanmi321 · #6 (**permalink**) 30/01/2009, 11:55

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

DoPeY-BBS · #7 (**permalink**) 30/01/2009, 14:51

Si, existen diferencias, si se quieren hacer diferentes menues en una misma pagina y talves exista otra diferencia, no se en realidad.

DoPeY-BBS · #8 (**permalink**) 30/01/2009, 18:13

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í

juanmi321 · #9 (**permalink**) 30/01/2009, 18:16

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????

DoPeY-BBS · #10 (**permalink**) 30/01/2009, 18:33

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?

Mikmoro · #11 (**permalink**) 31/01/2009, 10:30

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.

DoPeY-BBS · #12 (**permalink**) 31/01/2009, 15:15

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

Rafael · #13 (**permalink**) 31/01/2009, 15:58

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.

Calizman · #14 (**permalink**) 31/01/2009, 16:04

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?

Rafael · #15 (**permalink**) 31/01/2009, 16:07

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.

DoPeY-BBS · #16 (**permalink**) 31/01/2009, 16:25

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

Mikmoro · #17 (**permalink**) 31/01/2009, 17:00

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.