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] Link to comment https://forums.phpfreaks.com/topic/245882-trouble-floating-div-on-right-marginpadding-not-effecting-links/ 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 Link to comment https://forums.phpfreaks.com/topic/245882-trouble-floating-div-on-right-marginpadding-not-effecting-links/#findComment-1262864 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> Link to comment https://forums.phpfreaks.com/topic/245882-trouble-floating-div-on-right-marginpadding-not-effecting-links/#findComment-1262869 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> Link to comment https://forums.phpfreaks.com/topic/245882-trouble-floating-div-on-right-marginpadding-not-effecting-links/#findComment-1262894 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.