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
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
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
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
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:
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.
In the <style> section is where you name your CSS classes, so for example if I want a div to have a solid red border that is one pixel in width I would code it like this: <style> .red-div {border: 1px solid red;}
When reading through a number of HTML/CSS blog posts and comment sections I’ve come across the term “deprecated” quite a few times. At first I ignored it, but after about the 1,589th time seeing it I decided it would be worthwhile to get the formal definition.
The more I learn about coding the more I’m able to identify my mistakes and shortcomings. I coded a ‘Hotel’ page for my South Ataria Island website a couple of weeks ago. Sometime last week I noticed an issue with the display on larger screens, see below:
After successfully using the calc function for width I naturally wondered if I could use the same function for height. At first I thought the answer was a definitive ‘no!’ I tried a couple of calc formulas for height: height: calc(100% – 100px); height: calc(500px + 25%);
