I have problem with the logo position. the logo is 20px from right (margin-right:20px) and I have a menu with margin-left:auto margin-right:auto. the problem is when I change the resolution of the page, the logo is goes left and the menu is going normal. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>example</title> </head> <body> <div class="logo"> <a href="#">example.com</a> </div> <div class="menu"> <ul class="ul"> <li><a href="#">example</a></li> <li><a href="#">example</a></li> <li><a href="#">example</a></li> <li><a href="#">example</a></li> <li"><a href="#">example</a></li> <li><a href="#">example</a></li> <li><a href="#">example</a></li> </ul> </div> </body> </html> HTML: * {margin:0; padding:0;} body {font-family:Arial,Helvetica,sans-serif; } a {text-decoration:none;} .logo {background:url("images/logo.png") no-repeat; width:222px; height:111px; margin-right:22px;} .logo a {color:black; font-size:11px; padding-top:20px;} .menu {background:url("images/menu.png") no-repeat; width:806px; height:36px; margin-left:auto; margin-right:auto;} Code (markup):
Hey there I'm new to CSS so take my advice for what it's worth but it sounds like you need to use an absolute position for your logo. That should hold it in place even if resolution is changing. .logo { background: url("images/logo.png") no-repeat; position: absolute; width:222px; height:111px; margin-right:22px;} Code (markup): Like I said I'm not sure if it'll work, but it's worth a try. Also, look at your markup there are a few syntax errors. Good luck
<ul class="ul"> doesn't really make sense. If you wan't to assign a style to a ul, just use in css ul {} instead of .ul {}