Dark Knight Posted October 3, 2008 Share Posted October 3, 2008 I've tooked this code from a site. Here is the code: #vista_toolbar { float: left; font: normal 12px 'Trebuchet MS','Arial'; margin: 0; padding: 0; text-align: center;}#vista_toolbar ul {background-image:url(images/back.gif);background-repeat:repeat-x;float:left;line-height:32px;margin:0;padding:0 10px 0 10px;width:605px;}#vista_toolbar li {display:inline;padding:0;}#vista_toolbar a {color:#FFF; /* need because it will use default link color */float:left;padding:0 3px 0 3px; /* left 3 px because of left.png image */ text-decoration:none;}#vista_toolbar a span {display:block;float:none;padding:0 10px 0 7px;}#vista_toolbar a span img {border:none;margin:8px 4px 0 0;}/* show picture when mouse over link */#vista_toolbar a:hover{background: url(images/left.png) no-repeat left center;}#vista_toolbar a:hover span {background:url(images/right.png) no-repeat right center;} The thing I want to modify is to make the menu be centerd. This is a problem because when I remove the float, and put text-align:center, FF will not read it and the background will be black. Any suggestions? Link to comment Share on other sites More sharing options...
Jerry62704 Posted October 3, 2008 Share Posted October 3, 2008 I've tooked this code from a site. Here is the code:#vista_toolbar { float: left; font: normal 12px 'Trebuchet MS','Arial'; margin: 0; padding: 0; text-align: center;}#vista_toolbar ul {background-image:url(images/back.gif);background-repeat:repeat-x;float:left;line-height:32px;margin:0;padding:0 10px 0 10px;width:605px;}#vista_toolbar li {display:inline;padding:0;}#vista_toolbar a {color:#FFF; /* need because it will use default link color */float:left;padding:0 3px 0 3px; /* left 3 px because of left.png image */ text-decoration:none;}#vista_toolbar a span {display:block;float:none;padding:0 10px 0 7px;}#vista_toolbar a span img {border:none;margin:8px 4px 0 0;}/* show picture when mouse over link */#vista_toolbar a:hover{background: url(images/left.png) no-repeat left center;}#vista_toolbar a:hover span {background:url(images/right.png) no-repeat right center;} The thing I want to modify is to make the menu be centerd. This is a problem because when I remove the float, and put text-align:center, FF will not read it and the background will be black. Any suggestions? Put your vist_toolbar div inside of a full sized div that has css to center stuff. I think you can have margin:auto; on that div, but if that doesn't work add text-align:center. Link to comment Share on other sites More sharing options...
Dark Knight Posted October 3, 2008 Author Share Posted October 3, 2008 The css is on a div i forgot to mention that. I've tried to add margin:auto, and text-align:center, but dosen't work. what else can be done? Link to comment Share on other sites More sharing options...
rzea Posted October 3, 2008 Share Posted October 3, 2008 When you use margin:auto; you HAVE to assign a width to the DIV, it can be in px or %. Link to comment Share on other sites More sharing options...
Dark Knight Posted October 4, 2008 Author Share Posted October 4, 2008 I add a width to that div but the menu is this in the left side. i guess this menu can't be centered in a div. Link to comment Share on other sites More sharing options...
rzea Posted October 4, 2008 Share Posted October 4, 2008 ANYTHING can be centered in HTML.If you have a link or an image of your issue I can be of more help... and of course, more efficient with everyone's time.Let us know then. Link to comment Share on other sites More sharing options...
Dark Knight Posted October 4, 2008 Author Share Posted October 4, 2008 This is the CSS Code: #vista_toolbar { float: left; font: normal 12px 'Trebuchet MS','Arial'; margin: 0; padding: 0; text-align: center;}#vista_toolbar ul {background-image:url(images/back.gif);background-repeat:repeat-x;float:left;line-height:32px;margin:0;padding:0 10px 0 10px;}#vista_toolbar li {display:inline;padding:0;}#vista_toolbar a {color:#FFF; /* need because it will use default link color */float:left;padding:0 3px 0 3px; /* left 3 px because of left.png image */ text-decoration:none;}#vista_toolbar a span {display:block;float:none;padding:0 10px 0 7px;}#vista_toolbar a span img {border:none;margin:8px 4px 0 0;}/* show picture when mouse over link */#vista_toolbar a:hover{background: url(images/left.png) no-repeat left center;}#vista_toolbar a:hover span {background:url(images/right.png) no-repeat right center;} This is the HTML Code for Divs: <div id="vista_toolbar"><ul><li><a href="#"><span><img align="left" src="images/home.gif" alt="prima pagina" />1</span></a></li><li><a href="#"><span><img align="left" src="images/about.gif" alt="despre mine" />2</span></a></li><li><a href="#"><span><img align="left" src="images/portfolio.gif" alt="portofoliu" />3</span></a></li><li><a href="#"><span><img align="left" src="images/mona.gif" alt="galerie foto" />4</span></a></li><li><a href="#"><span><img align="left" src="images/links.gif" alt="legaturi" />5</span></a></li><li><a href="#"><span><img align="left" src="images/contact.gif" alt="contact" />6</span></a></li></ul></div> If does matter, the doctype is XHTML 1.0 Transitional. Any more information? Link to comment Share on other sites More sharing options...
rzea Posted October 4, 2008 Share Posted October 4, 2008 I told you anything can be centered in HTML.Small fixes to your CSS and some cleaning to your HTML. You don't even have to use margin:auto; hence you don't need to assign a width either to the #vista_toolbar DIV, just some minor cleaning/use of short-hands and add text-align:center; to the #vista_toolbar ul:HTML: <div id="vista_toolbar"> <ul> <li><a href="#"><img src="images/home.gif" alt="prima pagina" />1</a></li> <li><a href="#"><img src="images/about.gif" alt="despre mine" />2</a></li> <li><a href="#"><img src="images/portfolio.gif" alt="portofoliu" />3</a></li> <li><a href="#"><img src="images/mona.gif" alt="galerie foto" />4</a></li> <li><a href="#"><img src="images/links.gif" alt="legaturi" />5</a></li> <li><a href="#"><img src="images/contact.gif" alt="contact" />6</a></li> </ul></div> CSS: #vista_toolbar { font: normal 12px 'Trebuchet MS', 'Arial'; padding: 0; background:#666;}#vista_toolbar ul { background:url(images/back.gif) repeat-x; line-height:32px; margin:0; padding:0 10px; text-align:center;}#vista_toolbar li { display:inline; padding:0;}#vista_toolbar a { color:#FFF; /* need because it will use default link color */ padding:0 3px 0 3px; /* left 3 px because of left.png image */ text-decoration:none;}#vista_toolbar a span { display:block; padding:0 10px 0 7px;}#vista_toolbar a span img { border:none; margin:8px 4px 0 0;}/* show picture when mouse over link */#vista_toolbar a:hover { background: url(images/left.png) no-repeat left center;}#vista_toolbar a:hover span { background:url(images/right.png) no-repeat right center;} And yes, DTD is important.There you go, you were very close with your code, good job there. Link to comment Share on other sites More sharing options...
Dark Knight Posted October 5, 2008 Author Share Posted October 5, 2008 It's hopeless; It dosen't make any difference. thank you for help but THE FLOAT is needed so the background image can be read.Here is the site were I've tooked theis menuClick Link to comment Share on other sites More sharing options...
rzea Posted October 5, 2008 Share Posted October 5, 2008 110% agree, this is hopeless.Good luck. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.