May 17, 201412 yr Hi, I have the following css code:*{ padding:0; margin:0; } body { height:985px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; background-image: url(bk.gif); background-repeat: repeat-x; } #container { width: 607px; height:987px; margin:auto; } #header { width: 607px; height: 985px; background-image: url(Untitled-1.png); position:relative; margin-top:+1px; border:0; } #mainpage { width: 140px; height: 130px; background-image: url(mainpagegreen.png); position:relative; margin-left:170px; margin-top:20px; background-color:transparent; } and the following html code: title>Untitled Document</title> </head> <body> <div id="container"> <div id="header"></div> <div id="mainpage"></div> </div> </body> </html> I want to align the buttons like in the image attached.Can someone help me with html and css code to align the buttons? I do not know where is the mistake, as my main page button does not appear in the right place.
May 17, 201412 yr Hi alisiaro. There are quite a few problems with your code leading to you not achieving the desired effect. I've written up a very quick solution to what you asked for in the screenshot you attached, at least with the header and the buttons (nothing past there though): <html> <head> <title>Untitled Document</title> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; } #container { border: 1px solid #000; width: 607px; height:987px; padding: 10px 20px 10px 20px; margin: 20px auto 20px auto; } #header { border-radius: 10px; float: left; width: 100%; height: 150px; background: red; } #buttons_row { float: left; margin: 10px 0px 0px 0px; text-align: center; width: 100%; } .button{ background: grey; display: inline-block height: 130px; width: 130px; } </style> </head> <body> <div id="container"> <div id="header">header</div> <div id="buttons_row"> <div class="button">Main page</div> <div class="button">Our menu</div> <div class="button">Services</div> <div class="button">Contacts</div> </div> </div> </body> </html> Here are a few things to learn from this: - I've kept the height property in your #container, but it's not really necessary - the content will determine the height, not the container. I'd remove it. - The CSS float (e.g. float: left;) is the best way to stack elements underneath each other. - By applying 'text-align: center' to the #buttons_row, and then 'display: inline-block' to the .button divs, you can centre each button inside the parent. Just to save you time figuring this out. - I would study HTML5, so you don't use <div>'s for all your elements. I've retained your HTML code, but research HTML5, so your header becomes <header>, buttons_row becomes a <section> and so forth. There are quite a few more things, but this should set you on the right course. Good luck. Edited May 17, 201412 yr by throzen
Create an account or sign in to comment