Navigation bar and logo problems!

Discussion in 'Web Design and Development' started by davidjearly, May 29, 2010.

  1. davidjearly macrumors 68020

    davidjearly

    Joined:
    Sep 21, 2006
    Location:
    Glasgow, Scotland
    #1
    Hi,

    I'm looking to develop a new website for my photography, as my old one hasn't been updated in 2 years and is a bit clunky (being developed with iWeb).

    I have a basic knowledge of HTML and that's about it! I was wondering if there was any recommendations for what software would be best to learn web development with. I can download the dreamweaver trial from Adobe, but I understand that it is a beast!

    One question I do have, is how it is possible to have a dynamic navigation bar (not even sure if that is the correct term). Basically, like you can see here. You'll notice, when you expand the size of the page horizontally, the navigation links move with it.

    I'd appreciate any assistance and recommendations!

    Thanks,
    David
     
  2. citizenzen macrumors 65816

    Joined:
    Mar 22, 2010
    #2
    Don't build your site like the one you linked to. It relies on tables to create the basic page structure and that's a deprecated method.

    The basic components should be divs nested and positioned using css.

    Google "css + layout" and start to familiarize yourself with that method. You should see some examples that can duplicate the effect you're looking for.
     
  3. davidjearly thread starter macrumors 68020

    davidjearly

    Joined:
    Sep 21, 2006
    Location:
    Glasgow, Scotland
    #3
    Thanks for the suggestion. I'll look into that now.

    Any suggestions as to what software is good for coding at a basic level? I'm using TextMate just now, and I find it good, but wondering if there is anything better?
     
  4. davidjearly thread starter macrumors 68020

    davidjearly

    Joined:
    Sep 21, 2006
    Location:
    Glasgow, Scotland
    #4
    I've tried to implement this using html and css. I am trying to have the site logo (either transparent png or text) and primary links all anchored at the top of the page on a continuous navigation bar that expands/shrinks when the page is resized. The logo would be anchored to the left and the links to the right, horizontally.

    Here is the code from my html file:

    Code:
    <html>
    <head>
    
    <title>Site Title</title>
    
    <div id="navigation">Site Name/Logo</div>
    
    <ul class="menu">
    <li><a href="Home">Home<br /><span></span></a></li>
    <li><a href="Gallery">Gallery<br /><span>All images</span></a></li>
    <li><a href="Store">Store<br /><span>Buy images</span></a></li>
    </ul>
    
    </head>
    </html>
    
    The code snippet from my CSS file is as follows:

    Code:
    div#navigation {
    	top: 0px;
    	height: 60px;
    	width: 100%; 
    	background: black; 
    	padding: 0px;
    	font-family: Helvetica, sans-serif;
    	font-size: 20px; 
    	color: white;
    }
    
    ul.menu { 
    	margin:0;
    	padding:0; 
    }
    
    ul.menu li { 
    	display:block;
    	padding:0; 
    	float:left;
    	text-align:left;
    	margin-right:2em; 
    }
    
    ul.menu li a { 
    	color:#fff;
    	font:bold 14px georgia;
    	text-decoration:none;
    	line-height: 1.3em;
    	display:block; 
    }
    	
    ul.menu li a:hover { 
    	color:#ffc300;
    }
    
    ul.menu li span { 
    	font:11px arial; 
    	color:#666; 
    	margin:0; 
    }
    
    ul.menu li span:hover {
    	color:#999;
    }
    h1 {
    	font-family: Helvetica, sans-serif; 
    	color: white; 
    	font-size: 20px; 
    }
    
    At the moment, it turns out with the black nav bar at the top, and the text "Site Name/Logo" is correctly aligned at the top left. The links however appear under the black banner and anchored to the left.

    How do I get the site links to overlay the horizontal black bar at the top?

    I'm still learning, so would appreciate any assistance!
     
  5. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #5
    Change this:
    Code:
    ul.menu li { 
    	display:block;
    
    to
    Code:
    ul.menu li { 
    	display:inline;
    
    This will put all the list items in a single row, then just work on the padding to get the spacing how you want. You may have to put padding/margins on the ul.menu as well to get things lined up.

    And you may want to have the list inside the navigation div as that is a block element by default so the list will appear beneath it. You can put the logo inside a span to be able to target it with css.
     
  6. timor macrumors newbie

    Joined:
    May 26, 2010
    #6
    Or you could use Wordpress as a content management system. It is very easy to work with, custamizable and SEO friendly
     

Share This Page