Jul 25, 2008

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

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

free web hosting

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

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

CODE

<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
CODE

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...

Reply

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

Reply

dundun2007
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.

Reply

Lozbo
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...

Reply

shadowdemon
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

Reply

Lozbo
QUOTE(shadowdemon @ Sep 13 2005, 04:26 PM)
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
*


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 smile.gif

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

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.

 

 

 


Reply

jlhaslip
css code here:

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


and html code here:

CODE
<p id="nav"><u>&nbsp;&nbsp;<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>&nbsp;&nbsp;</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
CODE
&nbsp;&nbsp;
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... biggrin.gif

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

CODE
<p id="nav"><u>&nbsp;&nbsp;
<img src="your_image.gif" width="10">&nbsp;&nbsp;
<a href="index.html">Home</a>
<img src="your_image.gif" width="10">&nbsp;&nbsp;
<a href="contacts.html">Contact List</a>
<img src="your_image.gif" width="10">&nbsp;&nbsp;
<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....

QUOTE(jlhaslip @ Sep 18 2005, 12:38 AM)
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....
*



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

Reply

Lozbo
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.

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : trouble, links, list, display, inline

  1. Xhtml Strict Links Tip
    A problem might accure (5)
  2. Links Help Please
    :) (10)
    Okay i have links that work at my house but not at school where i am trying to edit the HTML, the
    site is www.gaming-alliance.net, the links arent set anywhere but it should still send me to a blank
    page if the link i sent it to does not exist. Could someone please check it out and see if its
    working on a different computer? because it works on mine at home heres the code... Gaming
    Alliance | Next Generation Of Gamers Today Thanks.....
  3. How To Display Php Code [resolved]
    Html Help With Php Codebox (8)
    I'm trying to make codebox for my guestbook so that users can post PHP code inside.. I tried
    many versions but none of them works If i use , or i can display HTML code, but when i try to
    write PHP code it executes it does not display.. There is a way to make swap for You have codebox
    in forum to display php how can i make that?! thanks....
  4. Creating Rss Feeds For Wapsites
    How to display rss feeds in a php enabled site (5)
    Anyone who wants to help me? I want my site to have this feature but I don't know how.
    /sad.gif" style="vertical-align:middle" emoid=":(" border="0" alt="sad.gif" /> Hope you could me
    with embedding these xml files in my wml pages.. Moved to the HTML, XML ect.. forum ....
  5. Width Of Display Area Of Browser Window
    is there a formula? (6)
    I am making a table in a website that's as big as the display area of the browser for instance:
    CODE <Table border=0 cellpadding=0 cellspacing=0 width=?? align=center> .... .....
    </table> How do I know the width of the browser display area? Better yet, is there a
    general formula for that for other screen resolutions? I know a little bit of javascript, are
    there functions for that?....
  6. Image Links
    (5)
    Ok...another question...may sound stupid, but we're all stupid...how'd I be able to create
    an image link. Uh...let me rephrase this: If I were to create an "Enter" image and wanted people to
    click the image to enter to a certain page, how would I do it without some sort of the famous "Blue
    Line" around it? Any help would be greatly appreciated... /unsure.gif"
    style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" />....
  7. Centering Page Of Html At Various Display Widths
    Viewing Screen Shots No Matter Resolution (14)
    I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in
    the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How
    do I make the page always appear in the middle? I have seen many sites set up that will adjust
    accordingly, but I cannot figure it out. If you want to view my source you can do so by going to the
    website: www.faithcity.org/test.html. Moving to the html Topic ....
  8. Keyboard Shortcut For Links In Html?
    (8)
    Is there a way to make use of the keyboard when togging html links? I'm doing a project and it
    would be nice if the user won't be too mouse-dependent. He will have the option of using the
    keyboard as well. I'm thinking if the user does a particular keypress (CTRL + LETTER maybe? )
    the link will be "clicked". This is probably a stupid question but if anyone knows a way it would
    be so fantastic! /cool.gif" style="vertical-align:middle" emoid="B)" border="0"
    alt="cool.gif" /> Thanks.....
  9. Dynamic Links
    (3)
    his may be a CSS question, but it's the XHTML not validating that's giving me a problem.
    I'm working with the most out-dated shopping cart software (Click Cart Pro) ever and I'm
    trying to get it to validate XHTML 1.0 Transitional. All the XHTML I've supplied is good and
    validates fine, but where I'm falling short at the moment is with the linking. ClickCart Pro -
    by default - spits out HTML from 1996, and the links are supplied with ampersands - not the XHTML
    character entity "&". Par l'exemple: Code: CODE <a href="http:....
  10. Word.doc Or Pdf Formatted File To Display In A Web
    How to maintain the formatting??? (12)
    I have a document which was originally created using ms office word processing with very strict
    formatting requirements. It is a high level academic paper which I would like to make viewable
    within a web page complete with the original formatting. I also have it available as a pdf file with
    the same formatting. Regardless of the format, is there a way to convert this highly formatted
    document into an html page and retain the formatting without major work? The only way I have been
    able to do this so far is with the use of a table layout , an iframe, and the client havi....
  11. Update Navigation Links?
    (2)
    One of the requirements for the site Im working on right now is to be able to update navigation
    links easily. Its easy to do with frames, which I want to avoid. If I have 8 different pages, and
    add another page or anything, I dont want to have to open 8 pages and make the change to all of
    them. Is there another way, like having some kind of external style sheet, and bieng able to update
    that and have it carry over to all the other pages? As far as I understand, you can only have CSS
    code in a external stylesheet, and all the link infomation is in the actual page itself.....
  12. Display Tooltip
    (2)
    Hi, I have a flash menu on the left site of the screen which basically are icons only. The movie is
    very narrow (only 50 pixels wide), so there is not enough room to display text also in there. My
    problem is that I want a tooltip to appear when doing a mouseover over one of these icons. I tried
    using layers, but they seem to dissapear under the flashmovie itself, as well as other flash
    elements on the webpage. Since within the flash movie this can't be done, I am looking for a
    solution whereby a tooltip appears over the flashmovie. Help very appreciated. Kind reg....
  13. Dropdown Menus Links
    IDK how to make them link (3)
    Ok its a big problem to me, i need to make my drop down menus options link to a web page. I know i
    can do it with a button, and i can get that to work but i need/want to have it link as soon as the
    option is selected........How do i do that?....
  14. Need To Learn Xml Quick
    links or info on xml (8)
    I need to learn xml and would like links or anything on the subject. I've looked at some code
    and i still don't see the point to it at all. round ....
  15. Frames And Links
    (3)
    I don't often use frames and I am having a problem linking from page to page. I am using php.
    I have a link with goes: result 1 In results.php I create my frames and use 'if' queries
    to select a frameset depending on the variable passed in the link, so it goes: if ($_GET ) {
    else ...and so on. My problem is this - when I use target="result1", a new window opens and loads
    the page the way I want it, but I don't want a new window to open. If i put target="_self",
    then the page loads in the same window, but the page 'results.php' ap....

    1. Looking for trouble, links, list, display, inline

Searching Video's for trouble, links, list, display, inline
advertisement



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



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE