Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Navigation bar and logo problems!

D

davidjearly

macrumors 68020
Original poster
Sep 21, 2006
2,271
382
Glasgow, Scotland
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
 
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.
 
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?
 
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!
 
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.
 
Or you could use Wordpress as a content management system. It is very easy to work with, custamizable and SEO friendly
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back