Part 2: Coding a Drop Down Menu

| Comments Off on Part 2: Coding a Drop Down Menu

I’m on day 2 of my quest to get a full understanding of how to code a horizontal navigation menu with a drop down submenu. Again, this is no easy task to wrap your head around. Fortunately for me there are numerous incredible coders who freely share their code online, which has helped me out tremendously.

Before I jump into any code I want to first speak about how these menus work (again from the viewpoint of a newbie). The examples I have found online build menus based on one of two structures: 1) ordered lists or 2) divs. Although different means, each has the same basic underlying structure which I will explore in the following. For ease of understanding I’ll break the menu CSS structure into 3 parts: Continue reading…

Inline-Block Div in a Div

| Comments Off on Inline-Block Div in a Div

A few days ago I wrote a post entitled “Floating Divs in a Div” where I shared a small quirk I was having with the float property when I coding a layout that had nested divs inside a larger div. After another post where I learned that ‘inline-block’ acts almost just like ‘float’ I wanted to go back and revisit to see if I would have the same issue. Continue reading…

Last Night Line-Height Saved My Life

| Comments Off on Last Night Line-Height Saved My Life

I love to use Google Fonts for my Ataria Island website, but the one major problem has been extra padding or margin around the fonts, especially on the larger font sizes. It seems like at times there is 10px, 12px, 15px of extra space on top and on the bottom of the text. I’ve tried to fix it by putting the text in <span> tags (instead of <p>) and adding ‘padding: 0px;’ and ‘margin: 0px’ to the text’s CSS but in most cases I get no change. This leaves me scratching my head wondering ‘what is up with this?‘ Continue reading…

Part 1: Coding a Drop Down Menu (CSS)

| Comments Off on Part 1: Coding a Drop Down Menu (CSS)

One of many remaining CSS challenges for me is coding a horizontal navigation menu that displays a drop down menu either via mouse pointer hover or click. I’ve looked at the code for a couple of these and I have to say, based on my current skill level, this isn’t going to be easy.

I decided to start with the “easiest” example I could  find, and that was the one at W3Schools. I’ll use their code as a basis, and then show my code as a way to simplify it even more. I’m hoping by the end my explanations will be make it super easy for even a novice to understand, which should help me since that is my skill level also. Continue reading…

Block Party: Block and Inline-Block

| Comments Off on Block Party: Block and Inline-Block

I’m trying to build up to coding a navigation bar, but the first step is getting some better understanding of {display: block;} and {display: inline-block;}. I can’t lie, at first I was like “what-the-what-now?” – but hopefully after this post these concepts will be a lot clearer to me and you if you’re just learning like me.

‘Display: block;’ to me is the easiest to understand so let’s start there. Suppose you want to code a hyperlink inside a box with a width of 250px, a height of 30px, a blue solid border and a font color of green. Your probably thinking this is way too easy, just code the following: Continue reading…

Shhhh…A Position Absolute Secret

| Comments Off on Shhhh…A Position Absolute Secret

One hurdle I have yet to conquer is the the onclick drop down menu, which I know I will need to master for small/mobile layouts. While looking for a pure CSS version I came across some code that I did not fully understand. To dissect it I copied it into notepad and began to comb through it line by line.

The first thing I noticed that through me off was a series of nested divs (parent/child? I still have to get up on this terminology!): Continue reading…

Floating Divs in Div

| Comments Off on Floating Divs in Div

One of the basic fundamentals of CSS (as far as I can tell) is nesting divs. Maybe that is the wrong terminology for this, maybe its parent and child, I don’t know and I’m still learning so please forgive me CSS gods. Anyways, placing div(s) inside another div is fundamental to controlling your layout. There is one tricky part, a property that I keep leaving out. Let’s run through this:

CSS:

.outside-div {border: 2px solid blue; width: 400px; padding: 15px;} Continue reading…

A Hyperlink Problem Resolved

| Comments Off on A Hyperlink Problem Resolved

I came across an issue coding a hyperlink for a ‘button’ yesterday. Let me first be clear though, when I say button I’m really speaking about a div. I was creating a horizontal menu with three divs that were to act like buttons, each with their own individual text options. It was something like this:

[Website]  [Directions]  [Reviews]

Easy enough right? I put each into a div, like this (CSS first):

CSS: Continue reading…

A Take on Coding Schools

| Comments Off on A Take on Coding Schools

I came across the article “Want a Job in Silicon Valley? Keep Away From Coding Schools” on Bloomberg yesterday.It’s a must read if your like me and trying to learn code on your own. Fortunately for me I have no crazy illusions that I’m going to be able to teach myself enough coding skills that I’d be qualified for a $100K+ Silicon Valley type job in 3 months -or that some academy would do the same. This article supports the fact that those are crazy notions. I did a little research on coding schools and programs and I wasn’t able to find any that were part time – and it is not like it would matter anyways because I have absolutely no money to spend on such a program. Also, it would be hard for me to justify spending any money on such a program when there is so much free material online to study first. Continue reading…

Universal Properties

| Comments Off on Universal Properties

I picked up this tidbit looking at some random CSS code. I noticed that you can set universal properties with an asterisk like this:

* { color: blue; font-size: 1em;}

With this added within my CSS I set all the text to the color blue and the text size to 1em. Continue reading…