As a web surfer, you might have seen a menu of links in a navigational section on most web pages. While coding with CSS, these links are marked up as a string of links. These links are defined with separate DIVs or paragraphs. But from structural point of view, this string of links is nothing but a list of links.
Generally, we are bit hesitant to mark up links in that fashion in order to avoid a situation where we’ll find a bullet before every link in the navigational section. There is one CSS technique that enables displaying of a list horizontally rather than vertically. In this article, several methods are explained which bring unorganized lists into a systematic order and you can exert more control to influence their behavior.
Let’s take a code for an unordered list into consideration. You can apply the same CSS to an ordered list to gain similar results.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5 Make a bit longer so
that it will wrap</li>
</ul>
You need to place every list within an individual DIV. Then the CSS is written for that list to make sure that the behavior of the list is decided by the enclosing DIV. Each DIV contains a rule that is found in common:
#base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}
If you won’t apply any other style to this list, the list will simply display the list items with bullets preceding it. Sometimes, the default position of a list doesn’t suit well to your design plans. You’ll straightway try to alter the margin or padding of the unordered list. But this method doesn’t deliver the desired result on all browsers. To place your list on the extreme left position, you require making changes to both the margin and the padding. The reason is while Internet Explorer and Opera use the left margin to generate the indent, Mozilla or Netscape make use of padding. In order to position your unordered list near the left margin, you need to set margin-left and padding –left in the
In some cases, the bullet markers may lie outside the containing box. In order to place the markers inside the DIV while still sticking to their left side, set the value of either margin or padding to 1em.
Suppose your project requires the use of custom bullets. In that case, you can make use of CSS to set an image as a bullet. Some browsers don’t support this part of CSS or images as bullets. In that case, you can specify a default bullet or a separate HTML bullet to help your cause. The code for using an image as a bullet looks like this:
ul {
list-style-image: url(bullet.gif);
}
In order to specify an HTML bullet, you can append the following line:
list-style-type: disc;
Sometimes, the image you have chosen for your list is not aligned properly with the list items in the desired manner. In that case, you may opt for placing the image inside the list item block. For this, you can add the following code:
list-style-position: inside;
All last three declarations can be combined into one shorthand declaration in the following manner:
ul {
list-style: disc url(bullet.gif) inside;
}
(No Ratings Yet)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Beantworten