Jump to content
Zagadka

Trying to align text to div bottom

Recommended Posts

I am trying to adapt my CSS to be correct, so doing a little revision - but I have a problem where I can't get the vertical-align to work.

 

For reference to what I'm failing to do and what I'm aiming to do:

 

New page - http://zagadka.net/test.blah.php

 

Old page - http://zagadka.net/test2.blah.php

 

I've got it well within acceptable deviation (and more responsible use of CSS) - except for the text align of the title on the upper right. On the old page it was absolute, and so was the line, so the "mmxiv з а г а д к а" bit lined up perfectly. I got the mmxiv lined up with vertical-algin: sub;, but the title text just refuses to budge down, even using bottom and negative %. I figure that I am confusing or leaving out something regarding alignment.

 

The relevant code:

.min_eye{	float: left;}.min_title{	padding-right: 10px;	border-bottom: 2px solid #152434;	height: 56px;}.year{	color: #ADADAD;	font-size: 24px;	vertical-align: bottom;}.zagadka{	font-size: 48px;	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;	vertical-align: text-bottom;}
<div class="min_eye">	<img src="http://zagadka.net/images/subpage_upper_left_eye.png" alt="I'm watching you"></div><div class="min_title" align="right">	<font class="year">mmxiv</font>   <a href="http://zagadka.net/index.php"><font class="zagadka">з а г а д к а</font></a></div>

So how do I get the class .zagadka to align to the bottom as it does in the old page?

 

Thanks in advance!

Share this post


Link to post
Share on other sites

what are you using for positioning? I don't see any floats.

Share this post


Link to post
Share on other sites

Your new page looks to me better aligned than the old one, unless you actually wanted the large text to be crossing through the line. I'm viewing in Firefox.

Share this post


Link to post
Share on other sites

Well, the D character is supposed to just drop over the line over the menu, the text above the line is supposed to be just a few pixels over it. The "Old" page looks the same on Chrome and FF to me

 

example.jpg

Edited by Zagadka

Share this post


Link to post
Share on other sites

Since you want it to cross the border you're going to have to artificially move it down, vertical-align won't move text outside of its container. You can set position: relative and move it down from the top, for example: top: 5px;

 

You should remove the <font> tags from your document. <font> is no longer part of the HTML specification, so it's not actually HTML. You can put a <span> in its place, since you're only using the class attribute. In some cases (like <font class="zagadka">), you don't even need a <span>, put the class on the <a> element that's surrounding it.

Share this post


Link to post
Share on other sites

I was trying to avoid relative positioning, but I suppose I don't have much choice here - but what is weird is the mmxiv works with sub and Zagadka doesn't.

 

I will follow up on the font tags, thanks.

Share this post


Link to post
Share on other sites

I don't think you require position: relative, try

<div align="right" class="min_title">    <span class="year">mmxiv</span>   <a href="http://zagadka.net/index.php" class="zagadka">з а г а д к а</a></div>

with

.zagadka {    display: inline-block;    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;    font-size: 48px;    margin-top: 9px;}.year {    color: #ADADAD;    display: inline-block;    font-size: 24px;    margin-bottom: 9px;    vertical-align: bottom;}

You are basically turning them into inline block element so you can apply margins, margin-top forces .zagadka down causing overlap, this will drag .year down with it, but counteract this by apply same margin value to the bottom of .year.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...