July 4, 201115 yr Hi, With my knowledge of CSS limited I have created a horizontal menu within a nested div, I can't however seem to find a solution to bottom and centre align this menu - alternatively if there is an easier solution to start again I would be very interested? Many thanks <!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>Andy Sutherland - Personal trainer - Edinburgh</title> <style type="text/css"> #wrapper { height: 700px; width: 900px; margin-right: auto; margin-left: auto; margin-top: 100px; } #logo { float: left; width: 350px; height: 170px; border-radius: 20px; background-color: #fff; -moz-box-shadow:0px 4px 5px #12557F; -webkit-box-shadow:0px 4px 5px #12557F; box-shadow:0px 4px 5px #12557F; } #nav_contact { float: right; width: 520px; height: 170px; border-radius: 20px; background-color: rgba(100,149,237, 0.3); -moz-box-shadow:0px 4px 5px #12557F; -webkit-box-shadow:0px 4px 5px #12557F; box-shadow:0px 4px 5px #12557F; } #main_content { float: left; width: 900px; height: 500px; margin-top: 30px; border-radius: 20px; background-color: rgba(100,149,237, 0.3); -moz-box-shadow:0px 4px 5px #12557F; -webkit-box-shadow:0px 4px 5px #12557F; box-shadow:0px 4px 5px #12557F; } body { background-image: url(blue-circles.jpg); } #nav_contact ul { list-style-type: none; font-family: Arial, Helvetica, sans-serif; font-size:16px; } #nav_contact ul li a { color: #FFF;; text-decoration: none; float: left; padding-right: 10px; padding-left: 10px; line-height: 25px; margin-right: auto; } #main_content #info { height: 480px; width: 330px; border-right-style: dashed; border-right-width: 1px; border-right-color: #1D85C6; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; } #nav_contact #contact { float: right; width: 220px; border-left-width: 1px; border-left-color: #1D85C6; height: 170px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; padding-top: 0px; } #nav { float: left; width: 280px; height: 170px; border-right-width: 1px; border-right-style: dashed; border-right-color: #1D85C6; } h1 { font-size: 14px; color: #FFF; } h1,h2,h3,h4,h5,h6 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } </style> </head> <body> <div id="wrapper"> <div id="logo"></div> <div id="nav_contact"> <div id="nav"> <ul> <li><a href="#">Home<a/></a></li> <li><a href="#">About<a/></a></li> <li><a href="#">Testimonials<a/></a></li> </ul></div> <div id="contact"> <h1>Contact Andy</h1> </div> </div> <div id="main_content"> <div id="info"></div> </div> </div> </body> </html>
July 4, 201115 yr You could use the margin rule you would have to give your ul a width and then margin auto would centre it *{margin:0;padding:0;}/*basic reset*/ #nav_contact ul { font-family: Arial,Helvetica,sans-serif; font-size: 16px; list-style-type: none; margin: 130px auto 0;/*130px top margin + auto left & right to center*/ width: 232px;/*width needed for auto margin to work*/ } Hope I've understood your problem correctly Edited July 4, 201115 yr by mteam
July 6, 201115 yr Use absolute positioning. On the div that contains the menu, add a position property of relative: position:relative; Then on the menu ul, add a display property of absolute: position:absolute; Then, in the same ul css entry, use top: left: right: or bottom: to position it. for example: #nav_contact ul { position:absolute; top:100px; left:5px; }
Create an account or sign in to comment