Simple menu's & video's

Today was all about building&styling the menu & applying to all the pages as well as embedding a video to the website.  In order to style the menus we were introduced to Listamatic's (list &nested menu's) currently the industry standard way of creating HTML-based menu's.

Click here to view @ css.maxdesign.com.au the simple menu bar we used.

Once added we needed to ensure out HTML <ul> (un-ordered list) uses the same classes/IDs (tags) & apply to the correct location in our HTML.  Using some combination selectors we are able to select specific parts to stylize without having to apply ID tags to everything.

Some of the selectors learnt are....

• Natural HTML elements ( body, div, p etc )

• Universal selector ( * )

• ID selectors ( #cat )

• Class selectors ( .dog )

Combining/nesting selectors is called CSS Specificity & is one of the most confusing aspects of styling.

Here are just a few of the combination selectors used to modify and complete our web page designs...

#menu ul li {
     display: inline;
}
>>This code allows the horizontal arrangement of buttons

#menu ul li a {
     text-decoration: none;
}
>>This code alters the way the text is decorated & in this case removes the bullet points

#menu ul li a {
     text-decoration: none;
     padding: 0.2em 1em;
}
>>This code allows you to target the spacing & sizing of the buttons

#menu ul li a:hover {
     background-colour:#369;
     color:#fff
}
>>This code decides what happens to the color of the buttons (background/text) when the mouse rolls over it

With regards to styling the footer & sub menus, make sure the ID tags are different & write new CSS to style.



VIDEO EMBEDDING
Being relatively easy...to embed videos you need the following...

• the HTML file that you want to embed the video into

• know the size of the video player i.e 600px wide (in pixels)

• access to the video online

To embed a video from YouTube access the  <iframe> code by clicking Share > Embed then setting appropriate options i.e size then simply copy paste the code (see below) direct into the HTML file where you intend to place the video ...remember... you need an active internet connection to achieve this.

Voila!


Well  this was the last topic we needed  to cover through our blog...I feel exhausted!

...naah... 

I am now far more knowledgeable about how the internet & web works especially far more appreciative to all web designers/creators out there & the frustrations they must face when making one tiny typo error in the coding brings a significant headache in the building of an effective& efficient functioning web page!