Zagadka 0 Posted September 6, 2014 Report Share Posted September 6, 2014 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! Quote Link to post Share on other sites
niche 133 Posted September 6, 2014 Report Share Posted September 6, 2014 what are you using for positioning? I don't see any floats. Quote Link to post Share on other sites
Zagadka 0 Posted September 6, 2014 Author Report Share Posted September 6, 2014 It is attached to .min_eye, which is the first element in the body. Quote Link to post Share on other sites
Zagadka 0 Posted September 12, 2014 Author Report Share Posted September 12, 2014 Hate to bump, but any other ways to deal with the text align? No idea why part of it works as sub and the other part doesn't Quote Link to post Share on other sites
Ingolme 1,019 Posted September 12, 2014 Report Share Posted September 12, 2014 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. Quote Link to post Share on other sites
Zagadka 0 Posted September 13, 2014 Author Report Share Posted September 13, 2014 (edited) 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 Edited September 13, 2014 by Zagadka Quote Link to post Share on other sites
Ingolme 1,019 Posted September 13, 2014 Report Share Posted September 13, 2014 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. Quote Link to post Share on other sites
Zagadka 0 Posted September 13, 2014 Author Report Share Posted September 13, 2014 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. Quote Link to post Share on other sites
dsonesuk 913 Posted September 13, 2014 Report Share Posted September 13, 2014 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.