cs.punk Posted August 28, 2011 Share Posted August 28, 2011 I've got a tiny problem. I've validated my HTML, have a valid doctype and using reset.css but I can't seem to work out where I'm going wrong. First of all I'm trying to align the 'rightAlign' div all the way to the right... Secondly, why is the padding not effecting the a.navBar ? I tried setting it as margin but had not difference. Thank you for your help. <body> <div id="navBar"> <a class="navBar" href="/home.php">Home</a> <a class="navBar" href="/home.php">Downloads</a> <div id="rightAlign"> <a class="navBar" href="/home.php">Login</a> <a class="navBar" href="/home.php">Register</a> </div> </div> #navBar{ background:url(topbar.png); background-repeat: repeat-x; height: 25px; width:80%; margin: 0 auto 0 auto; } #navBar #rightAlign { float: right; height: 25px; width:80%; } h1,h2,h3,h4 ,p ,a { font-family: Verdana; } p { font-size: 16px; } h1 { font-size: 20px; } h4 { font-size: 16px; text-align: center; } p.footer { color: #FFFFFF; } a { color: #47AB2E; } a.navBar { padding-left: 5px; padding-top: 80px; font-family: 'Tahoma'; color: #FFFFFF; font-weight: none; text-decoration: none; } a.navBar:hover { font-family: 'Tahoma'; color: #FFFFFF; font-weight: none; text-decoration: underline; } [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
sunfighter Posted August 28, 2011 Share Posted August 28, 2011 Without trying anything -> first look. You have an ID and a class with the same name, "navBar". Change one Quote Link to comment Share on other sites More sharing options...
sunfighter Posted August 28, 2011 Share Posted August 28, 2011 Your div's both had width 80%. Removed them. Is this anything like what you want? <!DOCTYPE html> <!--doctype is HTML5--> <html> <head> <style type="text/css"> a { color: #47AB2E; font-family: Verdana; } .navBar { padding-left: 5px; padding-top: 80px; font-family: 'Tahoma'; //color: #FFFFFF; font-weight: none; text-decoration: none; } #myName{ padding-left: 5px; padding-top: 10px; float:left; height: 25px; } #rightAlign { padding-right: 5px; padding-top: 10px; float: right; height: 25px; } </style> </head> <body> <div style="width:500px;background:url(topbar.png);background-repeat: repeat-x;"> <div id="myName"> <a class="navBar" href="/home.php">Home</a> <a class="navBar" href="/home.php">Downloads</a> </div> <div id="rightAlign"> <a class="navBar" href="/home.php">Login</a> <a class="navBar" href="/home.php">Register</a> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
cs.punk Posted August 28, 2011 Author Share Posted August 28, 2011 That code works thank you xD ! I think I have nailed where it was going wrong, it seems you can't add top padding/margin to a link directly? Like so? Why not though? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8' /> <title>Test</title> <style type='text/css'> a { margin-top: 300px; padding: 200px; font-size: 60px; } </style> </head> <body> <a href="/home.php">Home</a> <a href="/home.php">Downloads</a> </body> </html> Quote Link to comment 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.