|CSS Transparent Box|
Hi.. hoping this will be a simple fix.
The background image and transparent box are lined up as I like them to be. However, I am trying to get the text inside the box to be centered in the middle of the transparent box. Right now it is centered from left to right (horizontal) but at the top of the transparent box. I would like it to be in the middle of the box from top to bottom.
Here is the code as it stands now. This is all inline CSS
<DIV align="center"> <div style="width:600px; height:150px; background:url(example.net/backgrounds/on-your-lot.jpg)">
<p style="width:610px;height: 130px; border:1px solid padding:5px; font-weight:bold; position:relative; top:-152px; left:-05px; color:black; background:white; filter:alpha(opacity=25); opacity:.25; text-align:center; font-size: 2.2em; letter-spacing:.25em; font-style:italic; font-weight: bolder; font-family: times new roman;line-height: 30px;">TEXT TEXT TEXT</p>
[edited by: SuzyUK at 9:15 am (utc) on Sep. 6, 2008]
[edit reason] reformatted to fix horizontal scroll [/edit]
drop <DIV align="center">
and in the code below, what we're doing is positioning the text halfway-down the div with the background, and then pulling it back up by using a negative top margin, approx half the height of the text: you'll have to experiment to get the margin that looks best in the most fonts/browsers. Good luck..
<div style="width:600px;height:150px;background:url(example.com/backgrounds/on-your-lot.jpg) no-repeat; text-align:center;">
<span style="position:relative; top:50%; margin-top:-1em">TEXT TEXT</span>
[edited by: SuzyUK at 9:17 am (utc) on Sep. 6, 2008]
[edit reason] examplified image URI [/edit]
Thank you for replying.
I tried this and not working.
If you want to tinker with a box it can be found at mandarindesign (not sure if I can say this)
The 1st <div> relates to the background picture and it is positioned and acting fine. No changes needed there.
The 2nd <div> relates to the box with is opaque. The code currently has the opaque box sitting exactly on top of the 1st box. Once we add measurements different than what is already there the opaque box moves around where we don't want it.
The trick is figuring out how to move around the text within the opaque box without moving the opaque box.
If you text only takes up one line, set the line-height in the <div> to the same height as the container it is in. If it takes more than one line, adjust the line-height down. You will probably have to play with it a little to get it exactly in the middle. And an FYI - zero out any padding settings in the <div> - it makes it a little easier.
You know.. being new, this css stuff is a bit like trudging thru thick mud or swamps. So, I took a break and came back and re-read your statements and .... it works! setting the line-height to the height of the container.
I assume what happens (trying to be technical) is the container
begins in the middle and goes up 50% and goes down 50% so when we adjust the line at the same as container.. it also begins in the middle and 50% of the height goes up and 50% goes down..
But, the more I think of it that does not make sense either.. I really don't understand "why" it worked..
If my container was 100px and my line-height 50px the line is closer to the top of the box. It seems the lower the number the higher the placement of the text in the box.. If I set my number at 180px than the line begins to move closer to the bottom of the box..
So, an interesting lesson but I do not understand the logic of it.
If anyone wants to chime in that would be great.
On Line Height
Since you seem interested to understand it a bit better, I'll explain how line-height and their containers work. It won't be too technical - but it's how I understand it.
As you know, the line-height is the height for a line, obviously. The line-height will also expand to fit whatever you put into it. When a line exceeds the width of the container, it will typically create a new line in the container underneath the previous one - inheriting it's line-height and other settings. If the content is so long that it can't be broken up to a width less than the container, the container is expanded up to that lines width.
Vertically-align is a method that can get a little counter-intuitive in all this. When we use it we typically want it to center the text in the container. Rather - vertical-align allows us to center text according to the line-height. Unless the container has a static height and the text can all fit on one line, trying to set it up so that the line-height = container height doesn't work. The lines will continue to be added on from the top regardless of the setting of this property.
There are other properties which come into play as well. The overflow property can be used to control how lines are displayed. overflow:show is the default. overflow:hidden will hide any text that exceeds the dimensions of the container. overflow: scroll will put scroll bars on the container so that it doesn't expand in size (though it may expand slightly in some browsers for the bars themselves). overflow: auto will only put scroll bars on when needed. There are some cross-browser issues with this, but I've been using it recently and its worked ok for my purposes.
There are plenty of other properties to play with too, like indentation and what-not. Now, if your looking to center your inline content, no matter the height of the container - I have developed a technique to accomplish it. See the link in my last post - its very simple.
|So, an interesting lesson but I do not understand the logic of it. |
Line height is simply the distance a line is from the bottom of the "line" above it to the top of the "line" below it. Since text aligns in the middle of the line height, regardless the height of the text, that is why it works. In other words, whether your text has a height of 16px or 32px, they will both be in the middle of the line height of 100px as the horizontal center of line height is the horizontal center of the font height. In the case of 100px line height and using the two font heights above, there are 34px above the 16px font (50 - 16) and 18px above the 32px font height (50 - 32).
Using that logic, if you have two lines in a 100px high container and want them in the middle, the line height would be 50px (100px / 2). Make sense?
Well, doing it with 2+ lines doesn't work normally, because then you end up with a huge space between each line of text. There maybe some cases where this is the desired result - but it would be a very special case.
The alternative to huge spaces is to use huge font. Again - for special cases. My image solution is the best alternative to using tables - that I've seen.