Hello all

 

Well, i am a 17 year old trying to help out his Dad's business during the summer holidays. Im trying to make him a new "flashy" website, that is just a pleasant refresh from the old one. I have absolutely no experience in web design, but thought id give it a go.

 

I started off by just editing this template, just changing the text where i wanted - very basic.

 

Now, i want to make a drop down menu on "Products" ("Column layout A" in the template)- where you hover your mouse over "Products" and then magically pops down "Products1, Products2" etc.

 

Ive managed to do this with some free menu code (from just copying and pasting what i found off google) - but the menu sticks out like a sore thumb - the style of the menu isnt the same style as the rest of the website, which looks rather rubbish. I want the menu to be in the same style as i have now (eg same colours / fonts, plus keeping it as it is now whereby when you hover your mouse over one of the links it changes colour - see the template for a better explanation!)

 

I understand its something to do with the CSS files, but i dont quite know what they are (im yet to even open them!) I thought the code would automatically "detect" the CSS file in the directory (its meant to be clever right ) but now i guess i have to manually edit it?

 

So im asking for your help in getting this menu working and making it all pretty.

 

Any help is much appreciated, and im happy to send you what i allready have / want / post screen shots - as i know my explanation was pretty poor

 

Thanks again

The first thing I'd recommend is reading up a little of what CSS is get get an understanding of what it is and how it works. Even if it's just the basics. http://www.w3schools.com/css/default.asp is a good place to start.

Also, I'd also recommend you read their introduction to HTML as well.

 

See if that helps a bit, then just come back and ask again if you're still struggling.

 

Here's some other resources explaining how to create drop down menus.

http://www.alistapart.com/articles/horizdropdowns

http://www.alistapart.com/articles/dropdowns/

The first thing I'd recommend is reading up a little of what CSS is get get an understanding of what it is and how it works. Even if it's just the basics. http://www.w3schools.com/css/default.asp is a good place to start.

Also, I'd also recommend you read their introduction to HTML as well.

 

See if that helps a bit, then just come back and ask again if you're still struggling.

 

Here's some other resources explaining how to create drop down menus.

http://www.alistapart.com/articles/horizdropdowns

http://www.alistapart.com/articles/dropdowns/

Thanks for that.

 

Reading time for me! That last link looks very interesting...

Started reading, but its gona take a while! Any quick fixes?!

 

Thanks

there are no quick fixes in learning :-)

there are no quick fixes in learning :-)

 

Good point! But are there any quick fixes to get this menu working? If anyone would be able to guide me through it (even do it for me?!) id appreciate it so much...

If you can post a live sample of what you got we could have a look. Always easier to see the actual codes in question.

If you can post a live sample of what you got we could have a look. Always easier to see the actual codes in question.

Good idea. Ok, ill attack my index.html and you can have a look at it. You'll be able to see that ive just copied some code - and thats about it! You should also get an idea about what i mean about the styles and the changing colour when you hover your mouse over a box.

 

FYI, this website is an example of what im looking to achieve (on the drop down menu side of things).

 

One quick question, when i preview my index.html in firefox, all is fine, but in IE i get an Active X warning and the menu doesnt work without allowing the blocked content... its only a menu?! Why is this happening?

 

Thanks for taking an interest - much appreciated.

index.html

You haven't actually said that you want to learn web design.

Just that you want to help create a neat site for your father’s business. I respect that.

If that’s the case, I would suggest you use a graphical WYSIWYG HTML Editor.

There’s no coding involved and you can easily replicate that web site you’re interested in

with dynamic drop down menus and rollover effects etc, within a few hours.

Have a look at this 'Dynamic HTML Editor' at http://www.hexagora.com it may be just what you’re after.

It really doesn't get much easier than this.

Good luck.

You haven't actually said that you want to learn web design.

Just that you want to help create a neat site for your father’s business. I respect that.

If that’s the case, I would suggest you use a graphical WYSIWYG HTML Editor.

There’s no coding involved and you can easily replicate that web site you’re interested in

with dynamic drop down menus and rollover effects etc, within a few hours.

Have a look at this 'Dynamic HTML Editor' at http://www.hexagora.com it may be just what you’re after.

It really doesn't get much easier than this.

Good luck.

Hey thanks for the response.

 

To be honest id love to be able to make all these amazing websites that i see (ive got so many ideas for my one - but just not the knowledge to back it up), but i just dont have the time to be able "study" these as such. However, i am considering doing a university course... but first things first i just wana help my dad!

 

So far ive been using Expressions Web (trailed Dreamweaver but it confused me). I would have thought all these apps would have been able to build a menu in the programme (its not that advanced after all!) but ill check out Hexagora, i just dont see why expensive apps like Expressions Web and Dreamweaver, dont have "Insert > Drop Down Menu"!?

 

Ill have a look and report back - thanks again.

Ok, tried it... and hated it!

 

Thanks for the help though.

 

