Menu Separator - OSTraining Support

Welcome, Guest

TOPIC: Menu Separator

Menu Separator 11 months 3 weeks ago #47645

tonyim
OFFLINE
OSTarter
Posts: 18
Karma: 0

Hello,

I am wondering how to display my menu with a logo separating the list at the middle. The first picture is the ideal requirement while the second picture is what I get when I used the code below. How can I get the list to stop at “BUSINESS” and then continue after the logo with “VIDEOS, PRESS RELEASES and EVENTS”. Thanks for your help.

<div>
<ul id="navBar">
<li id="active"><a href="">Home</a></li>
<li><a href="">Bio</a></li>
<li><a href="">Politics</a></li>
<li><a href="">Business</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Press Releases</a></li>
<li><a href="">Events</a></li>
</ul>
</div>

<style>
ul#navBar
{
white-space: nowrap;
margin-left: 0;
padding-left: 0;
}
#navBar li
{
list-style-type: none;
display: inline;
}
#navBar a { padding: 4px 12px; }
#navBar a:link, #navBar a:visited
{
text-decoration: none;
color: white;
background-color: #053666;
text-transform:uppercase;
}
#navBar a:hover
{
text-decoration: none;
color: yellow;
background-color: black;
}

</style>

Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47646

tonyim OFFLINE OSTarter Posts: 18 Karma: 0	Following on from my previous posts, I had placed the logo in the unordered list so that it is centred in-between the first four links and the last 3 links (4 and 3 links on each side of it). The logo will extend beyond the background of the "navigation div". Should I make the logo a floated li class? I’m new to this so please bear with me and your advice would be much appreciated.
	Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47649

tonyim
OFFLINE
OSTarter
Posts: 18
Karma: 0

Tried fixing it with the following code but it displaces the navbar and the logo image:

<html>
<head>
<title>Testing</title>
<style type="text/css">
#navMenu {
display:table;
margin:0 auto;
}

.menuItem {
float:left;
position:relative;
}

.menuItem ul {
text-decoration:none;
margin:0;
padding:0;
text-transform:uppercase;
}

.menuItem li {
border: 1px solid #FF0000;
display: block;
float: left;
padding: 0 20px;
}

#logo {
border: 1px solid #FF0000;
float: left;
height: 20px;
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div id="navMenu">
<div class="menuItem">
<ul>
<li>home</li>
<li>bio</li>
<li>politics</li>
<li>business</li>
</ul>
</div>

<div id="logo"><img src="tonyep.webcltd.com/images/logo001.jpg" width="402" height="90" /></div>

<div class="menuItem">
<ul>
<li>videos</li>
<li>press releases</li>
<li>events</li>
</ul>
</div>
</div>
</body>
</html>

Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47660

tessa OFFLINE Moderator Posts: 3953 Thank you received: 134 Karma: 9	Hi tony, Edited. Going to respond when I get to a computer to mess with the code. :-)
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47680

tessa
OFFLINE
Moderator
Posts: 3953
Thank you received: 134
Karma: 9

Hi Tony,

I was just looking at your code and noticed that image does not exist at the moment, and the code you are using isn't live on your site.

Is there a way you can make these updates on a testing site so I can test with firebug? I'm having a hard time with dreamweaver and a broken image. :)

Also, your current logo is part of your background but I'm not sure if your working on a live site or not. :-)

I'd love to continue to help as long as I have firebug to work with. Have you tried using firebug before? :-)

Warm Regards,

Tessa Mero

Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47711

tonyim
OFFLINE
OSTarter
Posts: 18
Karma: 0

Hello Tessa,

Sorry for the late reply, I was at work. Thanks a lot for getting back to me and for all your effort. I have worked hard on this all day and managed to get it working albeit problems with the positioning. Two of the menu items are out of position and gone beyond the page width. This occurred when I added a new item and changed the position to fixed from absolute. I had change the position to fixed as the page was twitching each time I clicked on the “HOME and BIO” menus.

I have moved this online to a test site which is: www.flitanfoods.com/Disclaimer.html

I would try the firebug now and keep you posted.

Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47725

tessa
OFFLINE
Moderator
Posts: 3953
Thank you received: 134
Karma: 9

Hi Tonyim,

I have been observing your code. What you are trying to accomplish will be very difficult with the way your entire code is set up. This is the closest I was able to get:
localhostr.com/files/jy33tIg/capture.png

You also have 4 javascript errors on that page and 25 coding validation errors (w3validator) which makes it harder to fix things.

I also redid your menu with some pretty jquery code that would look good with your website if you are interested in working with this:
jsfiddle.net/p4aWc/1/

Also can you post your wireframe again? :)

If you are having more issues with CSS, check out our CSS courses:
www.ostraining.com/courses/class/coding/css/view/

Warm Regards,

Tessa Mero

Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47738

tonyim OFFLINE OSTarter Posts: 18 Karma: 0	Absolutely superb! On reflection I would go with your suggestion bearing in mind that I still have a long way ahead as I have to now complete the webframe and export as a theme to drupal, so the less complicated the better. Thanks again, and would let you know as I get on.
	Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47768

tessa OFFLINE Moderator Posts: 3953 Thank you received: 134 Karma: 9	Hi Tonyim, Sometimes it doesn't hurt hiring a coder to help you out on projects to make sure everything works out perfectly, and in some cases that could save an enormous amount of time. Would you be interested? I'm only suggesting this because I am in the same situation on a project of mine that I have someone help me with once in awhile so I don't come to any project "haults". :-)
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47815

tonyim OFFLINE OSTarter Posts: 18 Karma: 0	Definitely Tessa. I believe I would need one to code the page.tpl.php file when I am ready to export as a theme to drupal. Please pass on the details here or to my email while I complete the site. Thanks.
	Please become a member of OSTraining to reply to this post.

Menu Separator 11 months 3 weeks ago #47849

tessa OFFLINE Moderator Posts: 3953 Thank you received: 134 Karma: 9	Hi Tony, As for developers, here is the list of people we recommend: www.ostraining.com/resources/joomla/developers/ I would try to contact Steven Pignataro first. :-)
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

TOPIC: Menu Separator

Menu Separator 11 months 3 weeks ago #47645

Menu Separator 11 months 3 weeks ago #47646

Menu Separator 11 months 3 weeks ago #47649

Menu Separator 11 months 3 weeks ago #47660

Menu Separator 11 months 3 weeks ago #47680

Menu Separator 11 months 3 weeks ago #47711

Menu Separator 11 months 3 weeks ago #47725

Menu Separator 11 months 3 weeks ago #47738

Menu Separator 11 months 3 weeks ago #47768

Menu Separator 11 months 3 weeks ago #47815

Menu Separator 11 months 3 weeks ago #47849

Site Navigation

Contact Us