Here's the code: <div id="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> Code (markup): The reason I am floating the anchors is because I want them to have the characteristics of a block element but I need them to be inline at the same time. They need to behave like blocks because I want to give them a background image so specifying a height would be a must. And the height property doesnt work with inline elements. So all is good but I want everything under #menu to be centered. This is what #menu looks like: margin: 0; padding: 0; height: 60px; line-height: 60px; text-align: center; Code (markup): I already tried googling for this but could not find any help I hope I'll find some help here... Thanks, -- Naif
im not sure you can float them and then center them how ever I think you can but the menu div inside another div and center it inside that. With no width set on the menu div it should auto adjust and float in the middle of the outer div. Hope this helps/works David
Hi David. That wont do either. Lets assume I have something which looks like this: <div id="menucontainer"> <div id="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> Code (markup): If I center align the content of menucontainer, #menu and every element inside #menu would be centered. But if I float the anchors towards the left, they'll break the center rule. I have been searching for a solution from quite a while now but no luck so far. I dont want to jump into conclusions but I guess this cannot be done.. I even tried using lists but that didnt help either. I have a solution for this but it aint really great. So I thought I might ask here and see if I get any answers.
Yeah I see what you mean I just had ago to see if I could think of anything else and I had to use align="" to get them to center and then I had to work out the exact width of the links to make it display right (so not very dynamic) If you do find out how to do this could you please PM me as I feel it would be useful to know
Try this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> Centered Horizontal Menu </title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } body { font: 100% verdana, helvetica, sans-serif; line-height: 1.25; color: black; background-color: white; } p { font-size: 1em; margin: 1.25em 0 0; } h1, h2 { text-transform: capitalize; } h1 { font: 1.8em georgia, geneva, serif; text-align: center; } h2 { font: 1.5em georgia, geneva, serif; } ul { text-align: center; padding: 0; margin: 0; line-height: 2em; background-color: teal; } ul li { display: inline; } ul li a { background-color: yellow; padding: .5em; text-decoration: none; } #wrapper { border: 1px solid black; margin: 25px auto; width: 750px; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <h1> centered h-list </h1> <ul> <li> <a href="">item 1 xxx</a> </li> <li> <a href="">item 2 xxxxxxx</a> </li> <li> <a href="">item 3</a> </li> </ul> <h2> content </h2> </div><!-- end wrapper --> </body> </html> Code (markup): cheers, gary
Hi Gary. Sorry but I dont think thats what I am looking for. I dont want to give the links a background color. I want to give them a background image. So assuming the height of the image is 30px, the anchor needs to be exactly 30px long. And as you know, height can only be given if the link is a block or has been floated. Bacanze, that would work but then the font-size would need to be fixed. If the user increase s or decrease the font size, the padding would need to be changed too. xd2, after lots of googling, I found an article. This can easily be done using IE by making the anchors 'inline-block' but unfortunately Firefox doesnt support this property because its not part of CSS 2. But I have come across something which would do the trick for FF I'll get back here soon with more details.. Thanks, -- Naif
Ah. I used a bg color because I didn't have a suitable image handy. I assumed you were talking about some type of gradient or something similar, and you wanted sufficient height that it not be cramped. What you're talking about is an image bound design. You'd be better off using a foreground image. Otherwise, a font-size change will break things. The code I gave you will expand or contract with font-size changes. The bg image would be expected to allow for reasonable changes. I'd like to see what you've found. cheers, gary
Here's what I wanted and the solution I came up with. The image I used can be download from: http://img441.imageshack.us/img441/9151/bckmenulinkka1.gif I have tested this with IE 6.0, FF 2.0 and Opera 9.10. I havent tested this with IE 7 though. Here's the code <!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=iso-8859-1"/> <title>Demo of inline-block</title> <style type="text/css"> body { margin: 0; padding: 0; } #menu { margin: 25px 0 0 0; text-align: center; font-family: Arial; font-size: 11px; } #menu a { margin: 0 15px; background: no-repeat url(bckmenulink.gif); width: 100px; height: 30px; line-height: 23px; text-decoration: none; color: #fff; /* --- Here comes the important part --- */ /* This is for Firefox! FF doesnt support inline-block so this has to be used instead. The order in which both display properties come is important. */ display: -moz-inline-stack; /* And this is for IE as it supports this property */ display: inline-block; } /* This is actually just for FF so that it centers the content of the inline-block */ #menu a span { display: block; text-align: center; } </style> </head> <body> <div id="menu"> <a href="#"><span>Home</span></a> <a href="#"><span>Portfolio</span></a> <a href="#"><span>About us</span></a> </div> </body> </html> Code (markup): Hope you find this to be of use someday Regards, -- Naif
Interesting. I was not aware of -moz-inline-stack. I had tested -moz-inline-block, which I would have thought should work, but didn't. Do be aware the "buttons" break if your visitor decides to increase the font size. Given that you start with a very small font, 11px ≈ 8.25pt, enlarging the font will be common. cheers, gary
-moz-inline-block was removed when Firefox v1.5 was released. Now there's -moz-inline-stack, -moz-inline-grid and -moz-inline-box. I havent experiemented with box or grid yet. I dont understand why you said the links will break if the font size is increased? I tried increasing the size from 11px to 20px and it works fine. Depending on the background image, the line-height might need to be adjusted though. Thats it. Regards, -- Naif Edit: Got it now. You were talking about increasing the font size from the browser