Interactive Writing & Design

While working on your resumes, many of you experienced the strange phenomenon of your code only occasionally ‘listening’ to your commands to adjust margin and padding to change placement. Inconsistencies regarding the result of paddingand margin are almost always due to the display setting of the element. We’ve already dealt with two types of display: inline and block. Inline elements, such as <span>, allow additional content to be displayed on the same horizontal line, but ignore commands like ‘width’ and ‘height’ and only adjust padding/margins horizontally. Block elements, like <div>, respond as one would predict to margin and padding rules, but block elements do not allow other elements to be displayed on the same line.

So, a new type of display setting is available: inline-block. An element set to ‘display:inline-block;‘ will listen to rules regarding width, height, padding and margin, but will also allow other elements to appear on the same line.

Here’s an excellent round-up of the display property, and specifically how inline-block works, which I recommend you read before Monday’s class:

http://css-tricks.com/almanac/properties/d/display/

Additionally, as we’ve mentioned in class, centering content can be tough. We’ve done the easy way (margin: 0 auto;), but that doesn’t always work. Here’s a great description of how to deal with centering issues:

http://css-tricks.com/centering-css-complete-guide/

Our next assignment regards layout, and I’ll ask each of you to sketch out three layouts (two ‘traditional,’ one creative). So start paying attention to the layout strategies of the Websites you check out. There are some kind of interesting ideas on Pinterest:

http://www.pinterest.com/symoimo/creative-web-layout-inspiration/

I’ll achieve some of our more bizarre layouts in part by utilizing the CSS ‘transform’ property, described here:

http://css-tricks.com/almanac/properties/t/transform/

Class, as we went over in class, your FTP settings for connecting to the student server from any FTP program are:

Mode: SFTP

Host/Server: student.elon.edu

Username/PW: your Elon username/PW combo

Please refer to this page on the wiki for step-by-step instructions on how to connect:

http://www.wiki.imedia365.us/index.php?title=Elon_Student_Server

CSS positioning should only be used deliberately; by which I mean you should not use it unless you intend  on using it. It comes in 4 types, but one of those types doesn’t ‘do’ anything: static. That’s the default value; in other words, that’s what all of your HTML is set to automatically. So let’s look at the other ones more thoroughly:

Absolute. This is the one that causes the most headaches, but is used the least frequently (phew!). Absolute positioning removes an element from the flow of the document, meaning your other HTML totally ignores its placement (in other words, your regular HTML content will overlap what you absolutely position, so you need to plan for that).

Relative. Here, you’re just asking an HTML element, ‘could you please just scoot over a teeny, tiny bit? ‘  Wherever an element naturally lands on your page according to the flow of the document, relative positioning can be used to nudge it over a few pixels relative to its original position. Hence the name. This type of positioning can also result in overlapping content.

Fixed. To have a persistent header or footer, or a fixed sidebar, this is the positioning rule to use. ‘Fixed’ means that the element does not scroll with the rest of your content – it’s fixed in place.

As mentioned, these positioning strategies can result in elements overlapping. You can control what’s on top and what’s on bottom by using the z-index. A higher value for the z-index means the element is more on ‘top.’ Z-index values are relative to the document, i.e. if you position one element with a z-index of 2, it will be on top of another element with a z-index of 1. The scale goes up to 9,999, and many developers take that as an opportunity to spread their z-index values out, like 1, 50, 100, 150, etc.

It’s come to my attention that normally free FTP programs like Cyberduck and Fetch – which are still as free as free can be from their respective websites, cyberduck.io and fetchsoftworks.com – are not free in the Mac App store. In fact, they’re $23.99 and $28.99, respectively.

While I fully support the idea of paying the developers of the free software you use all the time, you don’t use this software all the time (yet), so you should not pay for it. Please download these applications from the Web, not the App Store. Feel free to purchase them after graduation, when you make money.

Hey Class,

So one problem we identified in the last class was getting our sub-menu to stay active when we hover over the links – some of you noticed that if we exit the hover-state of the button in our primary navigation, the sub-nav disappears.  Well, if we coded this correctly, it shouldn’t have that problem:

.mainNav li:hover ul {

	}

If it still doesn’t work, there’s a fix, of course:

http://www.craigmdennis.com/articles/pure-css-drop-down-menu-with-persistent-active-state
It should be noted that if you having spacing between the buttons of your sub-nav, that’ll also screw up the hover effect.  So keep them close together! Padding is fine, but margins cause problems.

On Wednesday, we’ll continue to explore navs, including one-page scrolling and some really basic parallax stuff.  A rubric for the nav assignment is forthcoming.

The code we’ll use to get a favicon onto our site will be:

<link rel="apple-touch-icon" href="path/to/touchicon.png">

<link rel="icon" href="path/to/favicon.png">

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Surprisingly complicated, eh? I’ll go over the why and how on Monday.

We’ll make our favicons as PNGs, and also save an .ICO file.

If you’re struggling with creating favicons, or just want some suggestions / best practices, check out this post:

http://www.netmagazine.com/features/create-perfect-favicon