Hello Every Body I am new to this forum and i urgently need help in page layout . Actually i am designing a web page and it looks good in browser but when i try to see it in Dreamweaver design mode its alignment and page layout changes its totally different from the browser , i mean what it is showing in browser it is not showing in Dreamweaver . So please anybody can help me to sort out my problem and about me i am totally new to web designing . Here i am attaching an image of my page layout and I just want exactly what it looks in this image . <!-----HTML CODE FOR MY PAGE ------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>my-website</title> <meta name="description" content="Online Portal"> <meta name="author" content="my-website"> <link rel="stylesheet" href="css/style.css"> <!-- For IE 9 --> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <script type="text/javascript" src="script/If_browser_IE.js"></script> </head> <body> <nav> <nav id="nav_center"> <ul> <li><a href="#">Test Link 1</a></li> <li><a href="#">Test Link 2</a></li> <li><a href="#">Test Link 3</a></li> <li><a href="#">Test Link 4</a></li> <li><a href="#">Test Link 5</a></li> </ul> </nav> </nav> <div id="login"> <a href="#">Sign In</a> <span style="margin:0px 8px 0px 8px ; color:#FFF">|</span><a href="#">Sign Up</a> <ul> <li>Shoop Keepers</li> <li>Customers</li> </ul> </div> <footer id="footer"> <span>copyright @ 2013 : wwww.my-website.com</span></p> </footer> <div id="social"> <div id="fb"><a href="#"><img src="images/fbook.png"></a></div> <div id="gplus"><a href="#"><img src="images/gplus.png"></a></div> <div id="tweet"><a href="#"><img src="images/tweet.png"></a></div> </div> </body> </html> Code (markup): <!----- STYLE SHEET OF MY PAGE (CSS) --------> body { background-color: #17aaef; } *{ margin: 0; padding: 0; } nav { width: 100%; height: 30px; background-color: #000; z-index: 1; } #nav_center { width: 900px; margin-left: 20px;; margin-right: auto; } nav ul { list-style: none; } nav a { display: inline; float: left; text-decoration: none; color: #FFF; font-size: 15px; font-family: "Times New Roman", Times, serif; /*font-weight:bold;*/ padding: 6px 50px 8px 18px; } nav a:hover { color: #CCC; } #login { width: 160px; height: 30px; float: right; background-color:#000; margin-right: 10px; border-radius:0px 0px 5px 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; text-align:center; margin-top: -22px; font-size: 16px; font-family: "Times New Roman", Times, serif; line-height:30px; } #login a { color: #FFF; text-decoration:none; text-align:center; } #login a:hover { color:#CCC; } #login ul { width:160px; height:60px; color:#FFF; font-size: 16px; font-family: "Times New Roman", Times, serif; text-decoration:none; list-style:none; border-radius:0px 0px 5px 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } #login ul { position:absolute; visibility:hidden; } #login:hover ul { visibility:visible; } #login ul li:hover { color:#CCC; opacity:0.8; } #login li { border:1px solid #FFF; background-color:#000; } #login li:last-child { border-top:none; } #footer { position:absolute; bottom: 0; width: 100%; height: 32px; background-color:#000; left: 0px; text-align:center; line-height:32px; color:#FFF; } #social { float:left; width:253px; margin:auto; padding:0px; border:1px solid #FFF; margin-top:790px; left:auto; right:auto; } #fb { float:left; margin:10px; } #gplus { float:left; margin:10px; } #tweet { float:left; margin:10px; } Code (markup):
Well, first, I wouldn't really rely on Dreamweaver's display for much. It's a lot better than it used to be, but there are still a lot of things it doesn't handle particularly well. The other thing I would recommend is that you clean up your code to the bare essentials for what you're after. For example, you don't need to nest a nav inside another nav in order to get a 100% width background, since ul is a block level element. You're introducing extraneous code, and that should be avoided whenever possible. Third, some of your CSS is mutually self-contradictory or not doing anything. For example, you have display:inline; and float:left; for your nav a elements. But by the nature of the case, floated items are not inline; if you specify float, you are eliminating that possibility. In addition, you have a z-index specified on nav, but have not specified a position property for nav, so z-index does nothing. (Default position is static, which does not have a z-index value. You have to specify relative, absolute, or fixed for z-index to kick in.) I'm also not sure why you're specifying margin-right:auto; on the nav, since, well... it's going to do that... automatically. Unless of course, you're attempting to center those links (which I would think from the fact you set an ID of #nav_center), but my guess is that's not the case, or you wouldn't have specified 20px for margin-left. The bottom line is: always keep your code clean, and you'll have less troubleshooting to do later.