W3Schools Online Web Tutorials. וובמאסטר - מאמרים בנושא בניית אתרים. Css. CSS navigation menu. It's truly remarkable what can be achieved through CSS, especially with navigation menus. Using the immense power of CSS, we're going to turn this: ...into this: All with just a bit of CSS and this tiny image: (which we've called background.gif). Look very closely and you can see it! The HTML code for our CSS menu <div id="nav-menu"> <ul> <li><a href="#">Services</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> </div> That's it! Removing the bullets First thing we'll do is remove the bullets, by creating a new CSS rule: The important CSS command is the first one, list-style: none, which says that we don't want any kind of bullet in our navigation menu.
With this new CSS rule our menu now looks like: Needs a bit of work, right? Displaying the menu items inline To get these menu items all on to one line we'll insert this CSS rule: The float CSS command is the really important one here as that aligns the menu items up against each other. Now we're getting there! CSS-Tricks. Clean and pure CSS FORM design. CSS Design: Taming Lists. As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change. Article Continues Below What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. For example, I find that most pages on the web contain a menu of links in a navigation area. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control.
Setting the stage#section2 For purposes of this article, I am using unordered lists. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 we'll make a bit longer so that it will wrap</li></ul> Each list is simply placed inside a different DIV, and the CSS is written so that the list’s behavior is determined by the DIV it is in. Item 1Item 2Item 3Item 4Item 5 we’ll make a bit longer so that it will wrap.