Menu Background Image Using DHTML...

User 122279 Photo


Senior Advisor
14,624 posts
Online Now

The css you quoted can be reduced to
.center {
width:402px;
margin: auto;
}

without losing the centering. But if you put in that missing ; it will also be centered, after you have deleted the other center class.

What you may see as not quite centered after these changes, may be that the text is left-aligned on each button. If you want to center the text, you go to menu-menu.css and look up this bit:
.menu-menu li a {
text-align:left;
}

and change the 'left' to 'center'.

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,624 posts
Online Now

Re: Extending the blue background beyond the menu:

I created a class 'navbar' and applied it like this:

<div class="navbar">
<div class="center">

<ul class="menu-menu">

<li class="first"><a href="index.html">Home</a></li>
<li>
<a>Services</a>
<ul>
<li class="first"><a href="direct_marketing.html">Direct Marketing</a></li>
<li><a href="marketing_strategy.html">Marketing Strategy</a></li>
<li><a href="social_media.html">Social Media</a></li>
<li><a href="website_development.html">Website Development</a></li>
<li><a href="multi_channel_marketing.html">Multi-Channel Marketing</a></li>
<li><a href="best_practices_review.html">Best Practices Review</a></li>
</ul>
</li>
<li><a href="about_us.html">About</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div></div>


The css for the new class was added to my-menu.css:
.navbar {
margin: auto;
width: 90%;
background: url('activebg.jpg');
background-repeat: repeat-x;
height: 30px;
}


The blue image has a black border on the right, so I cropped it and also reduced the size a bit. Attaching it here.

Have to add that I had saved the activebg.jpg on the desktop, where I also had the other files of yours, so of course, you'll have to set the correct path to it.

Added: Looking at it, I'd go for 93% width of that blue background stretching beyond the menu. Then it will be the same width as the page content. You could experiment with the left-margin of the logo in order to move it a wee bit to the right, in sync with the content, too.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2283504 Photo


Registered User
36 posts

Inger,

Thank you. We have the menu centered now but it still does not span across the page...seems like something may be missing?

Regards,

Bryon
Bryon K. Smith
User 122279 Photo


Senior Advisor
14,624 posts
Online Now

Hi, Just re-read my previous post. You have forgotten to apply the navbar class to the html document, as shown in the first code box above.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2283504 Photo


Registered User
36 posts

Inger,

I think I made all the changes you outlined but it still does not span the page. Please take another look and let me know if I have missed something else.

Regards,

Bryon
Bryon K. Smith
User 2283504 Photo


Registered User
36 posts

Aha...

I see where I made a mistake. Instead of:

background: url('activebg.jpg');

I needed this background: url('../images/activebg.jpg');


Thank you Inger

Regards,

Bryon
Bryon K. Smith
User 122279 Photo


Senior Advisor
14,624 posts
Online Now

It looks good now, Bryon. If I were you, I would let the blue background span 93%, not just 90%. If you lengthen it, it will be as wide as the contents below, and you would get a straight margin.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,266 posts

Looks good Bryon. You must be getting the hang of this stuff.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2283504 Photo


Registered User
36 posts

Thank you Inger and Eric.

This is very challenging, logical and fun but I would be really really lost without your help. The good news is that I feel like I am learning new tricks every day and that is fun.

Bryon
Bryon K. Smith
User 122279 Photo


Senior Advisor
14,624 posts
Online Now

We also learn a lot just by helping others. We often have to stop and think, and that's good. A sign that we're still alive, I guess ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.