Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Anton Voltchok
Anton Voltchok
2,016 Points

Anyway to lock in a logo floated above a div box when using percentages/em ?

I'm designing a website starting mobile first, so anyone who tries to play with this, please make the browser smaller to 250-400px or just use Chrom Dev tools and select an iphone 3/4 view.

Anyway I'm trying to make a custom rectangle area with a quote in it, and a circle PNG logo that is positioned at the top, halfway inside the rectangle div and halfway outside of the div. Here is a picture to show you what I mean:

http://i.imgur.com/81yeMW7.jpg

Now I got it to work so far the way I want it to, however as you expand the browser sideways, things quickly go sour and the text falls outside the yellow box, and the logo starts to slowly come down further and further back inside the div.

Is there any way I can lock everything in the way it is now so that it scales all together as a whole based of left and right margins?

I don't mind doing extra media queries but at this rate, I'm going to have 20 of them, there must be a better way, can anyone help??? (Thank You!)

<div class="quote_container">
  <div class="q_block"> 
     <div class="q_thumb"><img src="img/LogoThumb.png"></div>
     <blockquote>"you never know what will happen"</blockquote>
  </div>
</div>  

.quote_container {
    background-color: #FFDAA7;
    margin: 0 13% -6%; 
}
.q_block {
    background-color: #FFDAA7;
    text-align: center;
    max-height: 8em;
    margin-bottom: 5%;
}
.q_thumb {
    position: absolute;
    margin: 10% 38% 0;
    top: -2.1em;
    display: block;
    position: relative;
}
.q_block blockquote {
    font-size: 1.7em;
    padding: 0 7%;
    top: -1em;
    position: relative;
}

2 Answers

Nick Ocampo
Nick Ocampo
15,661 Points

There are different ways of doing this, but I think the easiest is using the CSS transform property. You basically just set your logo to translate half of the size of itself upward with CSS, like this:

.logo {
tranform: translatey(-50%);
}

Here is a plnk where you can see how I did it.

Anton Voltchok
Anton Voltchok
2,016 Points

You're the man, can't believe I didn't think of the transform property, time to erase all that garbage code :) Thanks again!!

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

The only problem with using transform property is that it won't work in some older browsers. It's a dilemma, do we once again make people upgrade their browsers or do we continue to cater to them?

Anton Voltchok
Anton Voltchok
2,016 Points

Hi Julie,

Here is the link from Can I Use: http://caniuse.com/#feat=transforms2d

Looks like everything is supported besides internet explorer 8. As far as the old IE, it looks to be at about 3% of total global browsers.

I assume the majority of that 3% in the US is likely on government computers which have restrictions on operating system upgrades. However if the target audience of your site is somewhat narrow maybe it becomes less of an issue?

I'd love to cater to old IE but I was pulling my hair out with a sensible way to code it, until Nick (thank you) suggested transform. What would you suggest for old IE Julie?

Nick Ocampo
Nick Ocampo
15,661 Points

Yup, the ol' browser support dilemma. I agree with your thinking Anton. 2d transforms are generally very well supported, and it seems like the way you're using it is for completely cosmetic purposes. So if someone is on an old browser, they'll still be able to use the site normally, they'll just have that one thing slightly off. Honestly, if you're using IE8 or lower, you're probably used to having a LOT of things slightly off.

But there's always a work around for everything on the web, so just to go along with the problem, as long as you know the height of your shape, you could also apply a negative margin-top value of half the height. Like so.