Trouble With Links On A List i want to display it inline

[Lozbo 0]

I have a menu that i want to display inline, in the same row, something like this:

<style type="text/css">ul{float:left;width:100%;padding:0;margin:0;}a{float:left;text-decoration:none;color:white;background-color:red;padding:5px 10px;}a:hover {background-color:blue}li {display:inline}</style>

The only problem is that i want a custom img for showing as

list-style: url(img/bullet.gif) 

But seems that display:inline makes my bullet go away... could some one point me in the right direction? Thanks in advance...

[shadowdemon 0]

can u explain a little more of wat u want. TY

[dundun2007 0]

i understand that you want to display that menu and everything looks good on that part but you want to use a custom image for what? Did you want some kind of icon or somethng you need to better explain to me the custom picture part it could be a background icon or anything i dont really know for sure whats going on with that part. Also if you want the bullets to stay then your coding is wrong. I dont really know what you want though let me know and then i can help you as much as possible.

[Lozbo 0]

I am sorry for not explaining right.I want a menu, which is in fact a list with links, to be displayed inline, but i want each list item to keep its bullet, which is a custom image, but as soon as i get it inline, it removes the bullet... So i hope you guys understand me better this time...

[shadowdemon 0]

hmmmm im not sure maybe your bullitens are to big.Try some sites on the web some make drop down menus for you onb the site and give u the code for it

[Lozbo 0]

hmmmm

 

im not sure maybe your bullitens are to big.

 

Try some sites on the web some make drop down menus for you onb the site and give u the code for it

185710[/snapback]

not too big becouse when i remove the line that declares the "display: inline" they come back to life... and im searching the web for it, it was w three skulls where i got this code anyway on the first place... but im askin if some one knows right now to post it here... thanks anyway

 

this is the actual code im using, that is working:

CSS:#footer ul {list-style: url(img/bullet.gif) inside;width:100%;padding:0;margin:0;}/*#footer ul li {display:inline;}*/#footer a {text-decoration:none;padding: 0 10px 0 0;color:#FFFFFF;}

Note that the footer ul li is between comments? When i remove the /* */ my list becomes one line, but the list-style bullet gets removed too... and i *DO* want my bullets there... so im asking if some one knows how to hack that down... thanks

 

Notice from BuffalHELP:

Please refrain from double posting. You can use the REPORT! to tell mods to include additional information to your post. Double posting means posting one after another. Merging.

[jlhaslip 4]

css code here:

 

#nav {text-align: right;font-family: trebuchet ms, arial, agency;color: #B85C00;font-size: 10pt;padding-right: 16px;}

 

and html code here:

 

<p id="nav"><u>  <a href="index.html">Home</a>| <a href="contacts.html">Contact List</a>| <a href="teams.html">Teams</a>| <a href="tourneys.html">Tournaments</a>| <a href="refs.html">Officials</a>| <a href="mailto:youremail@yourISP.com">Contact Us</a>  </u></p>

creates an in-line nav bar.

 

Try replacing the vertical pipes with your chosen image to see what would happen.

 

Sorry, I didn't try myself, but I would be interested in knowing if it works. Might have to insert

before and after your images to space them out visually.

 

Hope this helps.

 

Just so happens that it worked for me. Only thing is, I'm not certain the forum would want me to post the entire page here, so if you were to pm me with your email address, then I will forward a zip file to you containing the full sample page.

 

Hope I can be of some use around here...

 

Well, in case someone else want to view the code, here it is :

 

<p id="nav"><u>  <img src="your_image.gif" width="10">  <a href="index.html">Home</a><img src="your_image.gif" width="10">  <a href="contacts.html">Contact List</a><img src="your_image.gif" width="10">  <a href="teams.html">Teams</a></p>

You should be able to enhance this paragraph tag with rollover effects by utilizing css rules like Lozbo posted in the first posting. That I didn't try, but I might get a chance to test for that tomorrow. Stay tuned....

 

You should be able to enhance this paragraph tag with rollover effects by utilizing css rules like Lozbo posted in the first posting. That I didn't try, but I might get a chance to test for that tomorrow. Stay tuned....

187075[/snapback]

And, yes, the a:hover { color: #pick one;

bacground-color: #pickone;} does work with this html/css code.

 

So today was not a total waste, I've learned something... thanks for the question. I have enjoyed this exercise and hope it works for you...

 

Notice from BuffaloHELP:

Merged as reported

Edited September 18, 2005 by BuffaloHELP (see edit history)

[Lozbo 0]

Thanks jlhaslip, i know i can do that, but the thing was to keep the links as a list, not as separate paragraphs or lines, but thanks any way for your help. As i told ya in a personal message, what ive found reading here and there is that this was not possible, that if your inline a list, the bullet will always go away, though im not entirely sure, so if some one knows about this please drop a message so we can close this thread.