GPSJane Posted December 22, 2009 Share Posted December 22, 2009 I have an unordered list, all floating - ie. a horizontal nav bar.How do I get it to vertically align?No matter what I do it stays at the top of the block (defined by DIV). The links are the only thing in the block (and should stay that way). I have tried vertically aligning every level from A to LI to UL. Link to comment Share on other sites More sharing options...
thescientist Posted December 22, 2009 Share Posted December 22, 2009 you mean for a vertical list? Try floating them left. Link to comment Share on other sites More sharing options...
GPSJane Posted December 22, 2009 Author Share Posted December 22, 2009 you mean for a vertical list? Try floating them left.Er, no. It's a horizontal list.I just thought about something though; the links are displayed in blocks which means that vertically aligning them aligns the block not the text. I am guessing I need to make another id for the text itself. Sigh. Is there a short way around this or do I need to add yet another id to everything? Link to comment Share on other sites More sharing options...
thescientist Posted December 22, 2009 Share Posted December 22, 2009 sorry, you weren't very clear. Are you trying to vertically align the text in the list?text-align didn't work? What's your code so far? Link to comment Share on other sites More sharing options...
GPSJane Posted December 22, 2009 Author Share Posted December 22, 2009 Ok, the html:<DIV id="nav_bar_middle"> <UL class="nav_list"> <LI class="nav_item"><A class="nav" href="_blank"><DIV id="middle">Home</DIV></A></LI> <LI class="nav_item"><A class="nav" href="_blank"><DIV id="middle">Invitation</DIV></A></LI> <LI class="nav_item"><A class="nav" href="_blank"><DIV id="middle">Map & Directions</DIV></A></LI> </UL></DIV>And the external CSS:#nav_bar_middle {height : 32px;background : #FFFF85;}UL.nav_list {list-style-type : none;margin : 0;padding : 0;vertical-align : middle;}LI.nav_item {float : left;vertical-align : middle;}A.nav {display : block;height : 33px;color : black;margin : 0px 5px 0px 5px;padding : 0px 5px 0px 5px;width : auto;vertical-align : middle;}A:active, A:hover {background : #FFDD3F;}#middle {vertical-align : middle;} Link to comment Share on other sites More sharing options...
GPSJane Posted December 22, 2009 Author Share Posted December 22, 2009 The "middle" id inside the A tags was just to try it out and it doesn't work. Frustrating. Link to comment Share on other sites More sharing options...
GPSJane Posted December 22, 2009 Author Share Posted December 22, 2009 sorry, you weren't very clear. Are you trying to vertically align the text in the list?text-align didn't work? What's your code so far?Oh and yes, I need to vertically align the text. Link to comment Share on other sites More sharing options...
thescientist Posted December 23, 2009 Share Posted December 23, 2009 woops...sorry its been a long day. one second. Link to comment Share on other sites More sharing options...
thescientist Posted December 23, 2009 Share Posted December 23, 2009 i got it, try using line-height on the <a>'shttp://phrogz.net/CSS/vertical-align/index.htmlits silly how you forget the simple things sometimes Link to comment Share on other sites More sharing options...
GPSJane Posted December 23, 2009 Author Share Posted December 23, 2009 i got it, try using line-height on the <a>'shttp://phrogz.net/CSS/vertical-align/index.htmlits silly how you forget the simple things sometimes Thanks it works.I am really tired so I am not following that page's explanation on why vertical-align doesn't work. The thing is, as with most work-arounds, the solution isn't exactly what I wanted to achieve. There are 2 things:First if the user changes the font size then the text is no longer vertically aligned. Secondly, the block itself is not aligned so if I change the size of the <A> block then when the user hovers over a link the top half of the parent block changes colour which is not middle aligned to the text. Ie. I would like a smaller block centrally aligned to the DIV block that 'lights up' when I hover. Link to comment Share on other sites More sharing options...
thescientist Posted December 23, 2009 Share Posted December 23, 2009 http://www.cssplay.co.uk/I've learned a lot about making lists from this website. They have very clear examples that you can play around with and see how different values effect the list. It was also a good reference of the theory behind web design, and how something as simple as list can be made into almost all sorts of crazy stuff! All in all, I found it to be a very good learning experience. Plus, its all valid standards compliant code! Link to comment Share on other sites More sharing options...
GPSJane Posted December 23, 2009 Author Share Posted December 23, 2009 Cool, thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.