We are now going to build a horizontal navigation menu with just HTML and CSS. In Part 1 we wrote the HTML snippet that we are using in both a vertical sidebar navigation and the horizontal bar navigation. In Part 2 we wrote the CSS styles needed for the vertical navigation.
Posts Tagged ‘css’
Building A Navigation Menu With HTML5 and CSS Part 2
April 20, 2012In the Building A Navigation Menu With HTML5 and CSS Part 1 post we wrote a sample HTML of your web site main navigation menu. In this article we will now write the CSS styles needed to both position and address the overall look-and-feel of a vertical navigation typically displayed in a sidebar. Assuming, your sidebar is placed on the left of your web pages, we’ll accordingly assign the CSS ID #leftnav to the HTML element wrapping that navigation (<nav id=”leftnav”>….</nav>). Now comes the CSS style sheet.
How To Merge Multiple Style Sheets with CSS Media Queries
April 17, 2012This article is an attempt to share some insights pertaining to web design for multiple devices: desktops, laptops, tablets, smartphones and other internet enabled portable gadgets. Thanks to CSS media queries, you can now serve the same content to all those platforms and define a style sheet for each specific range of screen sizes. To provide each web site visitor a web experience tailored to her device, web developers have to create multiple CSS stylesheets — at least 3 — in order to cover the display spectrum.
Building A Navigation Menu With HTML5 and CSS Part 1
April 13, 2012The navigation is one of the most import element of any web site. It can be positioned horizontally below your web site main header then duplicated on the page footer or maybe you decided to have a sidebar (left or right) to display you site navigation instead. The same HTML can be used in either case and CSS will take care of your specific choice of orientation. Here is the HTML of a typical navigation bar using HTML5 semantics:
How to Create Buttons With CSS and No Graphic
March 29, 2012Buttons are used in a web site primarily for navigation or in a web form for the end-user to click to perform an action such as submitting the form or simply to reset the changes made in the case of a very long forms. For the most part, web designers have to first create individual images in a graphic design program sch as Photoshop or Fireworks.
Is Your Web Page Jumping Left and Right?
May 20, 2010I work very often with digital artists and other creative people who are now investing their talents designing web sites. I am always eager and pleased to offer my expertise in web development to help those clients of mine convert a masterpiece crafted in Photoshop, Illustrator or Fireworks into full-blown web templates ready for text copy.
How To Make IE6 Play Nice with Other Web Browsers
March 20, 2010
The constant web browsers war is more about the chaos and the lack of consistency across the board in implementing the recommendations of the W3C (Worldwide Web Consortium) regarding HTML and CSS. That leaves web developers in the middle of a land mines field. Those pour souls have to gather all the courage it takes to tiptoe out that mess when designing or updating web applications.
Use HTML Comments To Solve CSS Layout Issues
February 2, 2010If you are not inclined to use HTML comments in your web page markup you certainly never spent hours trying to fix a messed up CSS layout. That’s a loss of productivity and money that could have been avoided with just a simple preventive measure: using HTML comments. It takes less than 20 seconds to write one that could save you an hour of layout troubleshooting.
CSS Body Background Color and Background Image
January 15, 2010You certainly know the HTML ”<body>” tag is the topmost container box that wraps your web page design elements and content. Of course we can all agree that the “<html>” tag is the topmost parent element of the HTML DOM. So let me reformulate my previous statement to satisfy the geek within you: the body is the closest parent to HTML elements in your web page content. You can use the body tag to change your web page background color from the default “white”.
Using Dreamweaver CSS Layout Templates
November 9, 2009
Dreamweaver CS4 is shipped with a load of pre-designed CSS layouts you can use to position the main blocks of your website/blog design with just a few clicks. Read more…