[Pro] Navigation Bar in box Model

Trying another box model site and have a question on setting up a simple navigation bar menu – which will just consist of words across the page above a banner.

Initially I set things up based on Dan’s box model 2 tutorial, with multiple inline items. I now have a question on getting my navigation setup as “efficiently” as possible within a box model setup.

The banner graphic I want to use was placed in the header container – I have my main page container, then a header container placed into that. I then created another html item inside the header and placed my banner in that. I’ve since decided to have my navigation menu (just words, such as Home, Music, Menu, etc. no drop downs) be above the banner. I went back and inserted another html box into the header container called Nav and was able to move it before the banner html box. For the navigation bar, I want the Menu items to be spaced evenly across the page and the links will just be rollovers. Am I better to place each navigation menu word in its own html box within this Nav container, or to space out my menu text items in one html box? – right now I put 4 html inline boxes (Home, Menu, Music, Kids Room). Problem was getting these to sit next to each other (horizontally) – which makes me think I didn’t use the best approach here – also want to make sure they don’t break apart in IE (they preview ok in Freeway and Safari).

So my question is, was that the best way to do my navigation or is there a better/simpler way (maybe a fixed series of boxes at the top??)

Hope that is somewhat clear. If not, I’ll try to put something up on a test site to show what I mean.

Thanks for any suggestions.

Jeff


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I put up the page I’m working on to show better what I’m talking about (the black bar at top with navigation items)

Here’s link: [http://beanrunnercafe.com/test/]

No rollovers set up yet. I also may need to add more navigation menu items, so thus my question as to how to do this most efficiently.

Thanks again in advance for any help.

Jeff


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Why not us CSS Menu action on a single html list? It will give you exactly this look.

Just create a single html box with an indented list that includes your four menu words and give the html box a black background. If you need a drop down below one of the main words then add an additional indent below the word in the list you want the drop down under and type your submenu options. The link and hover styles are set in the action window.

A bit thin on details, but it’s pretty simple.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Chuck. I thought it was just for drop down lists. I’ll take a look at that.

Jeff


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I realized I neglected to mention to choose the Horizontal option and Center under the Size and Shape menu in the action window. As long as your html box is the full width of your page you will get the menu you showed on your sample page.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well the CSS Menu action seems to work, although it’s a bit tricky to get the spacing I would like. Is there any way to control spacing between menu items? For example, if you take a look at my test site, there is more space between the shorter words on the left than the longer ones toward the right. Ideally I would want to adjust spacing in between a bit better although I can probably live with this.

Jeff


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have another box model question related to this site and setup.

In a two column model, is there a way to make the container on the right always extend to the bottom black footer bar — not the content, but so that the background color (brown) touches the black footer bar. Right now since the content on the right is shorter than the left, the color of the wrapper container shows/

Jeff


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Never mind I just figured it out


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Lookin good!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Chuck

One other question. In the right column where I have the music listing (a feed from a music site), is there a way I can increase space between each listing, so if one wraps it’s not on top of the other. I tried highlighting the markup box and adding some before and after space and increasing the leading, but that didn’t work. I assume it would be doable by editing the markup text, but I’m not well versed in javascript and unsure how I would do this.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

… is there a way I can increase space between each listing, so if one wraps it’s not on top of the other. >

Try using a hard return instead of a soft return between entries. Then you can set the space after to something smaller to get get spacing between entries a bit closer.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could also intensify your box model strategy and turn each section into it’s own DIV (HTML item / box) and then just use margins to space things out in-between items.

Some might say your site then suffers from DIV-divitus, but I think that means they’re jealous.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok - I’m not completely following

Chuck - the Music listing in the right column (brown area), with dates is a javascript markup item. So all I see in Freeway is the white heading, ten I hit return, inserted the markup, hit return again and added the small white link type. So unless I’m missing something how would put any returns between entries.

Dan - can you explain a bit more how I would intensify my box model.

Jeff


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, forgot you were bringing the text in with a script. You can change the space between lines by with CSS line-height, but that affects every line including wrapped text.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

How are the items being dropped in there? I tried looking at the code and I see it’s through a PHP file, but does that mean the ‘p’ repeats itself in a loop based off how many entries are being shown? Seems to limit to 10.

K, I see how it goes. It drops them in a paragraph with a style2 class style attached to it and then wraps a span tag around each part of the date and artist. That’s a way to do it, but you could wrap those in ‘p’ tags with a class style as well and then set the class style to be:

.classname { 
	display: block;
}

Then they’d act like their own individual block entry and then you could apply ‘padding’ to the same class name to squeeze out the space above and below each entry. Your code would convert from:

<span class="hvmusic_date">date</span><span class="hvmusic_artist">artist name</span>

to:

<p class="classname"><span class="hvmusic_date">date</span><span class="hvmusic_artist">artist name</span></p>

That would solve the ‘events’ spacing issue.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Dan

I got the code from the hvmusic site. I limited entries to 10 at a time, with some instructions from the hvmusic site.

Since I have not edited code within Freeway, how or where do I insert or modify the code you show?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dan

One other question. When I look at the source code in Safari, I don’t see the first code entry you show. I only see this reference:

Upcoming Events (Music)

For a detailed listing click here

(wasn’t sure how to paste this neatly as code)

Am I looking in the wrong place? Still need help with where and how I would modify code.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It appears to me the script is hosted and just sends you the resulting formatted text to be inserted in your page.

You inserted the…

<script type=”text/javascript” src=”http://hvmusic.com/listing/calentry_list_user_shortform.php?calendar_id=256&entries=10”> </script>

…code as markup after the “Upcoming Events” header. Do you have some sort of options panel on the hvmusic site on how the script formats things?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Chuck - Yes the script is hosted and no the site does not have any real options for this “short list of events.” They have a detailed list of events, which I will be putting on the Music page, which lets me modify colors and type some, but their instructions make it sound as if I can control a portion of the look on my web page by applying styling to the container holding the script. I am able to modify the color and size of the type by changing the styles associated with the div or by highlighting the space before through the markup action. However if I modify the leading or space before or after it doesn’t seem to do anything.

Is Dan’s approach a solution and if so do you know how it’s done?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just an update. I had asked the hvmusic site if there was a way to modify the script. Here is their response:

"There isn’t a way for you to modify the javascript. But I send all the data enclosed in s so that you can write styles to format these any way you want.

This is the documentation from our program…

// Each field is contained in it’s own CSS span. This is so that the user can add specific formatting for each field if they wish too. They would just define these classes in their CSS.
// - date class=hvmusic_date
// - venue name class=hvmusic_venue
// - venue city class=hvmusic_city
// - venue state class=hvmusic_city

Each line of ourput is ended with a simple

So if you wanted more space between lines, then I think you could do this in your CSS file:

.hvmusic_date {
margin-top: 10px;
}

This sounds a bit what Dan was suggesting. I’m just sure how to do this in Freeway.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options