So I have 2 divs, 1 within another. #outer the outermost div and #frame the div w/in #outer.
With regards to #outer, I've applied a background picture that is to take up the entire browser space.
frame is where the text will go - text will constantly change with different string lengths. However, I only want #frame to occupy the center portion of #outer, so that text does not leak outside (this is because the background picture in #outer has a chalkboard-like figure - I want it to look as though the text is being written onto that chalkboard without text running outside the lines).
I'm supposed to use padding for this right? As in set the padding attribute on #frame right? Or should I adjust the frame's width? How do I center this sucker?! Float? Pad? I'm lost...
HTML:
<div id='outer'>
<div id='frame'>
</div>
</div>
CSS:
#outer {
height: 612px;
background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll;
background-size: 100%;
}
#frame {
text-align: center;
height: 612px;
padding: 50px;
overflow: auto;
font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
font-size: 60px;
color: black;
}
I've been messing with padding and border and margin for the past hour trying to get a grasp on the box model in general. Any quick pointers that anyone can help me accomplish this?
PS It may be difficult to see, cuz this probably isn't fully compatible with your browser settings yet, but you can go to:
http://www.abveaspirations.com
to see what the above code is currently spitting out. As you may be able to see, the especially long strings/text leak outside of the glass. BTW I'm using textualizer plugin, not sure if that changes anything...
This is a little more complicated of an answer than it could be.. This can pretty much be done with padding, but I feel that this way is the most smooth and solid result for what you are doing, and it also works extremely well for a responsive site, so it won't break as you scale your screen size up and down.
Here's the demo of this in action so you can follow along with what I'm saying, and look at the full code at the same time:
Ok so first of all, just to set up your outer div, I basically just set position: relative; on it, everything else is fine. This is just because I'm setting the frame to be position: absolute; and I want it to position relatively to this outer div.
After that, lets look at the changes to the frame...
position: absolute;
top: 10%;
bottom: 20%;
left: 15%;
right: 15%;
These styles serve the purpose of stretching the bounds of the div out to certain points. Notice that there is no set height or width on the frame element anymore, those must be taken out. Basically, these styles say that the top of the div will be 10% from the top of the outer div. The bottom will be 20% from the bottom of the outer div.. and so on. I used percentages instead of pixels, as this will make sure the positioning adapts to whatever width the screen is.
Notice that I set a dotted border on the frame so that you can see where the box is being sized and positioned at all times.
I didn't worry about vertical centering of the text content because I'm fairly certain that your plugin for the text effect handles that. Just let me know if I was wrong on that count, and I can expand on that.
Now, there's another challenge in the fact that once the screen gets to a certain smaller size, the image begins to have a smaller height than the outer container. This probably isn't something you want, so I added a media query:
@media only screen
and (max-width: 1060px) {
#outer {
height: 0;
padding-top: 47.85%;
}
}
What this does is it applies styles only after the screen gets to be a certain width. I choose the max-width based on the point where the image starts to shrink past the edges of the container.
As for the styles that get applied, this is a little trick for maintaining the aspect ratio of a container on re-size. I set the height to 0, and then re-create the height using padding-top. The number that I used (47.85%) is an approximate ratio of the height of the image relative to the width. (The image is about 47.85% as high as it is wide.) This will now begin to scale the whole container down with the screen, to match the image. Because your frame is positioned absolutely, it will stay around for the ride, and maintain it's percentage based position.
One thing I did not do that you might be interested in is setting another media query once the image width starts to get so wide that the bottom gets cut off. At this point you could set the frame bottom to be 0% so that it matches that. (you may also need to periodically update the top property, as the screen gets wider and wider. This is only because you have a set height cutting off the image, making the percentages irrelevant.)
In that example I linked to, try re-sizing that bottom frame's width larger and smaller, and watch how the dotted lines stay right where they should be, and the content inside adjusts. Also notice how the container stays the set height up until the image gets too small, and then everything begins to scale down.
There's only one glaring issue that I can see left, and that is that because all of your text content gets positioned absolutely letter by letter, re-sizing the screen will cause elements to spill out, until a new slide comes in, and the letters are re-positioned based on the new width. That's just something to keep in mind going forwards.