I’ve recently completed an overhaul of the ‘Macross Hotels’ page. One small feature I wish to elaborate on is the text blocks I used for the hotel names. I wanted a block of color with the text aligned all the way to the bottom right edge, below is a picture of the effect.
You cannot achieve this look with just text-align tags, believe me I’ve tried – but let me know if I’m wrong! The way I built this was pretty easy I think, let’s start with a div for the gray box like so:
CSS:
.gray-box {width: 200px); background-color: #666; height: 45px;}
The code above is just setting the size and color of the box. Next is the CSS for the text:
CSS:
.gray-box-text {color: yellow; font-size: 1.5em; text-align: right; font-family: arial; position: relative; top: 21px; left: 2px;}
Here I’m using relative positioning to position the text within the box. This is why I had to assign a specific height to the box and not let the height just be a variable of the text size/family. Here I’m positioning the text 21px from the top and then an additional 2px from the left (remember it is already aligned over to the right). The ‘top’ and ‘left’ numbers will change depending on the height and width, font family and font size that you’re using.
HTML:
<div class=”gray-box”><div class=”gray-box-text”>TITLE</div></div>
That’s it. You can see the finished product here and here. Note, I used divs for this, you can use other elements like <p> but you may get different results which will force you enter new values for your ‘top’ and ‘left.’