www.webdeveloper.com
Results 1 to 3 of 3

Thread: Insert navigation bar in existing page

  1. #1
    Join Date
    Mar 2013
    Posts
    23

    Insert navigation bar in existing page

    I want to insert navigation bar on top of my current header. How do I do it?

    This is the beginning of the code that includes the header.

    Code:
    body {
    	background-color: grey;
    	
            background-image: url("../images/logo.jpg");
            background-position: 0% 0%;
    	margin: 0;
    }
    
    h1, h2, h3 {
    	margin: 0;
    }
    
    
    .page, header, footer, .sidebar > div, nav {
    	-webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
    	box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
    }
    
    
    .page {
    	background-color: #FFFFDB;
    	margin: 28px auto;
    	padding: 8px;
    	width: 1000px;
    }
    
    header {
    	background-color:#BABD98;
    	border: 10px solid #BABD98;
    	text-align: center;
    	margin-bottom: 18px;
    }

    Thank you very much

    qim

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254
    Be careful using HTML5 <header> element -- which is not supported in IE and which defaults to display:inline;

    You simply put the CSS-styled HTML element in the page code, You might want to consider clear: all; on element or maybe (like I did on <hr> inserted after element). You need more than box for navigation.
    Look. for instance, at the CSS files for http://www.auntnini.com, or http://www.jacquimorgan.com, or http://www.josephdenaro.com
    Last edited by auntnini; 04-15-2013 at 06:19 PM. Reason: correct links

  3. #3
    Join Date
    Mar 2013
    Posts
    23
    Hi

    many thanks for your post. In fact, I've just managed to get it working by using @import as I alreday had a stylesheet in the main html.

    Thank you again

    qim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles