treehouse : what would you like to learn today?
Web Design Web Development iOS Development

David_Leitch

  • Page Border with Pseudo Elements

    Oh, you champion. Thanks for the help :)
    Comment by David_Leitch December 2012 permalink
  • Overflow Problems

    Because you've floated your sidebar, the container is only growing to the height of main content. You just need to add a clearfix to the container element and the container will grow to the height of the sidebar and the margin-bottom will be ap…
    Comment by David_Leitch December 2012 permalink
  • How to to use this 3D animation?

    Heyo, happy to help. Have had a bit more of a play with it on my CodePen and a couple of things came to mind: You've declared z-index on a couple of other elements, so maybe have a look at the layering of your elements. I've declared z-in…
    Comment by David_Leitch December 2012 permalink
  • How to to use this 3D animation?

    Sorry to double post, but I thought you might also be interested in this: So, on the page that you linked, there was an example of a box that flipped on hover. It said that could be achieved in CSS, without any Javascript, but didn't actually …
    Comment by David_Leitch December 2012 permalink
  • Equidistant List Item spacing

    So this probably isn't the final answer, but it might help along the way. My CodePen is here: I've found that adding padding: 0; to the container ul will take away the space to the left. This is because in a normal list, there is padding …
    Comment by David_Leitch December 2012 permalink
  • Applying background image and css to the child elements of list

    I've worked up something that you could use, which uses only pseudo elements to create the triangle indicator. I've used the pseudo-element of the parent menu anchor to create the triangle, but it would be easy enough to use the first chil…
    Comment by David_Leitch December 2012 permalink
  • Tweak Float center to have a top offset

    Hey, I've put up a CodePen to help you. Basically, to make the image and text line up, you either have to position the image absolutely: .center-float{ position: absolute; top: 0; left: 50%; margin-left: -150px; /* HALF OF IMAGE WIDTH…
    Comment by David_Leitch December 2012 permalink
  • How to to use this 3D animation?

    Hey @JosiahB I've done a CodePen that will help you get started. Basically, all I've done is taken the original HTML/CSS/Javascript from the example and stripped out everything that wasn't essential to show you how it's done. If…
    Comment by David_Leitch December 2012 permalink
  • Logo Overlay - Z INDEX - Photography Page - SOLVED.

    I will just note that instead of positioning the logo from the top as Steven has done, I would position it from the bottom, as I did in my version. By doing this, it will stay in the correct position, even if you change the dimensions of the photo/c…
    Comment by David_Leitch December 2012 permalink
  • Overlay image on hover?

    I was having a play around with @Watson90 's solution to the image on hover and thought it may be of value. In my version, you don't need to explicitly set the image/element height in the stylesheet, which may make it easier to reuse in ot…
    Comment by David_Leitch December 2012 permalink
  • Personal Website Critique

    Looks good, but a couple of things spring to mind: I would make a clearer call to action, so a large Contact Me button, or your email/phone number in a large font-size. I would also have your full name somewhere on the page. I think you could have …
    Comment by David_Leitch December 2012 permalink
  • Help with a layout

    According to this, it's just IE7 and IE8 that don't support it. With them having around 10% market share, they're still work considering in my opinion, but with that said, it also depends on what your users are using. Boy, it'll…
    Comment by David_Leitch December 2012 permalink
  • New Site Feedback Please

    Echoing what everyone's already said: I think it looks great :) I particularly like the colour scheme. Just one thing, though. It might just be the internet connection I'm on, but the Portfolio page, the images took quite a while to load.…
    Comment by David_Leitch December 2012 permalink
  • Re-designing a logo/website for a client

    I will have to look into creating vector images as I've never done that before. Wouldn't that have an impact on file size even when it is scaled down say for the website? Once you've made the vector in Illustrator, it's easy…
    Comment by David_Leitch December 2012 permalink
  • Re-designing a logo/website for a client

    I think I could link to a dozen articles with same key point: simplicity is paramount. The logo needs to be able to be used in every type of medium, so the simpler it is, the easier it is for it to be used in different contexts. For this reason, it …
    Comment by David_Leitch December 2012 permalink
  • Using IDs in CSS selectors?

    The only reason I can think of to use id over class is when you want to use :target, with the uses being shown by Chris here. To be honest, though, I've only ever used :target once.
    Comment by David_Leitch December 2012 permalink
  • Rounded corners not working in Chrome

    I'm but a poor uni student. Maybe Santa will drop it down the chimney for me. To be honest, I just haven't had the energy to upgrade and if it's anything like iTunes 11, I'm not going to run towards it hehe
    Comment by David_Leitch December 2012 permalink
  • Rounded corners not working in Chrome

    Yeah, I thought it must be a bug if it was still not working with all of those prefixes. Ah well, at least it's not essential functionality. By the way, I'm using Chrome 23.0.1271.101 on OSX 10.7.5 Good idea, @joshuanhibbert
    Comment by David_Leitch December 2012 permalink
  • Rounded corners not working in Chrome

    That's strange, I still can't get it to work, even when I put every prefix under the sun on them. Any chance you could share the code you used? Here's what I was experimenting with.
    Comment by David_Leitch December 2012 permalink
  • background images not working in Chrome

    Heyo, There's a very small typo in your CSS. On line 1891, there should be another curly brace to finish off the media query targeting browsers > 600px wide. That's interfering with the next selector, which is controlling the body back…
    Comment by David_Leitch December 2012 permalink
  • I'll give you a cookie if you can tell me what's wrong

    Did a bit of research and found another solution for you that seems to be working in all of the browsers I'm using. I can't take any of the credit, but I will take all of the cookies :D Solution found here. Codepen example with your data…
    Comment by David_Leitch December 2012 permalink
  • I'll give you a cookie if you can tell me what's wrong

    It's not working correctly for me; it just jumps to the start of the relevant part of the drop down list, but does not filter out the irrelevant cities. I'm using Safari 6.0. Also does not work on Chrome 23.0.1271.101. Does work on Firefox…
    Comment by David_Leitch December 2012 permalink
  • Responsive Layout Troubles

    Hey, I had a look at how WebDesignerWall.com pulled it off and this is as close as I could get. Hope it helps :)
    Comment by David_Leitch December 2012 permalink
  • Responsive Layout Troubles

    Following on from what @ChrisP has done, you could leave out the percentages if you wanted the sidebar to stay the exact same width, regardless of the width of the browser (I think that's what you're after from your desc). I've put s…
    Comment by David_Leitch December 2012 permalink
  • Responsive layouts and grid systems headache

    If the design does mandate that you need to hide content, perhaps you could label that element with a class of 'no-phone' or 'no-tablet', while keeping the class of 'grid-6'. I've dummied it up here to show what I …
    Comment by David_Leitch December 2012 permalink
  • Logo Overlay - Z INDEX - Photography Page - SOLVED.

    Hi there, I've just had a play around with it on CodePen, using absolute positioning to get it in the right spot, while maintaining responsiveness. Not sure if it's exactly what you're after but could serve as a starting point :) Pe…
    Comment by David_Leitch December 2012 permalink
  • Centered content with left and right image border

    Perhaps you could do something a little more simple like this?
    Comment by David_Leitch December 2012 permalink
  • Portfolio re-design feedback

    Is it something like this that you're seeing, @Watson90? That happens to me when I resize my browser to a narrow width and then scroll to the right. The way I usually avoid this is to set the #wrapper (or whatever is holding the background imag…
    Comment by David_Leitch December 2012 permalink
  • link styling troubles

    The problem is that later on in your style sheet, you've redefined a:hover, when you meant to redefine one particular instance of it (on line 840): #secondary_nav a:link, a:visited, a:hover, a:active{ color: #093; font-family:Verdana, Gene…
    Comment by David_Leitch December 2012 permalink
  • Portfolio re-design feedback

    It's really awesome, the only constructive feedback I have is on pretty minor things, but hope it helps out: Personally, I would make the call to action bigger and take away the label, as it repeats itself. Also, the hover effect makes it look…
    Comment by David_Leitch December 2012 permalink