I’m still doing my best to master the fine points of building a drop down horizontal navigation menu. In my earlier posts on this topic I was building them with divs. Now I’m trying to do my best building them with ordered lists from memory – as in not having to reference W3Schools or some other tutorial/sample to build the menu.
The basic structure for the drop down menu using an ordered list is as follows: Continue reading…
Now I wish to try to create an external JavaScript file. I think it would also be a good time to mention again I’m writing all my code just in Notepad – nothing fancy. Also, remember I’m following the W3Schools JavaScript course. I noticed that the code is written different when placing it in an external file:
function myFunction() {document.getElementById(“love”).style.width=”500px”;}
In Part 1 the code was written inside the file like so: Continue reading…
I’m going to take some time off from CSS, I feel at this point I have at least a good foundation. My South Ataria Island website has been very helpful in building a knowledge base, but right now I feel it is more of a design project than a conduit that is helping learn more CSS skills. I still have more to learn and improve on in CSS (e.g. navigation, grid framework, etc.) so I’ll be back to it soon. However at this time I need to take a break from it and get on with something new.
I’ll be using the W3Schools JavaScript tutorial for my basis. Unlike CSS and HTML, I have no prior knowledge of JavaScript so I will start with the barest of essentials! OK, so let’s go!
I just recently finished up coding a nice “About Me” page on my South Ataria Island website. I want to share with you my thinking behind the background for that page, it isn’t rocket science but if you’re new to CSS like me hopefully you’ll find this helpful.
I wanted the background to have columns with the same image, repeated 5 times each with a different color (like a rainbow effect). This allowed me to still have a ‘cover’ background effect, except with an image with a Continue reading…
I wanted to build a horizontal menu with a drop down content area on my ‘Macross Hotels’ page. The horizontal menu was to have 3 main options: amenities, images and dining. Then the corresponding drop down section was to contain information pertaining to each category. The tricky part to this was that the menu was to be placed within the page’s content and inside a column with a dynamic width. The column’s width could be 100%, 50% or 33% of the total width of the browser window – or in static terms any length between 310px and 650px. Also, when the drop down appears it is to push the rest of the page’s content down, not overlap it like a traditional drop down menu in a navigation bar would. Continue reading…
Yes, you can assign two classes in a div.
CSS:
.class-1 {border: 3px dotted pink;}
.class-2 {background-color: orange;}
HTML Continue reading…
I’ve been working diligently on an upgrade of the Macross Hotel landing page. I currently have a rough sketch of a drop down menu and I’ve used the same method to create six different drop down content sections throughout the page. The page so far looks 100% better than the old boring and plain one here. Continue reading…
I’ve recently completed an overhaul of the ‘Macross Hotels’ page. One small feature I wish to elaborate on is the text blocks I used for the hotel names. I wanted a block of color with the text aligned all the way to the bottom right edge, below is a picture of the effect.
In Part 2 I built a skeleton drop down menu just to illustrate the basic principles. In the following I want to fill out that skeleton and build an entire navigation bar. Remember, we are starting with here which is a drop down menu built with divs (not with an ordered list).
First lets add some content below our current drop down menu. This text will help prove our navigation bar and drop down menus are working correctly, as in not moving the content down on page but instead just floating over it. It should be something simple like this: Continue reading…
I just completed (for now) the ‘Best Macross Restaurants‘ page on my South Ataria Island website, I based the design on this LA Eater website. This was a task that has taken me about a week to do as I turned a simple layout into something far more complicated. Below I’ll share some of the features and challenges I had with coding this page.
The LA Eater used Google Maps, instead I used an extremely large background cover image for this page (2000px wide). There is no need to download such a large image if you are viewing the website on a small screen like your phone. I used a media query for when the screen’s width was below 500px to replace the large background image with a Continue reading…
