HTML/CSS Center DIV inside DIV, absolute/relative problems -
i've been searching hours now, can't seem figure out.
i want center menu @ bottom of header div, seems either center keep @ top or keep @ bottom not center it.
it has position:relative/absolute, believe.
this html:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>transport2000</title> <meta http-equiv="content-language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="mssmarttagspreventparsing" content="true" /> <meta name="description" content="transport, mobilier, moloz etc." /> <meta name="keywords" content="transport, chican, marfa, duba, bucuresti, romania, transport bucuresti, " /> <meta name="author" content="iulian" /> <style type="text/css" media="all">@import "css/master3.css";</style> <style type="text/css" media="all">@import "css/master3.css";</style> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> <div id="header"> <!--<h1><img src="images/header/banner.png" alt="transport2000" /></h1>--> <div id="menu"> <dt id="acasa"> <a href="index.htm">acasa</a></dt> <dt id="galerie"> <a href="galerie.htm">galerie</a></dt> <dt id="contact"> <a href="contact.htm">contact</a></dt> </div> </div> <div id="container"> <!--<div id="menu"> <ul> <li><a href="#">acasa</a></li> <li><a href="#">galerie</a></li> <li><a href="#">contact</a></li><br> </ul> </div>--> <div id="content"> <div class="padding"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. curabitur ultricies scelerisque erat eu mattis. duis lacinia, ante non adipiscing euismod, dui lorem adipiscing turpis, et convallis leo orci ac ligula. proin porta risus id tortor aliquet sollicitudin. sed suscipit blandit nisi, ac laoreet nulla ultrices sed. curabitur velit enim, eleifend nec faucibus vitae, imperdiet eget lectus. suspendisse quis ligula urna. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. quisque hendrerit nisl eu nibh facilisis in rutrum elit tempor. praesent vel nisi quis justo sodales elementum.</p> <p>fusce felis dui, pharetra vel condimentum sed, elementum non nisl. maecenas condimentum pretium augue, non rhoncus magna hendrerit at. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; etiam euismod laoreet sollicitudin. lorem ipsum dolor sit amet, consectetur adipiscing elit. donec tempor adipiscing nibh, dignissim nunc rutrum in. donec ut nulla neque. aenean mi sapien, pulvinar interdum in, fringilla pharetra turpis. aliquam aliquet volutpat imperdiet. integer eu magna purus, id mattis tortor. suspendisse porttitor ligula vitae erat pellentesque auctor. vivamus non interdum urna. duis fermentum venenatis turpis, @ vestibulum mauris ultricies vel. aliquam in arcu in orci rutrum condimentum vel @ ipsum. pellentesque scelerisque eleifend ipsum, @ scelerisque eros condimentum eu. phasellus ante metus, fermentum id lobortis id, rutrum id magna.</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. curabitur ultricies scelerisque erat eu mattis. duis lacinia, ante non adipiscing euismod, dui lorem adipiscing turpis, et convallis leo orci ac ligula. proin porta risus id tortor aliquet sollicitudin. sed suscipit blandit nisi, ac laoreet nulla ultrices sed. curabitur velit enim, eleifend nec faucibus vitae, imperdiet eget lectus. suspendisse quis ligula urna. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. quisque hendrerit nisl eu nibh facilisis in rutrum elit tempor. praesent vel nisi quis justo sodales elementum.</p> </div> </div> </div> <div id="footer"> <div id="copyright"> copyright © 2013 blahzx designs<br /> </div> </div> </body> </html> and css:
html, body { margin: 0px; padding: 0px; } body { font-family: tahoma, arial, helvetica, sans-serif; font-size: 15px; color: #ffffff; text-align: center; background-image:url('bg.png'); background-color:#ffffff; background-repeat: repeat; } h1 { margin: 0; padding: 0; text-align: center; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } #container { width: 960px; margin: auto; text-align: left; } #header { width: 100%; height:141px; position: relative; background-image:url('top.png'); background-repeat: repeat-x; } #header-content { position: absolute; bottom: 0; } /* menu */ #menu { height: 30px; width: 639px; margin-left: auto !important; margin-right: auto !important; text-align: center; position: absolute; bottom: 0; } #menu dl { margin: 0; padding: 0; } /* ie5 mac hack \*/ #menu { padding-left: 0; } /*/ #menu { padding-left: 100px; overflow: visible; } /* end hack */ #menu dt { float: left; } #menu dt { display: block; height: 0px !important; height /**/:44px; /* ie 5/win hack */ padding: 30px 0 0 0; overflow: hidden; text-align: center; background-repeat: no-repeat; } #menu dt a:hover { } #menu dt#acasa, #menu dt#acasa {width: 182px; background-image: url(../images/menu/acasa.png); } #menu dt#acasa a:hover {width: 182px; background-image: url(../images/menu/acasa_on.png); } #menu dt#galerie, #menu dt#galerie { width: 221px; background-image: url(../images/menu/galerie.png); } #menu dt#galerie a:hover {width: 221px; background-image: url(../images/menu/galerie_on.png); } #menu dt#contact, #menu dt#contact { width: 236px; background-image: url(../images/menu/contact.png); } #menu dt#contact a:hover {width: 236px; background-image: url(../images/menu/contact_on.png); } #content { width:960px; margin-right:280px; line-height:18px; } #content { color: #ffffff; text-decoration: none; } #content a:hover { color: #cc00ff; text-decoration: none; } #content .padding { padding: 25px; } #footer { width:auto; height:137px; clear: both; font-family: tahoma, arial, helvetica, sans-serif; font-size: 10px; color: #c9c9c9; text-align: center; background-image:url('bot.png'); background-repeat: repeat-x; } #footer { color: #c9c9c9; text-decoration: none; } #footer a:hover { color: #ffd800; } #footer #altnav { clear: both; width: 350px; float: right; text-align: right; padding-top: 13px; } #footer #copyright { padding-top: 110px; } thank you!
edit: have added whole code.
#menu { height: 30px; width: 639px; text-align: center; position: absolute; bottom: 0; left:50%; margin:0 0 0 -320px; /* left 50% plus margin top 0 right 0 bottom 0 left (halfwidth) makes sure fits different screen*/ } try set margins left , right both "auto" center it, rather margin: 0 auto; <- sets left hand side.
since may have somewhere else conflicts ones, contains "!important" declaration, override corresponding declaration in prior or later style sheet.
Comments
Post a Comment