So, What's Your Website - Page 61 -...

User 117361 Photo


Ambassador
6,076 posts

Naomi,
Here attached you will see a screenshot of your home page... is this how it should look?
Attachments:
User 2038115 Photo


Registered User
4 posts

BillR - I found that out the hard way, but I think I'm going to try and move solely to Editor for that reason and the fact that I can't figure out a way just to insert lines of text (for lists) into the code or site without creating boxes in VSD.

Janys - thanks for the tip on the fonts; I'll change them. The screen shot you sent is exactly what the front page should look like - am I missing something from image you sent?
User 117361 Photo


Ambassador
6,076 posts

Naomi
I added the screenshot as I do not know what the fonts you used should look like - so if you were seeing something different to what you had planned, it would have shown up that way. So no - no problems at all, and the site looks nice, neat and professional.
User 244141 Photo


Ambassador
1,209 posts

Naomi,

I like the layout of your site and the button style. Really good stuff.

Web Design: https://www.websnoogie.com
Member - BBB: Websnoogie, LLC






User 104702 Photo


Registered User
293 posts

for all of you http://www.allofthebest.net : a happy new year

John
John van Hulst
User 282670 Photo


Registered User
3,940 posts

Happy New Year To and Yours John-Thank You:)




User 2038115 Photo


Registered User
4 posts

Janys and James T. Kirk - thanks for the compliments. I tried to keep the site very clean. Now, if I can just figure out how to make drop down menus off of the buttons...
User 117361 Photo


Ambassador
6,076 posts

Naomi
Stu Nicholls always has some interesting css menus and stuff. Take a look at his stuff on this site here:
http://www.cssplay.co.uk/menus/final_drop.html
Maybe you can work out how to fit one of those into your site.
User 355448 Photo


Ambassador
3,144 posts

Naomi Byrne wrote:
Now, if I can just figure out how to make drop down menus off of the buttons...


If you are using the HTML Editor built in menu builder, you can edit the code and add images instead of text for the menus. That would give you a drop down menu using buttons.
User 117361 Photo


Ambassador
6,076 posts

Naomi, as Bill says, you can make changes to the CC css menu. What I do NOT agree with is that the text can be removed. In fact in this menu, the text just layers on top of the background image, so you still need both. For that reason you should choose your background carefully so that the text remains clearly visible with a good contrast against the background. Leaving in the text means that your users can change the size if they need to for any physical needs such as poor eyesight. It also means that the search engines will be able to find your menu - text images are ignored.

You will have created a snippet of code for a dropdown menu which will look something like this:
<ul class="menu-menu">
<li class="first">
<a href="http://">Untitled1</a>
<ul>
<li class="first"><a href="http://">Untitled4</a></li>
</ul>
</li>
<li>
<a href="http://">Untitled2</a>
<ul>
<li class="first"><a href="http://">Untitled6</a></li>
<li><a href="http://">Untitled7</a></li>
<li><a href="http://">Untitled8</a></li>
</ul>
</li>
<li><a href="http://">Untitled3</a></li>
</ul>


Go look for the css file which will have been saved together with the page. The page will need to be saved before you can proceed with any changes in the colours, backgrounds etc. defined in the css file.

You will find the name of the css file up the top of your html page. It will read something like this:
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">

You can see that the css file is actually tucked away inside a folder called "css" - hence the file address "css/menu-menu.css" where the initial "css" stands for the name of the folder containing the css file which you will be looking to make some changes to.

Open up the css file in your html editor.
Here is an example of how I have inserted a background image into the menu. You can see how I have used code to add it.
This line of code was on about LINE 20 of the css file
.menu-menu li a {
text-align:left;
background-image:url('../images/coffee-bg.jpg'); background-repeat:repeat;
}

You will also notice that I have created a file to hold the image, but you would probably already have a file containing all your images anyway.

You would need to experiement a bit to see where you want your image - or if you want different images in different phases of the menu function (eg.hover, active etc.)

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.