Blog Borchani Studios

Sin ningún tipo de estilos adicionales aplicadas, la lista se representa de esta manera en la base de DIV:

*  Item 1
* Item 2
* Item 3
* Item 4
* Item 5 haremos un poco más de tiempo para wrap

A veces, el guión, por defecto de una lista es demasiado para el diseño que está trabajando. Sin embargo, simplemente cambiando el margen o el relleno de la UL no funciona para todos los navegadores. Para que la lista alineado a la izquierda, por ejemplo, tiene que cambiar tanto el margen y el relleno. Esto es porque Internet Explorer y Opera optado por crear el guión con el margen izquierdo, mientras que Mozilla / Netscape uso de relleno. Para mayor información consulte el artículo DevEdge consonancia Lista sangría.

En el siguiente ejemplo, tanto el margen izquierdo y padding-left de la UL en el DIV se ponen a cero:

Tenga en cuenta que los marcadores se encuentran fuera de la DIV. Si la caja que contenía eran el cuerpo del documento HTML, los marcadores pueden ser prestados fuera de la ventana del navegador, en efecto de fuga. Si desea que los marcadores de la línea en el interior de la DIV, pero a lo largo de su lado izquierdo, o bien establecer el relleno o el margen izquierdo a una em:

ul {
list-style-image: url(bullet.gif);
}

Y el navegador hace es el siguiente:

*  Item 1
* Item 2
* Item 3
* Item 4
* Item 5 haremos un poco más de tiempo para wrap

Para especificar una bala de HTML para utilizar si el navegador no es compatible con esta parte de la CSS, añadir:

a la regla hará que el cambio. Estas tres declaraciones se pueden combinar en una sola declaración, reducida tal como se ilustra en la siguiente regla:

ul {
list-style: disc url(bullet.gif) inside;

}

ul {
list-style-type: disc;
list-style-image: url(bullet.gif);
list-style-position: inside;
}

Puede haber ocasiones en las que tienen una lista, pero no queremos balas, o si desea utilizar algún otro carácter en lugar de la bala. Una vez más, CSS proporciona una solución sencilla. Basta con añadir list-style: none; a la regla y la fuerza de la LIS para mostrar con sangrías. La norma se verá algo como esto:

ul  {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}

Ya sea el relleno o el margen de las necesidades que se ponen a cero, con el otro de uno a 1em. Dependiendo de la “bala” que usted elija, puede ser necesario modificar este valor. El texto negativa guión hace que la primera línea que se desplaza a la izquierda por esa cantidad, la creación de una sangría francesa.

El HTML contendrá nuestro UL estándar, pero con cualquier carácter o entidad HTML que desea utilizar en lugar de la viñeta anterior, el contenido del elemento de la lista. En nuestro caso vamos a utilizar », el derecho de cita ángulo doble:».

navegadores que señalar que Netscape6/7/Mozilla (y otros basados en Gecko) y Opera puede crear contenidos generados a través de la CSS2: antes del pseudo-elemento. Podemos tomar ventaja de esto para generar automáticamente el carácter »(o de cualquier otro carácter) para las balas. Esto nos permite dejar que el contenido de la UL solo. Si usted está usando Opera o un navegador basado en Gecko, el siguiente CSS creará la misma lista que el anterior, pero utilizando el estándar UL sin contenido extra:

#custom-gen ul li:before {
content: “\00BB \0020″;
}

Listas de verdad en línea

¿Quién dice que una lista tiene que ser alineada verticalmente con balas colgando del lado izquierdo de cada tema? Tal vez desea que la estructura de una lista ordenada de enlaces, pero visualmente que desea que se vea como una barra de navegación vertical en la página web. O tal vez usted quiere que su lista de enlaces que se alineen horizontalmente en la parte superior de la página.

Esto se aplica a algo más que listas de enlaces. Hay veces en que es posible que tenga a la lista de varios elementos, en medio de un párrafo, tal vez una lista de libros que desea leer. Estructuralmente, tiene sentido para marcar esto como una lista, pero presentationally puede que no desee cortar el flujo del párrafo. CSS para el rescate de nuevo!

Dado que esta lista no será separado y en sí mismo, no voy a ponerla en el DIV de base que las listas anteriores han habitado. Esta vez, el margen de beneficio será un párrafo, seguido por la misma lista, seguido de otro párrafo.

Te oigo llorar, “Foul! Pensé que íbamos a poner una lista dentro de un párrafo, no entre dos párrafos. ”

A lo que contesto: “Bueno, sí. Pero (X) HTML no permite una lista que aparecen dentro de un párrafo. Sin embargo, con la ayuda de nuestra hoja de estilo, que es como se verá en la página web “.

Esto es lo que los estilos parecidos a estos:

#inline-list {
border: 1px solid #000;
margin: 2em;
width: 80%;
padding: 5px;
font-family: Verdana, sans-serif;
}

#inline-list p {
display: inline;
}

#inline-list ul, #inline-list li {
display: inline;
margin: 0;
padding: 0;
color: #339;
font-weight: bold;
}

El margen de beneficio consiste en una <div id=”inline-list”>. Esta DIV contiene un párrafo seguido de nuestra norma UL, y un apartado de seguimiento. La lista de UL ha sido modificado de modo que cada elemento de la lista tiene una coma después de que, con el último punto seguido de un período.

