anatak Posted July 19, 2009 Share Posted July 19, 2009 I am trying to make a navigation bar (list of links) to be displayed in a single line (display: inline;) but the background graphic gets cut #hori_navcontainer ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } #hori_navcontainer ul li { display: inline; } #hori_navcontainer a { /* text-decoration: none; padding: .2em 1em; color: #C0C0C0; background-color: #036; */ display: block; background-color: transparent; background-image: url(graphic/button/nav_button_background.gif); background-repeat: no-repeat; width: 132px; height: 32px; margin: 0px auto; padding: 5px 0 0 0; text-align: center; font-size: 110%; font-weight: bold; text-decoration: none; color: #C0C0C0; } #hori_navcontainer ul li a:hover { color: #fff; background-position: 0 -42px; /*color: #FF7200; background-color: #369;*/ } this is how it looks with #hori_navcontainer a { display: block; } and this his how it looks with #hori_navcontainer a { display:inline; } Can someone help me how to display the full background image with display inline ? thank you anatak Quote Link to comment Share on other sites More sharing options...
haku Posted July 21, 2009 Share Posted July 21, 2009 You didn't show us any of the HTML - without that, the CSS has no context. But you probably want to float your list elements instead of displaying them inline. Then make the anchor element inside the list item into a block element, and make it the full size of the background image (play with the size from there). Quote Link to comment Share on other sites More sharing options...
anatak Posted July 21, 2009 Author Share Posted July 21, 2009 HTML code <div id="hori_navcontainer"> <ul> <li><a class="nav_button" id="buttonNAV" href="<?php echo $_SERVER['PHP_SELF']."?p=p01"; ?>">Home</a></li> <li><a class="nav_button" id="buttonNAV" href="<?php echo $_SERVER['PHP_SELF']."?p=p02"; ?>">Contact</a></li> <li><a href="<?php echo $_SERVER['PHP_SELF']."?p=p03"; ?>">For Sale</a></li> </ul> </div> I will try first to understand what you are saying and will probably post here again for more help. Does that mean I have to make every button a separate div and float every separate div ? Quote Link to comment Share on other sites More sharing options...
haku Posted July 22, 2009 Share Posted July 22, 2009 Nope. Stick with what you have, and use this as your CSS: #hori_navcontainer li { float:left; width: ___px (width of the image); height: ___px (height of the image) } #hori_navcontainer li a { display:block; height: ___px; width: ___px; } That should at least get you started. You will have to tweak the numbers a little. Quote Link to comment Share on other sites More sharing options...
anatak Posted July 22, 2009 Author Share Posted July 22, 2009 Thank you very much. this is what I was looking for. Now the menu (3 buttons) is not in the right place anymore. I think it is because of the float attribute but I am not sure. html code <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <link rel="stylesheet" href="stylesheet/one_column_style.css" type="text/css" /> <link rel="stylesheet" href="stylesheet/text_style.css" type="text/css" /> <link rel="stylesheet" href="stylesheet/css_button.css" type="text/css" /> <title>bike collector</title> </head> <body> <div id="wrap"> <div id="header"><h1 class="center">bike collector</h1> <div id="hori_navcontainer"> <ul> <li><a class="nav_button" id="buttonNAV" href="/bike/public_html/index.php?p=p01">Home</a></li> <li><a class="nav_button" id="buttonNAV" href="/bike/public_html/index.php?p=p02">Contact</a></li> <li><a href="/bike/public_html/index.php?p=p03">For Sale</a></li> </ul> </div> </div> <div id="main"> <a href="html_eng/home.html">Welcome to bike collector<br /><img src="picture/900_SS.jpg" /><a/><br /> <a href="html_fra/home.html">Bienvenu a bike collector<br /><img src="picture/900_SS.jpg" /><a/> </div> <div id="footer">footer text test on php </div> </div> </body> </html> Could you explain why the navigation menu is now under the header div ? Thank you anatak Quote Link to comment Share on other sites More sharing options...
haku Posted July 22, 2009 Share Posted July 22, 2009 Add: overflow:auto; to header#div Quote Link to comment Share on other sites More sharing options...
anatak Posted July 22, 2009 Author Share Posted July 22, 2009 Thank you very much. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.