SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    separators between text

    Hey all, need a little bit of help. I'm trying to put a small arrow image between text, like on a breadcrumb nav, where something like
    Home > Links > Contact Us > About
    has the '>' replaced with an image. The problem I'm running into is that the images all just line up under the actual words instead of appearing between them. I also have this problem with an invisible spacer css class to separate text else where. It all just lines up under the text and not between each phrase. The css code I'm using right now for the arrows is:

    .gold_right_arrow {
    width: 5px;
    height: 7px;
    background-image: url(/app/images/gold_right_arrow.gif);
    margin-right: 5px;
    margin-top: 3px;
    float: left;
    }

    any help is appreciated, thanks.

  2. #2
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post your HTML code as well please?

    Think I know what your after, but want to be sure.

    Thanks.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <div id="top_breadcrumb">
            <div class="breadcrumb_text"><div class="gold_right_arrow"></div>Front Page <div class="gold_right_arrow"></div> Links <div class="gold_right_arrow"></div> About</div>
            <div class="breadcrumb_logout">Logout</div>
        </div>
    and the div surrounding the text and arrows would be:

    .breadcrumb_text {
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 9px;
    font-weight: bold;
    margin-top: 5px;
    margin-left: 10px;
    float: left;
    }

  4. #4
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I see now.

    Your probably better using an un-ordered list for your breadcrumb. Something like this should work...

    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>
    <title>Breadcrumb</title>
    <style type="text/css">
    ul#breadcrumb {
    	color: #FFFFFF;
    	font-family: Verdana;
    	font-size: 9px;
    	font-weight: bold;
    	margin-top: 5px;
    	margin-left: 10px;
    	float: left;
    }
    ul#breadcrumb, ul#breadcrumb li {
    	display: inline;
    }
    ul#breadcrumb li {
    	padding-left: 14px;
    	background: url(/app/images/gold_right_arrow.gif) no-repeat 0 2px;
    }
    </style>
    </head>
    <body>
    
    
    	<ul id="breadcrumb">
    		<li><a href="#">Front Page</a></li>
    		<li><a href="#">Links</a></li>
    		<li><a href="#">About</a></li>
    	</ul>
    
    </body>
    </html>
    You'll need to play around with the 'ul#breadcrumb li' declaration to get the image positioned where you want it depending on the size of your image.

    Hope this helps.

    Andy
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help.. looks like that will work.

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, one more small problem.. with the design that I'm using its sorta like this:

    >> Front page > Links > About

    the '>>' is a different looking arrow that just goes at the front of the bar, while the '>' arrows are a different separator image. The problem is that with using an unordered list the '>' would also be in front of front page which isnt what I'm after. So I removed Front page from the unordered list, but the problem now is that the ' > Links > About' is now on the line below, and I can not get it back up as long as the Front Page link is outside of the unordered list. Any suggestions?

  7. #7
    SitePoint Member Elysa's Avatar
    Join Date
    Nov 2005
    Location
    Dallas, TX
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure but I think you could add another class "firstpage" or something and apply it to the first item in the ul and leave front page as part of the list.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to have an unordered list in which each element has the same size? I'm trying to use it for a navigation, but I need each button to have the same width without depending on the text inside of it. If thats possible how would you likely do it? Thanks.

  9. #9
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you can be sure that none of the links will exceed a certain width then you can specify a width for your <li> in CSS.
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  10. #10
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey try getting a new html code with all the text and images in different columns aof same row in a table. the same css should work with it. try it out.

  11. #11
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey!

    Don't go leading him astray now we've shown him the light with CSS
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  12. #12
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Northern Star
    Hey!

    Don't go leading him astray now we've shown him the light with CSS
    Ditto.
    Web Design, Marketing, Etc .............
    ....

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol I'm already past not using tables, I've seen the light.. its just a lot more trickier it seems.

    I have tried adding a width to the <li> in css, but it doesnt seem to change it at all. Any ideas as to why? The following css is for the navigation:

    #nav_bar {
    width: 950px;
    background-color: #EFEFEF;
    height: 28px;
    border: 1px solid #000000;
    margin: auto;
    }

    #navigation {
    margin-top: 7px;
    float: left;
    }

    #navigation ul {
    display: inline;
    width: 95px;
    height: 30px;
    }

    #navigation li {
    display: inline;
    width: 95px;
    }

    #navigation li a {
    background-color: #EFEFEF;
    color: #000000;
    text-decoration: none;
    font-size:11px;
    font-weight: bold;
    padding: 8px 8px 7px 8px;
    margin-left: 5px;
    width: 95px;
    }

    #navigation li a:hover {
    background-color: #000000;
    color: #FFFFFF;
    width: 95px;
    }

  14. #14
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm,

    Try changing this...

    Code:
    #navigation li a {
         background-color: #EFEFEF;
         color: #000000;
         text-decoration: none;
         font-size:11px;
         font-weight: bold;
         padding: 8px 8px 7px 8px;
         margin-left: 5px;
         width: 95px;
    }
    To this...

    Code:
    #navigation li a {
         background-color: #EFEFEF;
         color: #000000;
         text-decoration: none;
         font-size:11px;
         font-weight: bold;
         padding: 8px 8px 7px 8px;
         margin-left: 5px;
         width: 95px;
         display: block;
         float: left;
    }
    I forgot to mention that you can only specify a width on block level elements. You might need to tweak your margins and paddings to get it looking right again.
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •