Horizontal navigation menu?
Permalink
I'm new to Concrete5 and to web design in general. Despite that, I designed my theme in Dreamweaver and managed to get it on Concrete5. My problem is that my navigation menu was designed to be horizontal and is coming up vertically. I understand that this is the auto-nav default, but, after reading everything I could find, I still don't understand how to change it.
Any help in simple language would be so appreciated!
my site: englishgardendesign.info
Any help in simple language would be so appreciated!
my site: englishgardendesign.info
Thanks so much for your quick reply. I tried to follow your suggestions but seem to have made matters worse.
Nav bar is now flush left and only "home" is in the proper color. Copyright area has gone vertical.
Here's the html and css:
Any help is SO appreciated. I'm tearing my hair out!!!!
<div id="navbar">
<?php
$navbar = new Area('Navbar');
$navbar->display($c);
?>
<ul>
<li><a href="#home"> </a></li>
<a href="#about"> </a><li>
<a href="#portfolio"> </a><li>
<a href="#services"> </a><li>
<a href="#contact"> </a><li>
</ul>
</div><!--end navbar-->
#ul
{list-style:none;
margin:0;
padding:0;
float:left;
}
#li
{list-style:none;
}
#a:link, a:visited
{
color:#b3d6bf;
display:block;
text-decoration:none;
padding:4px;;
font-size:20px;
text-align:center;
width:120px;
}
#a:hover, a:active
{
color:#38B184;
/*customize hover*/
}
#copyright{
width:500px;
clear:both;
margin:auto;
font-size:12px;
color: #b3d6bf;
height:15px;
Nav bar is now flush left and only "home" is in the proper color. Copyright area has gone vertical.
Here's the html and css:
Any help is SO appreciated. I'm tearing my hair out!!!!
<div id="navbar">
<?php
$navbar = new Area('Navbar');
$navbar->display($c);
?>
<ul>
<li><a href="#home"> </a></li>
<a href="#about"> </a><li>
<a href="#portfolio"> </a><li>
<a href="#services"> </a><li>
<a href="#contact"> </a><li>
</ul>
</div><!--end navbar-->
#ul
{list-style:none;
margin:0;
padding:0;
float:left;
}
#li
{list-style:none;
}
#a:link, a:visited
{
color:#b3d6bf;
display:block;
text-decoration:none;
padding:4px;;
font-size:20px;
text-align:center;
width:120px;
}
#a:hover, a:active
{
color:#38B184;
/*customize hover*/
}
#copyright{
width:500px;
clear:both;
margin:auto;
font-size:12px;
color: #b3d6bf;
height:15px;
Thanks so much for your quick reply. I tried to follow your suggestions but seem to have made matters worse.
Nav bar is now flush left and only "home" is in the proper color. Copyright area has gone vertical.
Here's the html and css:
Any help is SO appreciated. I'm tearing my hair out!!!!
<div id="navbar">
<?php
$navbar = new Area('Navbar');
$navbar->display($c);
?>
<ul>
<li><a href="#home"> </a></li>
<a href="#about"> </a><li>
<a href="#portfolio"> </a><li>
<a href="#services"> </a><li>
<a href="#contact"> </a><li>
</ul>
</div><!--end navbar-->
#ul
{list-style:none;
margin:0;
padding:0;
float:left;
}
#li
{list-style:none;
}
#a:link, a:visited
{
color:#b3d6bf;
display:block;
text-decoration:none;
padding:4px;;
font-size:20px;
text-align:center;
width:120px;
}
#a:hover, a:active
{
color:#38B184;
/*customize hover*/
}
#copyright{
width:500px;
clear:both;
margin:auto;
font-size:12px;
color: #b3d6bf;
height:15px;
Nav bar is now flush left and only "home" is in the proper color. Copyright area has gone vertical.
Here's the html and css:
Any help is SO appreciated. I'm tearing my hair out!!!!
<div id="navbar">
<?php
$navbar = new Area('Navbar');
$navbar->display($c);
?>
<ul>
<li><a href="#home"> </a></li>
<a href="#about"> </a><li>
<a href="#portfolio"> </a><li>
<a href="#services"> </a><li>
<a href="#contact"> </a><li>
</ul>
</div><!--end navbar-->
#ul
{list-style:none;
margin:0;
padding:0;
float:left;
}
#li
{list-style:none;
}
#a:link, a:visited
{
color:#b3d6bf;
display:block;
text-decoration:none;
padding:4px;;
font-size:20px;
text-align:center;
width:120px;
}
#a:hover, a:active
{
color:#38B184;
/*customize hover*/
}
#copyright{
width:500px;
clear:both;
margin:auto;
font-size:12px;
color: #b3d6bf;
height:15px;
Hi,
Try this:-
You must have one nav area as 'Header Nav' and don't put any of your links in.
Your CSS is a bit twisted, try this:-
hope this helps.
Try this:-
<div id="navbar">
<? $a = new Area('Header Nav');$a->display($c);?>
</div>You must have one nav area as 'Header Nav' and don't put any of your links in.
Your CSS is a bit twisted, try this:-
#navbar ul{list-style:none;margin:0;padding:0;float:left;} #navbar li {list-style:none;} #navbar a:link, a:visited{color:#b3d6bf;display:block;text-decoration:none;padding:4px;font-size:20px;text-align:center;width:120px;} #navbar a:hover, a:active{color:#38B184;}
hope this helps.
Thank you so much, once again.
Getting closer, but still not right. Everything is the right color, the copyright area reads horizontally as
it should (but should be at the bottom of the page) but the menu is still vertical.
I'm attaching a screenshot.
I'm not sure if I'm supposed to reply via email or on the forum, so I'll do both.
So grateful for the C5 help!!!
Getting closer, but still not right. Everything is the right color, the copyright area reads horizontally as
it should (but should be at the bottom of the page) but the menu is still vertical.
I'm attaching a screenshot.
I'm not sure if I'm supposed to reply via email or on the forum, so I'll do both.
So grateful for the C5 help!!!
Hi,
Your main navbar needs to be at the top of the page.
Put it between the logo div and content div or put it in content div as first item.
Your main navbar needs to be at the top of the page.
Put it between the logo div and content div or put it in content div as first item.
Thank you again!
Is there a way to put it above the logo? Also, I'm just wondering why
it can't go at the bottom? It works fine at the bottom as a static html site. Trying to understand!
Is there a way to put it above the logo? Also, I'm just wondering why
it can't go at the bottom? It works fine at the bottom as a static html site. Trying to understand!
Hi,
Try leaving body tag as body not an id.
There is a stray end tag in your code.
Nav is getting mixed in with copyright.
Also you might want to put in your nav.
Try using a footer element and put your copyright in that.
Trying to help..
Try leaving body tag as body not an id.
There is a stray end tag in your code.
Nav is getting mixed in with copyright.
Also you might want to put in your nav.
#navbar ul { padding:0; margin:0;list-style: none; }Try using a footer element and put your copyright in that.
Trying to help..
55webdesign,
You are the best. I will try your new ideas and will let
you know how it goes.
Thank you so much for your time and your skill.
mtbattie (Jane)
You are the best. I will try your new ideas and will let
you know how it goes.
Thank you so much for your time and your skill.
mtbattie (Jane)
I am making a lot of progress, thanks to you.
The copyright info is now in the footer element and the navbar has
gone horizontal at last. Please see the attached screenshot.
The next challenge is getting it centered. Any ideas? I've gone through
endless tutorials without success.
The copyright info is now in the footer element and the navbar has
gone horizontal at last. Please see the attached screenshot.
The next challenge is getting it centered. Any ideas? I've gone through
endless tutorials without success.
Hi,
Glad your getting the hang of it.
Quick way is to add left padding to your ul until it is centered.
Glad your getting the hang of it.
Quick way is to add left padding to your ul until it is centered.
#navbar ul { padding:0 0 0 200px; margin:0;list-style: none;}
Success!!!!!
Except for one thing: I'm know done with the About page, all is in place but the links on the nav bar aren't working. They work fine on the home page.
Any ideas?
Except for one thing: I'm know done with the About page, all is in place but the links on the nav bar aren't working. They work fine on the home page.
Any ideas?
Hi,
First thing that springs to mind is the good old z-index!
if navbar is under content you wont be able to touch it.
But you don't need z-index, do you?
Two other points:
1. You shouldn't @import CSS files, not good for compliance.
2. Why have got so many empty 'p' tags in the content and at bottom of content?
I think your main issues are with your CSS file.
you mentioned Dreamweaver at the start of this post. Be careful how you use it, it's a great program can upset things.
I need more info on the CSS and layout before I help anymore.
First thing that springs to mind is the good old z-index!
if navbar is under content you wont be able to touch it.
But you don't need z-index, do you?
Two other points:
1. You shouldn't @import CSS files, not good for compliance.
2. Why have got so many empty 'p' tags in the content and at bottom of content?
I think your main issues are with your CSS file.
you mentioned Dreamweaver at the start of this post. Be careful how you use it, it's a great program can upset things.
I need more info on the CSS and layout before I help anymore.
Hi,
So confusing....the navbar has it's own div. No z-index that I know of. How to get those links linking?
I'm not sure what you mean about not importing css files. All I did was upload my css and default. php files (hand coded in Dreamweaver--I just use DW as a fancy text editor). Also, no <p> tags.
What I DID do when working on the About page was enter the content text while in edit mode. Then the photo above shifted to the left, so I went into Design mode in C5 and changed the padding there. I also fiddled with the alignment of the text. Did that screw things up? Maybe that's where all the <p> tags are? If so, now what?
What do I know? I am attaching the css and default.php files.
So thankful, yet again, for your help.
Hmmm. default.php wont attach, so I will copy and paste:
<body>
<div id="wrapper">
<div id="logo">
<?php
$logo = new Area('Logo');
$logo->display($c);
?>
</div> <!--end "logo"-->
<div id="content">
<?php
$content = new Area('Content');
$content->display($c);
?>
</div> <!--end content-->
<div id="navbar">
<?php
$a= new Area('Header Nav');
$a->display($c);
?>
</div><!--end navbar-->
</div><!--end wrapper-->
<?php
$this->inc('elements/footer.php');
?>
So confusing....the navbar has it's own div. No z-index that I know of. How to get those links linking?
I'm not sure what you mean about not importing css files. All I did was upload my css and default. php files (hand coded in Dreamweaver--I just use DW as a fancy text editor). Also, no <p> tags.
What I DID do when working on the About page was enter the content text while in edit mode. Then the photo above shifted to the left, so I went into Design mode in C5 and changed the padding there. I also fiddled with the alignment of the text. Did that screw things up? Maybe that's where all the <p> tags are? If so, now what?
What do I know? I am attaching the css and default.php files.
So thankful, yet again, for your help.
Hmmm. default.php wont attach, so I will copy and paste:
<body>
<div id="wrapper">
<div id="logo">
<?php
$logo = new Area('Logo');
$logo->display($c);
?>
</div> <!--end "logo"-->
<div id="content">
<?php
$content = new Area('Content');
$content->display($c);
?>
</div> <!--end content-->
<div id="navbar">
<?php
$a= new Area('Header Nav');
$a->display($c);
?>
</div><!--end navbar-->
</div><!--end wrapper-->
<?php
$this->inc('elements/footer.php');
?>
Hi,
New development: the links are working fine on all other pages. Maybe I should just delete the About page and start over?
I do wonder about the css mess you were referring to, and await word.
Thanks!
New development: the links are working fine on all other pages. Maybe I should just delete the About page and start over?
I do wonder about the css mess you were referring to, and await word.
Thanks!
Hi,
Not sure that php looks right.
Yours:
Normally:
I'll look at the CSS
Not sure that php looks right.
Yours:
<?php $content = new Area('Content'); $content->display($c); ?>
Normally:
<?php $a = new Area('Content'); $a->display($c); ?>
I'll look at the CSS
Hi,
You might want to wrap your navbar ul with an outer nav container and try top and bottom margins.
Plus there is no top or bottom margin on content or copyright, apart from al round auto. Perhaps 10px auto would be better.
Your CSS is a bit strange, you don't need two margin:auto or min-height. I also think your position attributes are wrong.
What I might do is try and reconstruct what you've done and put it right.
It might save us both a lot of time.
BTW: Forgot to say
Links do work on about page, but you have very gently roll over just beneath the buttons.
You might want to wrap your navbar ul with an outer nav container and try top and bottom margins.
Plus there is no top or bottom margin on content or copyright, apart from al round auto. Perhaps 10px auto would be better.
Your CSS is a bit strange, you don't need two margin:auto or min-height. I also think your position attributes are wrong.
What I might do is try and reconstruct what you've done and put it right.
It might save us both a lot of time.
BTW: Forgot to say
Links do work on about page, but you have very gently roll over just beneath the buttons.
Hi,
Use this:
Put a br in between end of content and start of navbar:
Take spacer out the bottom navbar:
Maybe try wrapping your ul:
It worked for me.
Hope this helped
Use this:
Put a br in between end of content and start of navbar:
<br class="clear" />
Take spacer out the bottom navbar:
<div class="ccm-spacer"> </div>
Maybe try wrapping your ul:
#navbar{margin:10px auto;padding:0;height:30px}It worked for me.
Hope this helped
Hi,
Try this modified style sheet, see attached and let know how you get on.
Try this modified style sheet, see attached and let know how you get on.
Hi,
I just uploaded the css file you sent. Many thanks but now the navbar
and copyright area do not display as they are underneath the content
slideshow. Mine seemed to be working better but DW seems to have permanently replaced my old one with the new. Back to the drawing board!
I just uploaded the css file you sent. Many thanks but now the navbar
and copyright area do not display as they are underneath the content
slideshow. Mine seemed to be working better but DW seems to have permanently replaced my old one with the new. Back to the drawing board!
Hi,
I take it back!!! Fiddled a little in C5 and now it looks great.
Not sure how the navbar ended up above the content area, but at
this point I could care less....
Thank you very much. Are you thinking gardens?
I take it back!!! Fiddled a little in C5 and now it looks great.
Not sure how the navbar ended up above the content area, but at
this point I could care less....
Thank you very much. Are you thinking gardens?
Me again.
Just noticed that while the navbar is above the slideshow on the home page, it's below the content on the about page. What's with that?
Just noticed that while the navbar is above the slideshow on the home page, it's below the content on the about page. What's with that?
Hi,
Try this modified theme.
it worked for me.
Try this modified theme.
it worked for me.
Thank you once again.
So far, 2 problems. The nav bar isn't centered on home page. On
the about page photo and text are missing & nav bar is vertical.
I'm attaching screenshots.
So far, 2 problems. The nav bar isn't centered on home page. On
the about page photo and text are missing & nav bar is vertical.
I'm attaching screenshots.
Hi,
Found a couple of errors, one mine and one not?
Your showing the div below inside your nav div (at the end) try taking that out.
Found a couple of errors, one mine and one not?
<navbar> should be just <nav>
Your showing the div below inside your nav div (at the end) try taking that out.
<div class="ccm-spacer">nbsp;</div>
You also need to push the padding over in the nav.
It WILL work one day...
.nav{margin:10px auto; padding:0 0 0 100px; (alter this to center links) height:30px;}
It WILL work one day...
Once you have got the nav bar in the center by changing the left padding to 208px, You should add the auto-nav to the Page Type defaults, for instance, suppose the theme template that the Homepage is using is default.php and if you intend to use the same layout for the other pages on your website, you need to check this video tutorial on how to add certain blocks to the default page types, so that whenever you create a new page, the blocks that you wish to see on all your pages like for example the auto-nav block, is always added to the new pages that you create.
http://vimeo.com/3023508
Some reading about understanding Page Types
http://www.concrete5.org/documentation/general-topics/page-types/...
http://vimeo.com/3023508
Some reading about understanding Page Types
http://www.concrete5.org/documentation/general-topics/page-types/...
Thank you so much for your input. It is now working and I'm gradually getting the hang of web design and C5.
It will work TODAY!!!!!
It's up and running. The portfolio page is slow to load but so what
One last question. I think (and hope) this is an easy one. How to I turn
my email address on the contact page into a link?
It's up and running. The portfolio page is slow to load but so what
One last question. I think (and hope) this is an easy one. How to I turn
my email address on the contact page into a link?
In edit mode select your email address. Then click on the little chain icon in the rich text editor and it will ask you for a url. Type: mailto:me@mydomain.com
Exit edit mode.
Exit edit mode.
Done! And is was so wonderfully easy. Thank you
Hi,
Glad you got there in the end.
Email address, why use gmail when you have your own domain?
jane@englishgardendesign.info sounds better and more professional. I'm always wary of gmail, yahoo or hotmail email addresses.
Anyway, put contact page in edit mode.
Select email text: 'email' 'email me' or in your case 'englishgardendesign@gmail.com '
Click link icon looks like a chain link.
In pop up at top 'Link URL' type 'mailto:englishgardendesign@gmail.com'
Thats:- mailto:englishgardendesign@gmail.com, do not forget the colon.
Portfolio IS slow. There is a reference to asmiller_gallery and amiant_gallery before gallerific. Take out all unnessesary code.
Good luck...
Note: Your files and server needs attention for speed increase. Files needs minimising and your server needs compression set up. But thats for another day...
Glad you got there in the end.
Email address, why use gmail when you have your own domain?
jane@englishgardendesign.info sounds better and more professional. I'm always wary of gmail, yahoo or hotmail email addresses.
Anyway, put contact page in edit mode.
Select email text: 'email' 'email me' or in your case 'englishgardendesign@gmail.com '
Click link icon looks like a chain link.
In pop up at top 'Link URL' type 'mailto:englishgardendesign@gmail.com'
Thats:- mailto:englishgardendesign@gmail.com, do not forget the colon.
Portfolio IS slow. There is a reference to asmiller_gallery and amiant_gallery before gallerific. Take out all unnessesary code.
Good luck...
Note: Your files and server needs attention for speed increase. Files needs minimising and your server needs compression set up. But thats for another day...
Thank you so much. You really have saved the day!
(I didn't realize I had a jane@englishgardendesign.info address. It would sound much better, I agree)
Yes, file and server management are for another day. I need to recover from this phase!
How can I thank you? I'm so appreciative.
(I didn't realize I had a jane@englishgardendesign.info address. It would sound much better, I agree)
Yes, file and server management are for another day. I need to recover from this phase!
How can I thank you? I'm so appreciative.
Hi,
Just noticed another flaw!!
My HTML5 code got mixed with your code.
Default php should look like this:
Just noticed another flaw!!
My HTML5 code got mixed with your code.
Default php should look like this:
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/jegd.css"> <!--[if lt IE ]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <?Loader::element('header_required'); ?> </head> <body> <div id="wrapper"> <div id="logo"> <h1>ENGLISH GARDEN DESIGN</h1></div> <!--end "logo"--> <div id="content"> <div id="image">
Viewing 15 lines of 25 lines. View entire code block.
I'm so afraid to touch anything now that it's working. But I will try to get up the courage.
What is this:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Should that be included or removed? Confused!
What is this:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Should that be included or removed? Confused!
Hi,
I work with HTML5, your code is not.
You need to change:
To:
You can take out:
and take out the loose end tag 'article':
I work with HTML5, your code is not.
You need to change:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html lang="en"><head>
To:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
You can take out:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
and take out the loose end tag 'article':
<!-- end .content --></article>
Got it and will tackle the job tomorrow!
"Portfolio IS slow. There is a reference to asmiller_gallery and amiant_gallery before gallerific. Take out all unnessesary code."
Forgive my ignorance, YET AGAIN, but I can find the above when I view
the source code online, but there is no reference to the other galleries in my files. How do I go about removing them?
Thanks!
Forgive my ignorance, YET AGAIN, but I can find the above when I view
the source code online, but there is no reference to the other galleries in my files. How do I go about removing them?
Thanks!
Ok,
Not sure how you did it?
I tried replicating the errors, but couldn't get them.
Have you tried clearing the cashe in dashboard/settings/Speed Settings?
I did however find that with only nine opimised images with gallerific the page load was between 9 and 12 seconds, no good?
We'll have to talk to the developer about that one.
You still need to modify your default php template?
Sorry I couldn't help
Not sure how you did it?
I tried replicating the errors, but couldn't get them.
Have you tried clearing the cashe in dashboard/settings/Speed Settings?
I did however find that with only nine opimised images with gallerific the page load was between 9 and 12 seconds, no good?
We'll have to talk to the developer about that one.
You still need to modify your default php template?
Sorry I couldn't help
I love the way the Post Reply box obscures the original message. Just sayin'. Hear that, C5?
At any rate, I cleared the cache in sitewide settings. The portfolio page seems to be loading a little faster, but not as fast as it should be. I optimized all the photos in Photoshop, but maybe I should go back and make the files even smaller?
Not sure what you mean about the errors. I experimented with 2 other slideshows before I settled on Gallerific. There's no trace of them at my end, but when viewing the source code in Firefox I could see references to the previous two. So, I wasn't sure how to get rid of them as you can't edit within Firefox and I don't know where else to look.
At any rate, I cleared the cache in sitewide settings. The portfolio page seems to be loading a little faster, but not as fast as it should be. I optimized all the photos in Photoshop, but maybe I should go back and make the files even smaller?
Not sure what you mean about the errors. I experimented with 2 other slideshows before I settled on Gallerific. There's no trace of them at my end, but when viewing the source code in Firefox I could see references to the previous two. So, I wasn't sure how to get rid of them as you can't edit within Firefox and I don't know where else to look.
Hi,
I checked your images, the weights are fine.
But you do have duplicates of four images according to speed test.
77f609b65a27216dc2ea0f72d295e62f.jpg
5842d0c2401883f9bc2a461997cb9de8.jpg
a332acabbc0c413e0114656e855c87c2.jpg
97c141ba2bcd58ec786bfb69cb9beb7d.jpg
45a33c57ee77ad11bf2cf9ec7d8ea256.jpg
7d8b47264fcacf74b865e8945a7aa73c.jpg
2bfe0b43d3dfb5ab6cecc25604e84207.jpg
77206f6bd711737fbaff8bbe64d82a07.jpg
Removing might help a touch.
Good Luck...
I checked your images, the weights are fine.
But you do have duplicates of four images according to speed test.
77f609b65a27216dc2ea0f72d295e62f.jpg
5842d0c2401883f9bc2a461997cb9de8.jpg
a332acabbc0c413e0114656e855c87c2.jpg
97c141ba2bcd58ec786bfb69cb9beb7d.jpg
45a33c57ee77ad11bf2cf9ec7d8ea256.jpg
7d8b47264fcacf74b865e8945a7aa73c.jpg
2bfe0b43d3dfb5ab6cecc25604e84207.jpg
77206f6bd711737fbaff8bbe64d82a07.jpg
Removing might help a touch.
Good Luck...
The menu is essentially an HTML unordered list <ul><li>...</li>...</ul>
The list items will fall vertically by default, unless you give them the 'float:left' property, which will cause them to align like text!
The exact tags depend on your template HTML. You may also want to add list-style:none to the CSS for the <ul> tag to remove the bullet points.