Zagadka Posted September 6, 2014 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! Link to comment Share on other sites More sharing options...
niche Posted September 6, 2014 Share Posted September 6, 2014 what are you using for positioning? I don't see any floats. Link to comment Share on other sites More sharing options...
Zagadka Posted September 6, 2014 Author Share Posted September 6, 2014 It is attached to .min_eye, which is the first element in the body. Link to comment Share on other sites More sharing options...
Zagadka Posted September 12, 2014 Author 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 12, 2014 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. Link to comment Share on other sites More sharing options...
Zagadka Posted September 13, 2014 Author 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2014 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. Link to comment Share on other sites More sharing options...
Zagadka Posted September 13, 2014 Author 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now