I just dont see why i cant do it in expression web. I copied the source from here and all it seems to be is a table! Why cant i just have the same, i dont see why this isnt simple HTML? This is driving me mad!

 

<div id="menuwrapper">
<li><a class="trigger" href="products.html">Products</a>
     <ul>
       <li><a href="1.html">Products1</a></li>
       <li><a href="2.html">Products2</a></li>
       <li><a href="3.html">Products3</a></li>
       <li><a href="4.html">Products4</a></li>
       <li><a href="5.html">Products5</a></li>
     </ul>
</li>
</ul>

if it was easy we'd be out of a job :-) take the code from my homepage and I can help you better. http://www.miccysoft.co.uk

if it was easy we'd be out of a job :-) take the code from my homepage and I can help you better. http://www.miccysoft.co.uk

Well, next thing you'll tell me that inserting an image requires a MSQL database with a combination of PHP/APS/Java and Flash I just thought a drop down menu would be relatively easily - oh was i wrong!

 

Sorry i am a complete beginner at this, shall i just view source, copy code and paste it into what i have allready (which btw is the index.html file that i uploaded above). Ahh i see you too have that table stylee...

 

Thanks for the help.

It's not tables. It's an unordered list formatted into boxes. That is code I did last week. All the css for the menu is here

 

http://www.miccysoft.co.uk/menu.css

 

the menu code is

 

<div id="menu_container">
<ul id="pmenu">
<li><a href="index.php">Home</a></li>
<li class="drop"><a href="#" class="nolink">About Me</a>
<ul><li class="enclose"><a href="about/1about_me.php">About me</a></li>
<li><a href="about/2about_introverts.php">About introverts</a></li>
<li><a href="about/3pictures.php">Pictures</a></li></ul>
</li>
<li class="drop"><a href="#" class="nolink">Favourites</a>
<ul>
	<li class="fly"><a href="#" class="nolink">Poetry</a><ul>
		<li class="enclose"><a href="poetry/1if.php">If</a></li>
<li><a href="poetry/2do_not_stand.php">Do not stand</a></li>
<li><a href="poetry/3why_I_loved_her.php">Why I loved her</a></li>
<li><a href="poetry/4soulmates.php">Soulmates</a></li>
<li><a href="poetry/5in_the_spotlight.php">In the spotlight</a></li>
<li><a href="poetry/6sonnet116.php">Sonnet116</a></li>
	</ul></li>

	<li class="fly"><a href="#" class="nolink">Lyrics</a><ul>
		<li class="enclose"><a href="lyrics/1ode_II_Joy.php">Ode II Joy</a></li>
	</ul></li>

	<li class="fly"><a href="#" class="nolink">Quotes</a><ul>
		<li class="enclose"><a href="quotes/1hackers_manifesto.php">Hackers manifesto</a></li>
<li><a href="quotes/2my_friend.php">My friend</a></li>
<li><a href="quotes/3carl_Sagan.php">Carl Sagan</a></li>
<li><a href="quotes/4winston_Churchill.php">Winston Churchill</a></li>
<li><a href="quotes/5assorted_friendship.php">Assorted friendship</a></li>
<li><a href="quotes/6assorted_judgement.php">Assorted judgement</a></li>
<li><a href="quotes/7voltaire.php">Voltaire</a></li>
<li><a href="quotes/8benjamin_Franklin.php">Benjamin Franklin</a></li>
	</ul></li>		

</ul>
</li>
<li class="enclose"><a href="./contact.php">Contact</a></li>
</ul>
</div>

 

 

It should be easy enough with the website to work out what does what and how to get it to work. As for formatting it to fit your website you just have to change the colour codes in the menu css.

i just dont see why expensive apps like Expressions Web and Dreamweaver, dont have "Insert > Drop Down Menu"!?

I know Dreamweaver CS3 does.

It’s under the Spry menu ->Spry Menu Bar.

I would still use Daemon Byte’s css example though. It’s lightweight and JavaScript free.

Thanks for the help guys - this is starting to drive me mad

 

It should be easy enough with the website to work out what does what and how to get it to work. As for formatting it to fit your website you just have to change the colour codes in the menu css.

Thats what i cant do. I can copy the code and get the menu and edit the links to what i need, but i cant apply the CSS. Thats what ive been saying - all the drop down menus ive tried dont fit in with the rest of the site. Look at what happened when i tried to just apply the template CSS files to your code:

 

http://img444.imageshack.us/img444/8979/picture1kp9.jpg

 

 

I know Dreamweaver CS3 does.

It’s under the Spry menu ->Spry Menu Bar.

I would still use Daemon Byte’s css example though. It’s lightweight and JavaScript free.

Ill have a look into Dreamweaver... But i cant seem to use Byte's. I just suck to much with CSS to make the menu fit in with the rest of the site.

 

Look what i got when i tried to use Dreamweaver... this is so frustrating...

 

http://img444.imageshack.us/img444/4646/picture2qo3.jpg

 

Help

 

/pulls out hair

that looks like you didn't apply my css.