Los resultados están por debajo de (la lista aparece en negrita y azul):

Un poco de texto antes de la lista aparece. Tal vez el contexto es algo acerca de un marido que una llamada de su esposa a recoger algunas cosas en el camino a casa desde el trabajo. En realidad no importa, para nuestro propósito sólo necesitamos un poco de texto precedente antes de la lista: * Tema 1, * Artículo 2, * Artículo 3, * Artículo 4, *Tema 5  haremos un poco más de tiempo para que se ajustará. Y luego está el texto que sigue a la lista en el párrafo. Uno o dos frases es suficiente para el ejemplo.

Como en el ejemplo de bala por encima de la costumbre, se podría utilizar el CSS para generar automáticamente las comas y el período que siguen a cada elemento de la lista. Si todo lo que tenía que preocuparse por la Ópera y fueron alimentados navegadores Gecko, que es. Esta vez los estilos se vería así:

#inline-list-gen ul li:after {
content: “, “;
}

#inline-list-gen ul li.last:after {
content: “. “;
}

Aquí se utiliza el: después de pseudo-elemento para agregar una coma después de cada elemento de la lista, y un período después de que un elemento de la lista con class = “anterior”, con el siguiente resultado (recuerde, sólo será visible en Opera o Mozilla / Netscape ):

Un poco de texto antes de la lista aparece. Tal vez el contexto es algo acerca de un marido que una llamada de su esposa a recoger algunas cosas en el camino a casa desde el trabajo. Realmente no importa, para nuestro propósito sólo necesitamos un poco de texto antes de la lista anterior: punto 1, * Artículo 2, punto 3, punto 4, * Tema 5 haremos un poco más de tiempo para que bajara
Y luego está el texto que sigue a la lista en el párrafo. Uno o dos frases es suficiente para el ejemplo.

Fronteras

Un carácter de canalización, |, a menudo se utiliza para diferenciar entre las opciones. Se trata de un evidente carácter de separación, y puede servir de ejemplo para agregar a la lista de artículos de las fronteras:

#pipe ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

#pipe ul li {
margin-left: 0;
padding: 3px 15px;
border-left: 1px solid #000;
list-style: none;
display: inline;
}

#pipe ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}

<div id=”bread”>
<ul>
<li>Home
<ul>
<li>&#187; Products
<ul>
<li>&#187; Computers
<ul>
<li>&#187; Software</li>
</ul></li>
</ul></li>
</ul></li>
</ul>
</div>

crea lo siguiente:

* Home» Products» Computers» Software

#bread {
color: #ccc;
background-color: #006;
padding: 3px;
margin-bottom: 25px;
}

#bread ul {
margin-left: 0;
padding-left: 0;
display: inline;
border: none;
}

#bread ul li {
margin-left: 0;
padding-left: 2px;
border: none;
list-style: none;
display: inline;
}

crea esto:

Home» Products» Computers» Software

#bread-gen ul li:before {
content: “\0020 \0020 \0020 \00BB \0020″;
color: #ff9;
}

#bread-gen ul li.first:before {
content: ” “;
}

Y el resultado final:

Home» Products» Computers» Software

Me gustaría terminar con una aplicación real de algunas de las técnicas que se han discutido aquí. Usaremos un UL estándar que contiene enlaces para crear un menú dinámico con efectos de la libración. Con el fin de obtener los efectos de la libración vamos a dejar que la UL proporcionan la estructura y los estilos de anclaje proporcionará la mayoría de los efectos visuales.

Este menú de enlaces es realmente una solución a una pregunta formulada por Michael esfuerzo en la CSS-discuss lista. Michael se había creado este efecto exacto mediante una tabla, las imágenes, y JavaScript. Pidió a la lista si se podía hacer con CSS. Tomé el reto, y con la ayuda de varios otros miembros que rastreó algunas cuestiones específicas del navegador, nos encontramos con una hoja de estilo que funciona en este marcado:

<div id=”button”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Hidden Cameras</a></li>
<li><a href=”#”>CCTV Cameras</a></li>
<li><a href=”#”>Employee Theft</a></li>
<li><a href=”#”>Helpful Hints</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>

Echemos un vistazo a la regla de la hoja de estilo por la regla, y voy a explicar por qué cada regla se construye la forma en que lo es.

#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: ‘Trebuchet MS’, ‘Lucida Grande’,
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #90bade;
color: #333;
}

La primera regla es que el botón # DIV. Se define el espacio que ocupará en el menú, y proporciona un contexto para el menú para que podamos definir la forma en la lista y los enlaces se comportan dentro de la DIV. Decidí hacer que el líquido de menú, basado en las preferencias de tamaño de fuente del navegador, así que (casi) todas las unidades están en EMS. Esto incluye a la anchura del menú. El borde negro sólido sobre el derecho se basa en el diseño original de Michael. El relleno de fondo está ahí para ampliar la DIV establecen más allá del menú de enlaces para que pueda ver el fondo de la DIV. De nuevo, esto sigue el diseño original. El margen inferior es separar la DIV de lo que sigue. Los colores vino desde el diseño original.

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

autor: Mark Newhouse