Zindex in IE7 Bug
Posted on April 1, 2008
Filed Under Design | Leave a Comment
Now I know I promised to do some more design tutorials but, I have been coding my current clients’ website.
During that time, I ran into a problem. It’s not a big problem, well at least it doesn’t seem like it now. I thought I would share. The problem was having two divs, one coming after the other in the code and needing one to overlay the other. Basically like being on two different layers. Now here is example page.
http://www.beseenwebdesign.com/clients/music_festival/test.html
Example HTML code is:
<body>
<div id=”outer”>
<div id=”logo”>
<a href=”http://www.rmfs.org”><img src=”../images/RMFS_logo.png” alt=”Richmond Music Festival Society” width=”166″ height=”166″ border=”0″ longdesc=”http://www.rmfs.org” /></a>
</div></div><div id=”main_table”>
Example compliant CSS code:
#main_table{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:0px;
top:-150px;
padding-bottom:0px;
}
#logo{
float:left;
position:relative;
top:0px;
left:0px;
z-index:500;
}
#outer{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:-20px;
top:0px;
padding-top:10px;
padding-bottom:0px;
}
IE specific CSS
#logo{
float:left;
position:relative;
top:0px;
left:0px;
z-index:500;
}
#outer{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:-20px;
top:0px;
padding-top:10px;
padding-bottom:0px;
}
#main_table{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:0px;
top:-150px;
padding-bottom:0px;
z-index:-1;
}
Now on the test page of course before I fixed it, the logo was displaying under the main_table.
You can see the difference between the two style sheets is the negative z-index value in the IE specific style sheet. What do you need to know to fix this little problem. The lower layer on your page in IE needs a negative value.
For example if logo is valued at z-index:500 and main_table is valued at z-index:10o, in IE it will show which ever object comes later in the DOM structure. Now in Firefox the higher value is shown above no matter what comes first. To make the fix in IE you must give main_table a negative value like z-index:-500.
How to create text with an image background
Posted on March 28, 2008
Filed Under Design | Leave a Comment
Here is a tutorial on how to create type with an image background. I am using Photoshop CS3 on Windows.
1. Open an image - any image
2. Duplicate the layer, so that it is not locked. You can duplicate a layer by right clicking on it and selecting “duplicate layer”.
3.You can then delete the original locked layer.
4. The next step is to create a text layer. You can do that by simply selecting the type tool and start typing! In the screen shot below you will see I have written the word, “Northern Voice” and have used an image from the conference.
5. The next step is to select the text. We can do that by hitting Ctrl and selecting the type layer. Now the key to this is to hit Ctrl and select the actual box with the T in it, in the layer panel. This will gives us the highlighted outline seen below.
6. Now hear comes the fun part. Select the image layer while the text remains selecting with the racing ants. Then hit Ctrl and J - this commands actually inverts the selection, copies the image layer and deletes the unwanted image. But, don’t worry about that - Ctrl+ J is the easy way. Here is your result.
Good luck with your project and I hope this helps. If you have any questions with this tutorial, please let me know by sending me an email or by leaving a comment. I will be sure to help you as much as I can.
Upcoming and Article to share.
Posted on March 22, 2008
Filed Under Random Thoughts | Leave a Comment
First I just finished an article over at Xemion.com. I also blog over there on some advanced design issues. And I thought I should share it with my own blog readers as well.
View the article here: http://www.xemion.com/blog/information-architecture-101-64.html
Also, in the upcoming couple of weeks, I hope to have a couple of more design tutorials. If anyone has anything they would like to see, please leave comment.
Links to share.
Posted on March 20, 2008
Filed Under Random Thoughts | Leave a Comment
Over the past week I have come across some interesting links, and I thought I would share.
An interesting article by Dosh Dosh on what tools you need to be a top digger.
An article on how to make article marketing work.
An online reputation management tool. - I am going to take it for a test drive!
Firefox extension that helps with displaying photos.
Totally free and open source software for Windows
That’ s if for this week. Hope you enjoy these as much as I did.
Beginners guide to things you can do today to jump into the social media sphere
Posted on March 16, 2008
Filed Under Social Media Marketing | Leave a Comment
Everyone seems to be jumping on social media bandwagon these days. So why not keep up with the Jones’?
Here are some things, that you can start today or tonight (depending on what time it is).
1.Join a social media site, whether it be – Facebook, Digg, Small Business Brief or another site, take the plunge and create an account. The key is not to start adding and promoting you own business right away. Start by exploring what the website has to offer, and what type of content it has and contribute honestly.
2. Start a blog. Ok now not everyone should start a blog, because if you can’t write or you don’t have the time to blog (Yes, blogging takes time! – don’t kid yourself) But, if you have the extra time and you like to write - a blog is right up your alley. Take the time to write meaningful posts and don’t use it
3. Get your RSS feed on Feedburner. It’s simple, sign up for an account at http://www.feedburner.com/fb/a/home. Then fill out the form to sign your blog up. Not sure why you need a Feedburner burned feed? Well, if you get your feed burned at Feedburner, it makes it easy to subscribe to your feed. At Feedburner, you can keep track of how many subscribers you have, making it easy to track the popularity of your blog.
Content Convergence and Integration 2008 Day 3 Part 1
Posted on March 14, 2008
Filed Under Professional Development | Leave a Comment
Unfortunately due to my work load I was unable to attend day 1 & 2 but, I am here for day three. Day three was given the title, Relationships. And, sticking with that theme was the keynote speaker at 8:00 AM was Micheal Fergusson speaking on Culture, Commerce and Copyright.
During his keynote, Micheal spoke on the topics of who owns content, the extension of copyright laws – that business’s are now asking for, and how users can enhance product documentation by being able to contribute and how product companies can benefit from having users enhance product documentation.
One of his best points was the web is not a bunch of tubes is actually a shared space. Users need to understand that we need to share the space and the content. Another thing he said, that hit home was currently big business is trying to copyright culture. For instance, copyrighting Mickey Mouse. Everyone in my generation grew up with Mickey Mouse on TV and going to Disneyland when I was a kid was a big thing. Therefore Mickey Mouse is part of our culture and you shouldn’t be able to copyright our culture.
The second session I attended was “Getting to YES!: Think and Talk like a CIO” with Mary Laplante. Mary was very a knowledgeable speaker. She covered issues such as what was most important to Board of Directors, and how to be creative and create a business case based on knowing the result would be have to be 1 of 3 end results: increase in revenue, increase in productivity and satisfying customers.
The third session I attended was “Exposing your content to the semantic web” with Djun Kim of Raincity Studios. Kim’s session was a little high level at first, while exploring exactly what semantic web was. I believe everyone but one person was unsure of what exactly it was and by the end of the hour session, I think everyone had a grasp – maybe not a full understanding – on exactly what semantic web. If you are unsure, check out Wikipedia’s definition. http://en.wikipedia.org/wiki/Semantic_Web
The only think I think missed on was how we could use semantic web in our business life, we did touch on how it is currently used but we missed on how we could start implementing and advancing it ourselves.
Content Convergance & Integration 2008
Posted on March 13, 2008
Filed Under Random Thoughts | Leave a Comment
Tomorrow bright and early I will heading to Content Convergance & Integration 2008 a conference located at the Sheraton Vancouver Wall Center.
Orginallly I thought the conference, might be of less than great quality because of one the speakers whom was peaking on Wednesday but when I say that Darren Barefoot, was to speaking - I figured it couldn’t be that bad.
Tomorrow is the first day I will be able to attend and the last day of conference. Time will tell if it’s any good or not.
Linked In - Is it for me?
Posted on March 11, 2008
Filed Under General Marketing, Professional Development | Leave a Comment
Originally I starting writing this post a few weeks ago, in review of the Linked In website and how it can be used as a marketing tool for small business owners. Funny enough I had forgot all about it.
Then today I was reading an excellent article over on Computer World about which site is better Facebook or Linkedin. Now of course I have a preference. So, I thought I could begin with a bit of background on Linkedin and then discuss what advantages it has over Facebook.
Linkedin background
Linkedin was launched in 2003 and has remained stable since then. It also has been improving during that time. The idea behind Linkedin was place where people could keep track and use their networks to their advantage.
The difference between Linkedin in Facebook mainly stands with their target audience and the third party apps. Linkedin has been targeting professional adults. While on the other hand Facebook started as a college only networking site. The other difference is the third party apps. The apps are a way for Facebook to keep users on their website. Facebook uses a closed method of social networking as they have not been open to allowing people off their website. Linkedin does not allow third party applications to be developed. To me this is a definitely a plus. I am not a fan of all those annoying things you have to add and remove from your profile.
Linked in allows you to get in, add contacts, keep track of them and see who else your close network knows. I find this specifically useful, if I am interested in speaking with someone, who I don’t directly know. This way, can easily ask one of my contacts. It doesn’t seem so awkward as the entire purpose of Linkedin is to network with other professionals in your extended network.
Alright, enough enough - let’s get to the nitty gritty. How can Linkedin help you.
1.Linkedin has a job search function, which includes the jobs written by other people in your network. The job listing quality of course would depend on the size of your network. So, if your looking for work or a new project - Linkedin is making it easy for you.
2. Likedin makes it easy to find for you to contact friends of friends, with their Inmail program. This would be ideal, if you were looking for a contractor or someone with specific talent to help you or your company with ssomething. With Linkedin, it’s easy to see other people’s work history, what type of projects they are looking for and see what other people think of them. It’s just like a pre-screening process.
If the following doesn’t make you want to sign up for an account, head over to Facebook and hang with your friends. If your into some serious networking tools at your finger tips, jump over to Linkedin and add me as your first friend.
What type of designer are you?
Posted on March 5, 2008
Filed Under Design, Professional Development | Leave a Comment
An introduction:
I wrote this article after having a conversation with Shannon Yelland of Mystic Marketing at the Northern Voice conference about how we started out as designers in this industry and had moved on to other areas and how currently we weren’t sure what to put on our business cards. Because we weren’t sure what exactly we called as we have alot of different experience in different areas.
What type of designer are you?
If you’re a designer and you’re like me, you might be wondering what type of designer you are. With all the terms like: experience designer, interaction designer, interface designer and graphic designer floating around out there you could be a little confused. The good news, you’re not alone.
Employers and companies like to put titles on positions, assign duties and pre-requisites for those positions and this is where the confusion starts. Many professions actually overlap and nowadays we are required to perform multiple disciplines within our roles.
To find out what type of designer you are, let’s first define the common titles given to us in the design industry.
Graphic Designer
A graphic designer is commonly defined as a designer, which is responsible for the graphic elements on a website which would include logos, images and buttons. A graphic designer would be responsible for all aspects of visual communication to the visitor.
Interaction Designer
An interaction designer is usually more concerned with how the user interacts and behaves with the website and of course how to website reacts back. They would mainly be concerned with the interactions with the user.
Front end designer
A front end designer usually is responsible for the graphic design, any HTML, XHTML and CSS coding. Front end designers are quite common and are tasked with many static websites. Once the design requires some database interaction or large functionality it is usually passed off to a developer.
Experience designer
Experience designers focus on the overall holistic experience the user would have with the website or application. Experience design encompasses and overlaps the disciplines of information architecture, graphic design, usability and interaction design.
Now that we have outlined what the titles everyone else is using are, did you notice that your skills probably fall into multiple categories? Chances are they did, mine do. Well the reason for that is because we are now required to have knowledge in multiple areas, which in turn make us more valuable as team members.
Currently designers are becoming more technical and more involved in the design process as opposed to being handed the wireframes and requirements documents and being asked to pretty it up. What does that mean for you? It means you need to step up your game and get more involved in the entire design process. It does not mean however that graphic designers and experience designers are only going to be doing what they do best. It means that designers are going to be working in larger more specialized teams to ensure maximum success of the project. For a designer, working in a large team helps if you have enough knowledge of the other areas to understand the other people on your team.
FREE IMAGES! What? No way…
Posted on March 2, 2008
Filed Under Design | Leave a Comment
Yes free images for your project. As a designer, we are always searching for good photos to use in our projects. Let’s admit it - good images are hard to find at the best of times and good free images are even harder find.
I have compiled a list of sites and explained them below that I use to source my images for all my projects.
Let’s start with the obvious.
1. Flickr.
But we want free right? So we want creative commons. Not sure what creative commons is?
Creative commons is a type of licensing a photographer gives to his/her photos. There are different types of creative commons licensing and they are as defined by flikr
“
Attribution means:
You let others copy, distribute, display, and perform your copyrighted work - and derivative works based upon it - but only if they give you credit.
Noncommercial means:
You let others copy, distribute, display, and perform your work - and derivative works based upon it - but for noncommercial purposes only.
No Derivative Works means:
You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.
Share Alike means:
You allow others to distribute derivative works only under a license identical to the license that governs your work. “
Ok we now know what creative commons is and that flickr offers these types of photos but you’re probably wondering how to get them, easily….
BlueMoutains.net made this very easy for us. Simply visit: http://flickrcc.bluemountains.net/ put in the term you would like to search for. If you are planning on editing the image or use it for commercial purposes, make sure to check the appropriate box before searching.
2. Morgue File
Visit http://www.morguefile.com/ it contains high resolution free photos for both personal and commercial use. It is not required by is appreciated if you credit the photographer.
3. Yotophoto.com
Yotophoto.com is a website that acts like a search engine, it actually indexes creative commons licensed photos from various sources.
I hope this list helps you to find more images for your projects and I know they have helped me.