Noskiw Posted July 31, 2014 Share Posted July 31, 2014 I'm currently in the middle of rewriting my website and have run into a little trouble. When floating the unordered list to the right, the span no longer displays inline, despite having the unordered list's display to "inline". Here's an image to show you what I mean: Here's the markup: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>Matthew Noskiw's website</title> <link rel='stylesheet' type='text/css' href='./inc/CSS/styles/default.css' /> <link rel='stylesheet' type='text/css' href='./inc/CSS/static/navigation.css' /> </head> <body> <div id='Container'> <div id='Header'> <div style='float: right'> <ul id='Navigation'> <li id='NavButton' class='active'><a href='./'>Home</a></li> <li id='NavButton'><a href='./about'>About</a></li> <li id='NavButton'><a href='./blog'>Blog</a></li> <li id='NavButton'><a href='./contact'>Contact</a></li> </ul> </div> <span>noskiw.co.uk</span> </div> </div> </body> </html> Specifically, this section: <div id='Container'> <div id='Header'> <div style='float: right'> <ul id='Navigation'> <li id='NavButton' class='active'><a href='./'>Home</a></li> <li id='NavButton'><a href='./about'>About</a></li> <li id='NavButton'><a href='./blog'>Blog</a></li> <li id='NavButton'><a href='./contact'>Contact</a></li> </ul> </div> <span>noskiw.co.uk</span> </div> </div> And here is the CSS: body { font-family: arial; font-size: 14px; color: #000000; } #Container { width: 800px; border: 1px solid #000000; margin: 0 auto; padding: 3px; } #Header { overflow: hidden; border: 1px solid #000000; padding: 5px; } Any help will be appreciated, thanks. Quote Link to comment https://forums.phpfreaks.com/topic/290199-trouble-with-floating-css/ Share on other sites More sharing options...
Noskiw Posted July 31, 2014 Author Share Posted July 31, 2014 Also thought that this may be relevant, the navigation CSS file: #Navigation { display: inline; list-style-type: none; } #NavButton { display: inline-block; width: 70px; margin-left: 3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #NavButton a { text-align: center; display: block; padding: 6px; color: #000000; text-decoration: none; font-weight: bold; } #NavButton a:hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #E8E8EE; } .active { background-color: #1C75D4; } .active a { color: #FFFFFF !important; } .active a:hover { background-color: #1C75D4 !important; } Quote Link to comment https://forums.phpfreaks.com/topic/290199-trouble-with-floating-css/#findComment-1486517 Share on other sites More sharing options...
cyberRobot Posted July 31, 2014 Share Posted July 31, 2014 Sorry, I'm not sure I follow. What would you like to have happen to the <span> tag? Where should it be in relation to the navigation? Quote Link to comment https://forums.phpfreaks.com/topic/290199-trouble-with-floating-css/#findComment-1486525 Share on other sites More sharing options...
Noskiw Posted July 31, 2014 Author Share Posted July 31, 2014 It would like it to be perfectly in line with the unordered list. I know it must be slightly tedious, but I'm unfortunately one of those guys who is bothered by stuff like this. Quote Link to comment https://forums.phpfreaks.com/topic/290199-trouble-with-floating-css/#findComment-1486564 Share on other sites More sharing options...
Solution cyberRobot Posted August 1, 2014 Solution Share Posted August 1, 2014 It would like it to be perfectly in line with the unordered list. I know it must be slightly tedious, but I'm unfortunately one of those guys who is bothered by stuff like this. The address definitely looks more professional when it's centered vertically. You could convert the <span> tag into an inline block and add some margins. #Header span { display: inline-block; margin: 6px; /* <-- same as the padding for #NavButton a */ } 1 Quote Link to comment https://forums.phpfreaks.com/topic/290199-trouble-with-floating-css/#findComment-1486608 Share on other sites More sharing options...
Noskiw Posted August 1, 2014 Author Share Posted August 1, 2014 That's absolutely fantastic mate. Worked a charm. Quote Link to comment https://forums.phpfreaks.com/topic/290199-trouble-with-floating-css/#findComment-1486609 Share on other sites More sharing options...
cyberRobot Posted August 1, 2014 Share Posted August 1, 2014 No problem; glad to help Quote Link to comment https://forums.phpfreaks.com/topic/290199-trouble-with-floating-css/#findComment-1486614 Share on other sites More sharing options...
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.